如何为Three.js 3D对象（球体几何体）设置固定的高度和宽度？

Question

我在three js场景中添加了一个球形object3D。但是当我放大或缩小时，它的大小会发生变化。当我缩小时，它会变小，当我放大时，它会变大。我希望它的行为像地图上的标记一样。当我们缩放时，对象的大小不应该改变。我正在使用以下代码创建球体：

let sphereGeometry = new SphereGeometry(0.4, 10, 10);
let sphereMaterial = new MeshLambertMaterial({
            //shading: THREE.SmoothShading,
            color: 'red',
            depthTest: false,
            depthWrite: false
        }
let sphere = new Mesh(sphereGeometry, sphereMaterial );
sphere.position.copy(SomeVector3Object);
sphere.material.color = new Color("#ffffff");
sphere.visible = true
scene.add(sphere);

- Aakash Govardhane

Answer 1

在场景中，有几种方法可以让某些对象在缩放时保持相同的大小。这里包括的示例使用鼠标滚轮控制camera.position.z来实现缩放，但它们也可以适应其他方法。

一种方法是对需要保持其大小的任何对象进行缩放和移动，以抵消缩放效果。链接示例中的一个立方体被平移以保持一致的大小，而另一个则没有：

let scaleConstant = camera.position.z / 500;
mesh1.scale.x = scaleConstant;
mesh1.scale.y = scaleConstant;
mesh1.scale.z = scaleConstant;

let offsetConstant = camera.position.z * 150 / 500;
mesh1.position.x = offsetConstant;

另一种方法是叠加第二个three.js渲染器。如果与底部画布相关联的相机进行了缩放，而与叠加画布相关联的相机没有进行缩放，则第二个画布中的对象将保持其大小。此示例使用简单的CSS将一个渲染器放在另一个上方：

.container, canvas {
  position: absolute;
}

- aptriangle