THREE.js带纹理旋转平面90度时消失如何解决？

问题原因&修复方案 #

• 几何体类型使用错误
  你当前调用的THREE.BoxGeometry是立方几何体，仅传入宽高两个参数时，默认深度为1，最终生成的是一个厚度仅为1的薄立方体。如果要做平面网格，替换为专门的平面几何体THREE.PlaneGeometry(20, 20)即可。
• 旋转参数未实际应用
  你代码中计算的弧度值radian没有赋值给网格的旋转属性，如果要绕X轴旋转90度作为地面，需要补充mesh.rotation.x = radian;的赋值逻辑。你提到的接近90度时消失，大概率是旋转轴错误，导致薄立方体的侧面正对相机，厚度1的面视觉上几乎不可见，或是平面被旋转到了相机视锥体的裁剪范围外。
• 额外排查项
  • 确认相机近裁面near参数不要设置过大，通常设为0.1即可，避免平面离相机过近时被裁剪
  • 确认平面旋转后没有超出相机远裁面far的范围
  • 你代码中加载的colorMap没有传入材质参数内，需要补充map: colorMap才能正常显示纹理

修复后参考代码 #

var colorMap = new THREE.TextureLoader().load('/textures/wood_albedo.png');

var radian = 2 * Math.PI * (90 / 360);
// 替换为平面几何体
var geometry = new THREE.PlaneGeometry(20, 20);

var material = new THREE.MeshStandardMaterial({color: 'white', side: THREE.DoubleSide, map: colorMap});

var mesh = new THREE.Mesh(geometry, material);
// 应用旋转参数
mesh.rotation.x = radian;

scene.add(mesh);

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