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);
});
我们增加了,
child.frustumCulled = false;
强制绘制模型的网格,通过这样的设置,上述的问题被成功修复。
3 问题的发生
既然我们可以通过第2节的手段成功解决了模型部分或者全部不可见的问题,那么基本上判断出就是因为模型不在摄像头的视椎体中,所以才会出现上述问题,而出现这个问题的原因可能有:
- 美工(建模师、动画师等)在制作和导出模型时出现了问题,导致模型的实际中心点和包围盒出现了错误,变得很小,可能只有0.000几这样的情况;
- 如果模型有透明贴图的情况下可能会出现这个问题;
参考链接
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:ThreeJS – 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题
原文链接:https://www.stubbornhuang.com/2364/
发布于:2022年09月24日 16:39:13
修改于:2023年06月21日 18:01:32
当前分类随机文章推荐
- ThreeJS - 获取当前使用的three.js的版本 阅读811次,点赞0次
- ThreeJS - 使用自定义Shader 阅读1031次,点赞2次
- ThreeJS - 动态更换fbx模型的某个子Mesh现有的纹理贴图为指定的纹理贴图 阅读3199次,点赞1次
- ThreeJS - 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度 阅读1378次,点赞1次
- ThreeJS - 使用Hdr环境贴图作为间接光照对模型进行渲染 阅读2539次,点赞3次
- ThreeJS - 如何提升three.js的渲染效果?看完这篇你可能会有启发 阅读5517次,点赞1次
- ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题 阅读1161次,点赞1次
- ThreeJS - 直接设置Fbx模型的某个关节的位移和旋转值 阅读1998次,点赞0次
- ThreeJS - three.moudle.js报Uncaught SyntaxError:Unexpected token ‘export‘错误 阅读2164次,点赞0次
- ThreeJS - 设置透明背景模仿L2Dwidget.js看板娘渲染效果 阅读966次,点赞0次
全站随机文章推荐
- 宝塔面板部署风铃发卡系统小白教程 阅读773次,点赞1次
- 工具网站推荐 - 欧拉角四元数在线可视化转化网站/三维在线旋转变换网站 阅读12826次,点赞6次
- 资源分享 - Ray Tracing - A Tool for All 英文高清PDF下载 阅读2051次,点赞0次
- 资源分享 - OpenGL Shading Language (Third Edition) OpenGL橙宝书 英文高清PDF下载 阅读2439次,点赞0次
- 工具网站推荐 - 几个glTF模型在线预览网站 阅读2047次,点赞0次
- 资源分享 - Game Programming Gems 4 英文高清PDF下载 阅读2619次,点赞1次
- 资源分享 - Game Engine Architecture (Third Edition)英文高清PDF下载 阅读7364次,点赞1次
- 资源分享 - Mathematics for Computer Graphics , Third Edition 英文高清PDF下载 阅读1591次,点赞0次
- C++ - 使用Spout2将视频流发送到OBS 阅读216次,点赞0次
- WordPress - 获取每年发表的文章数量 阅读486次,点赞0次
评论
169