1 3D模型在場景中部分或者全部不可見的問題描述

最近使用three.js在場景中顯示gltf模型時候，當我使用THREE.OrbitControls操作攝像機想近距離觀察gltf模型的時候發(fā)現(xiàn)一部分模型消失了，比如說假如這個模型是一匹馬，當我遠距離觀察時可以完整的看到整匹馬，但是當我想拉近攝像頭近距離觀察馬的時候，這個時候我只能看到馬的頭，馬的身子和腳的部分突然就消失了。

我馬上意識到是攝像機的視椎體出現(xiàn)了問題，但是我的視椎體設置的很大，如下

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

肯定可以把這個模型完整的包含在視椎體里面，不可能會出現(xiàn)上述的奇怪問題。

2 問題的解決

對于上述問題，我嘗試更改我的攝像機參數(shù)來調(diào)整視椎體，但是不管我如何調(diào)整參數(shù)上述問題依然存在，所以我不得不重新翻看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的公共屬性，也就是說適用于模型和模型中的網(wǎng)格。所以我們更改了我們加載模型的代碼，如下

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;

強制繪制模型的網(wǎng)格，通過這樣的設置，上述的問題被成功修復。

3 問題的發(fā)生

既然我們可以通過第2節(jié)的手段成功解決了模型部分或者全部不可見的問題，那么基本上判斷出就是因為模型不在攝像頭的視椎體中，所以才會出現(xiàn)上述問題，而出現(xiàn)這個問題的原因可能有：

• 美工（建模師、動畫師等）在制作和導出模型時出現(xiàn)了問題，導致模型的實際中心點和包圍盒出現(xiàn)了錯誤，變得很小，可能只有0.000幾這樣的情況；
• 如果模型有透明貼圖的情況下可能會出現(xiàn)這個問題；

如果感興趣可以訪問我的個人網(wǎng)站：https://www.stubbornhuang.com/文章來源地址http://www.zghlxwxcb.cn/news/detail-403340.html

到了這里，關于ThreeJS - 修復攝像機近距離模型或者攝像機在某些觀察角度3D模型部分或者全部不可見的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！