ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 3D模型在场景中部分或者全部不可见的问题描述

最近使用three.js在场景中显示gltf模型时候，当我使用THREE.OrbitControls操作摄像机想近距离观察gltf模型的时候发现一部分模型消失了，比如说假如这个模型是一匹马，当我远距离观察时可以完整的看到整匹马，但是当我想拉近摄像头近距离观察马的时候，这个时候我只能看到马的头，马的身子和脚的部分突然就消失了。

我马上意识到是摄像机的视椎体出现了问题，但是我的视椎体设置的很大，如下

camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);

肯定可以把这个模型完整的包含在视椎体里面，不可能会出现上述的奇怪问题。

2 问题的解决

对于上述问题，我尝试更改我的摄像机参数来调整视椎体，但是不管我如何调整参数上述问题依然存在，所以我不得不重新翻看three.js的文档，无意中在THREE.Object3D的文档中看到了以下的描述：

.frustumCulled : Boolean
When this is set, it checks every frame if the object is in the frustum of the camera before rendering the object. If set to false the object gets rendered every frame even if it is not in the frustum of the camera. Default is true.

文档地址为：https://threejs.org/docs/index.html#api/zh/core/Object3D

上述文档的意思是：

设置此选项后，在渲染对象之前，它会检查每个帧中的对象是否位于相机的平截头体中。如果设置为false，则即使对象不在相机的视锥中，也会在每一帧渲染该对象。默认值为true。

就是说three.js默认会检查渲染对象是否处于摄像机的视椎体中，如果对象不在视椎体中则不渲染，但是如果我们设置为false，则不管渲染对象是否处于摄像机的视椎体中，都会渲染该对象，而这个是THREE.Object3D的公共属性，也就是说适用于模型和模型中的网格。所以我们更改了我们加载模型的代码，如下

new THREE.GLTFLoader().load('./horse.glb', result => {
    var model = result.scene || result.scenes[0];
    model.position.set(0,0,0);

    model.traverse(child => {
        if ( child.isMesh ) {

            child.frustumCulled = false;
        }
    });
    scene.add(model);
});