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://www.stubbornhuang.com/

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

3D模型代下【淘宝店3D模型代下渠道】解密
3D模型代下[淘宝店3D模型代下渠道]解密
glb格式的3D模型怎么下载？gltf格式的3D模型怎么下载？
以后主流格式肯定是glb,gltf格式模型,但是之类素材少,但是客户又想要这个格式, 咱们使用百度搜索"glbxz.com",点击搜索结果"glb gltf官网" ...
threejs加载3D模型例子
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
threejs加载3D模型
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
Unity3D游戏开发初探—2.初步了解3D模型基础
一.什么是3D模型? 1.1 3D模型概述简而言之,3D模型就是三维的.立体的模型,D是英文Dimensions的缩写. 3D模型也可以说是用3Ds MAX建造的立体模型,包括各种建筑.人物.植被. ...
3D版DALL-E来了！谷歌发布文本3D生成模型DreamFusion，给一个文本提示就能生成3D模型！...
点击下方卡片,关注"CVer"公众号 AI/CV重磅干货,第一时间送达点击进入-> CV 微信技术交流群转载自:新智元 | 编辑:LRS [导读]给一个文本提示就能生成3 ...
什么是3D模型，什么是GLTF，又如何使用GLTF文件
glb,gltf模型(webvrmodel)-gltf模型下载定制,glb模型下载定制,三维项目电商网站在线三维展示,网页VR模型下载,三维模型下载,webgl网页模型下载VR模型网(www.webv ...
3D模型的加载与使用
http://www.hewebgl.com/article/getarticle/126 1.感谢词亲爱的朋友: 您们好.感谢您阅读WebGL中文网的初级课程,学习到本课,我们假设您已经学习 ...
Android OpenGLES2.0（十六）——3D模型贴图及光照处理（obj+mtl）
转自:http://blog.csdn.net/junzia/article/details/58272305 在Android OpenGLES2.0(十四)--Obj格式3D模型加载中实现了Obj ...

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

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

2 问题的解决

3 问题的发生

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

最新文章

热门文章