Three.js使用camera-controls左键拖拽轨道控制时glTF模型消失问题求助

问题根因 #

你遇到的模型消失问题核心是操作映射不匹配：camera-controls 默认鼠标左键绑定的是平移操作，而非你预期的视角旋转，正交相机下平移后模型移出了视锥体可见范围就会消失，缩放功能不涉及相机位置平移因此不受影响。

解决方案 #

按照以下步骤修改代码即可解决：

1. 调整控制器鼠标操作映射，匹配常规轨道控制器的使用习惯
2. 模型加载完成后将控制器瞄准目标设置为模型中心，避免操作时视角跑飞
3. 修正控制器更新逻辑的位置，保证每一帧都正常更新

需要修改的代码片段

首先修改控制器初始化配置：

controls = new cameraControls( camera, renderer.domElement );

controls.minZoom = 1;
controls.maxZoom = 5;
// 新增：调整鼠标按键映射，左键旋转、右键平移
controls.mouseButtons.left = cameraControls.ACTION.ROTATE;
controls.mouseButtons.right = cameraControls.ACTION.TRUCK;
// 可选：如果不需要平移操作可以直接禁用右键
// controls.mouseButtons.right = cameraControls.ACTION.NONE;

然后修改GLTF加载回调，绑定控制器目标到模型中心：

loader.load("../models/EGLISE.glb", function(gltf) {
    obj = gltf.scene
    scene.add(obj);
    // 新增：计算模型包围盒，设置控制器瞄准点为模型中心
    const box = new THREE.Box3().setFromObject(obj);
    box.getCenter(controls.target);
}, undefined, function(error){
    console.error(error);
});

最后修正动画循环的逻辑：

const animate = function () {
    if(obj){
        obj.rotation.y += 0.001;
    }
    // 把controls.update()移到obj判断外，保证每一帧都更新控制器
    controls.update();
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
};

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