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);
});

我们增加了，

child.frustumCulled = false;

强制绘制模型的网格，通过这样的设置，上述的问题被成功修复。

3 问题的发生

既然我们可以通过第2节的手段成功解决了模型部分或者全部不可见的问题，那么基本上判断出就是因为模型不在摄像头的视椎体中，所以才会出现上述问题，而出现这个问题的原因可能有：

  • 美工（建模师、动画师等）在制作和导出模型时出现了问题，导致模型的实际中心点和包围盒出现了错误，变得很小，可能只有0.000几这样的情况；
  • 如果模型有透明贴图的情况下可能会出现这个问题；

参考链接

https://blog.csdn.net/eevee_1/article/details/118632392