Three.js中组内立方体相邻显示异常及相关技术疑问

问题1：立方体位置不生效的根源与解决方法 #

你遇到的核心问题是直接替换了Mesh的position对象，而非修改已有position对象的属性。

在Three.js中，Mesh.position本身就是一个THREE.Vector3实例，如果你直接用cube1.position = new THREE.Vector3(1, 0, 0)赋值，相当于把原来的position对象替换成了新的——但Group内部是监听原有position对象的变化来更新子对象变换的，新的position不会被Group识别，所以两个立方体都停留在默认的原点位置。

解决方法很简单，不要替换position对象，改用以下两种方式修改：

• 使用Vector3.set()方法：

cube1.position.set(1, 0, 0);
cube2.position.set(0, 1, 0);

• 直接修改x/y/z属性：

cube1.position.x = 1;
cube2.position.y = 1;

这样修改后，Group就能正确感知子对象的位置变化，两个立方体就会按你设置的位置渲染了。

问题2：Group的作用与你的需求匹配度 #

完全没错！THREE.Group就是专门用来将多个网格（或其他3D对象）组合成单个逻辑单元的。

当你把多个立方体添加到Group后，对Group执行的任何变换（旋转、平移、缩放）都会作用于所有子对象。比如你想让两个相邻立方体绕共同中心轴旋转，只需要在动画循环中对Group调用cubeGroup.rotation.y += 0.01，两个立方体就会一起同步旋转，完全契合你的需求。

如果需要调整整个组合的旋转中心，你可以：

• 调整子对象的位置，让它们的几何中心对齐到Group的原点；
• 或者使用空对象作为 pivot（比如创建一个THREE.Object3D作为支点，把Group挂在这个支点下，调整支点位置来改变旋转中心）。

问题3：CubeGeometry尺寸与Mesh缩放的区别 #

CubeGeometry(width, height, depth)的参数是直接定义几何体的原始尺寸，相当于在创建时就拉伸了顶点数据；而Mesh.scale是对整个Mesh应用变换矩阵，属于渲染时的缩放——二者视觉效果类似，但有本质区别：

• 性能与复用性：如果多个Mesh共享同一个CubeGeometry，修改几何体尺寸会影响所有使用它的Mesh；而修改单个Mesh的scale只会影响自身，且不会修改顶点数据，性能更优。
• 数据影响：几何体尺寸修改会改变顶点的实际坐标，会影响碰撞检测、法线计算（若手动修改后未重新计算法线）；而Mesh的scale是变换，不修改顶点数据，法线会自动根据变换矩阵调整。
• 一致性：视觉上，CubeGeometry(2,1,1)和Mesh.scale.set(2,1,1)（用原始1x1x1几何体）看起来完全一样，但底层实现不同。如果只是需要视觉缩放，推荐用Mesh的scale属性；如果需要固定几何体尺寸（比如用于物理模拟），则直接定义CubeGeometry的参数更合适。

内容的提问来源于stack exchange，提问作者Conic