Three.js+React项目添加网格后OBJ模型被裁切的原因咨询

嘿，我来帮你捋捋这个问题——你遇到的OBJ模型被裁切只剩纽扣的情况，其实大概率和相机的视锥体（Frustum）设置或者物体的位置/相机视角有关，咱们一步步来排查：

可能的原因&排查步骤 #

1. 相机视锥体参数不合理 #

这是最常见的裁切问题诱因。如果你使用的是PerspectiveCamera，它的near（近裁剪面）和far（远裁剪面）参数直接决定了相机能看到的范围：

• 如果near值设置得太大，距离相机小于该值的物体部分会被直接裁切
• 如果far值太小，距离相机超过该值的物体部分也会被裁切

你可以检查相机初始化代码，确保参数设置合理，比如：

const camera = new THREE.PerspectiveCamera(
  75, // 视角FOV
  window.innerWidth / window.innerHeight, // 画布宽高比
  0.1, // 近裁剪面，尽量设置小一点
  1000 // 远裁剪面，尽量设置大一点
);

另外，如果窗口大小变化时你没有更新相机的aspect和投影矩阵，也会导致裁切问题，记得在resize回调里补充：

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

2. 立方体的位置遮挡/影响相机视角 #

你创建的立方体默认位置是(0,0,0)，而OBJ模型被设置在y=-2.0的位置。如果你的相机默认看向(0,0,0)，那OBJ模型可能大部分处于相机的可视范围之外，或者立方体刚好挡住了相机的核心视线？

可以先把立方体移到侧边测试，修改createPlane函数：

createPlane = (scene) => {
  const planeGeometry = new THREE.BoxGeometry(1, 1, 1);
  const planeMaterial = new THREE.MeshBasicMaterial({color: '#E8E8E8', side: THREE.DoubleSide});
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.frustumCulled = false;
  plane.scale.set(1, 1, 1);
  // 把立方体移到X轴正方向，避开OBJ模型的位置
  plane.position.x = 5;
  scene.add(plane);
  this.setState({plane});
}

同时也可以尝试调整OBJ模型的位置，比如把object.position.y = -2.0改成object.position.y = 0，看看是否能完整显示模型。

3. React setState异步操作的潜在问题 #

你当前在setState的回调里才把物体添加到场景，虽然能运行，但React的setState是异步操作，可能会导致物体状态更新不及时，间接引发显示异常。更规范的做法是先创建好物体、添加到场景，再更新组件状态：

loadObj = (scene) => {
  const textureLoader = new THREE.TextureLoader();
  textureLoader.load('models/jeans2_tex.png', (tex) => {
    tex.wrapS = THREE.RepeatWrapping;
    tex.wrapT = THREE.RepeatWrapping;
    new OBJLoader().load('models/Jeans2_blue.OBJ', (object) => {
      const new_mat = new THREE.MeshStandardMaterial({map: tex, metalness: 0.1, roughness: 0.9});
      object.position.y = -2.0;
      object.frustumCulled = false;
      object.children.forEach(child => {
        child.material = new_mat;
      });
      // 先添加到场景，再更新组件状态
      scene.add(object);
      this.setState({object});
    }, 
    (xhr) => console.log((xhr.loaded / xhr.total * 100) + '% loaded'),
    (error) => console.log('An error happened')
    );
  });
}

4. 辅助排查工具：OrbitControls #

添加OrbitControls可以让你自由拖动相机视角，方便快速确认模型是否在相机可视范围内：

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 初始化相机和渲染器后添加：
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 开启阻尼，让拖动更平滑

// 在渲染循环里更新controls：
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

拖动相机试试，看看能不能找到完整显示OBJ模型的视角。

问题截图 #

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