ThreeJS设置position后Mesh消失且控制台调整位置无响应问题求助

问题原因 #

1. 错误覆盖了立方体几何体的顶点属性
   THREE.BoxGeometry初始化时会自动生成构成立方体所需的36个顶点（对应12个三角面），你手动调用geom.setAttribute('position')用仅包含1个(0,0,0)坐标的数组替换了原有完整顶点数据，此时几何体已经没有足够的顶点构成可渲染的面，自然无法显示出立方体。你所说的“不设置几何体position属性时可正常显示”，就是因为没有执行这行错误的覆盖代码，立方体顶点是完整可用的。

2. 几何体包围信息未更新导致视锥体剔除异常
   Three.js默认开启网格的视锥体剔除功能，会根据几何体的包围盒、包围球和网格的世界位置，判断对象是否在相机视口范围内，不在范围内就直接跳过渲染。你修改顶点属性后没有更新几何体的包围信息，旧的包围数据和实际顶点位置不匹配，会导致Three.js错误判定网格不在视口内，此时就算修改mesh.position也不会有任何效果，因为网格早就被跳过渲染了。

3. 材质类型和渲染对象不匹配
   就算你保留单个顶点的设置，MeshPhongMaterial是用于渲染三角面的材质，无法渲染单个顶点，如果你需要渲染点，需要使用THREE.PointsMaterial配合THREE.Points实例而非THREE.Mesh。

解决方法 #

如果你的需求是正常渲染可移动的立方体，直接删掉手动设置position属性的代码即可：

// 移除以下三行代码即可
// var vertices = [];
// vertices.push( 0, 0, 0 );           
// geom.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 )) ;

如果你的需求是自定义几何体顶点，需要保证顶点数量足够构成你需要的图形，同时修改完顶点属性后手动更新几何体的包围信息：

// 自定义顶点后补充以下逻辑
geom.computeBoundingBox();
geom.computeBoundingSphere();

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