如何修复Three.js中PerspectiveCamera缩放时模型消失的问题？

针对你遇到的问题，以下是具体的修复方案，结合你的代码逐一调整：

1. 调整相机视锥体的远平面（far值） #

你的PerspectiveCamera当前far值设为1000，当相机拉远超过这个距离后，模型会超出视锥体范围从而消失。可以增大far值扩展可视范围：

// 修改相机初始化代码，将far从1000调整为更大的值，比如5000
camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 5000);

2. 限制OrbitControls的最大拉远距离 #

如果不对相机拉远距离做限制，即使调大far值，用户仍可能把相机拉到超出范围的位置。给OrbitControls添加maxDistance限制，与调整后的far值匹配：

function controller() {
    var controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 1, 0);

    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;
    controls.minAzimuthAngle = -0.6;
    controls.maxAzimuthAngle = 1.5;
    controls.minPolarAngle = controls.maxPolarAngle = 1.57079;
    // 添加此行，限制相机最远拉到4000的位置（小于far值5000）
    controls.maxDistance = 4000;
}

3. 启用OrbitControls的阻尼更新 #

你开启了enableDamping，但animate函数里未调用controls.update()，这会导致交互异常，间接影响缩放体验。修改animate函数，并将controls提升为全局变量：

// 全局变量区域添加controls
var scene, camera, renderer, obj, newMaterial, controls;

function animate() {
    requestAnimationFrame(animate);
    // 启用阻尼后必须每帧更新控制器
    controls.update();
    renderer.render(scene, camera);
}

// 修改controller函数，移除var声明
function controller() {
    controls = new OrbitControls(camera, renderer.domElement);
    // ... 其他代码不变
}

4. 移除不必要的相机添加操作 #

你在init末尾将camera添加到了scene中，这是错误操作——相机是场景的观察视角，不需要作为场景对象添加，删除此行：

// 删掉这行代码
scene.add(camera);

5. 确认模型视锥体剔除已关闭 #

你已在代码中设置object.frustumCulled = false，这一步能避免模型因边界计算问题被误剔除，保持该代码即可。

完成以上调整后，缩放（拉远相机）时模型就不会轻易消失，同时PerspectiveCamera的透视效果也能正常保留。

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