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

这篇具有很好参考价值的文章主要介绍了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几这样的情况;
  • 如果模型有透明贴图的情况下可能会出现这个问题;

如果感兴趣可以访问我的个人网站:https://www.stubbornhuang.com/文章来源地址https://www.toymoban.com/news/detail-403340.html

到了这里,关于ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • unity实现简单的摄像机震动效果(包括普通摄像机和虚拟摄像机)

    用代码实现摄像机简单的震动效果

    2024年02月12日
    浏览(44)
  • Unity【角色/摄像机移动控制】【3.摄像机跟随角色】

    本章代码基于前两章。 1. 我们新建CameraController脚本,将其挂载到Camera上 2. 在角色Player下新建一个空物体,命名为cameraTargetPoint,并将该物体挂载至CameraController脚本中【注意代码中的这行:public Transform cameraTargetPoint;】,将该空物体放在人物头部附近位置 3.将PlayerController脚本

    2024年02月22日
    浏览(52)
  • 【Unity 摄像机组件】Camera场景摄像机的认识

    OK 同学们好,本节课我们开始学习摄像机创建以及摄像机的属性。 CH3.3 PPT02 摄像机相机是玩家用来观看游戏场景世界的基本设备,当游戏运行的时候,游戏画面就是摄像机看到的画面。 PPT 3一个场景中可以有无数个摄像机,最终游戏运行的画面可能是很多个摄像机拼凑而成。

    2024年02月02日
    浏览(55)
  • 【UE4】 通过按钮点击实现摄像机的切换 并通过鼠标控制新摄像机的旋转

    首先创建了4个Actor蓝图类 每个蓝图类内只拥有一个摄像机组件 将每个actor蓝图类摆放到场景的合适位置 在关卡蓝图中创建自定义事件,当该事件触发时切换摄像机 创建一个控件蓝图,在控件蓝图中创建如下5个按钮,并创建点击事件。按钮分别表示车上的4个镜头和车外自由

    2023年04月09日
    浏览(59)
  • 【UE Sequencer系列】08-副镜头切换、摄像机绑定摇臂的使用、摄像机绑定滑轨的使用

    目录 一、副镜头切换  二、摄像机绑定摇臂的使用  三、摄像机绑定滑轨的使用 1. 为“shot_05”新建镜头(复制资产,创建新的关卡序列)  同样的步骤再创建一个“Shot_07_02”  此时我们就可以对“Shot_07”中的两个副镜头进行切换,通过如下操作实现副镜头切换: (“Sho

    2024年02月07日
    浏览(44)
  • Unity 摄像机

    摄像机分为两种  (1)透视摄像机 (2) 正交摄像机  一般3D游戏使用的透视多一点,2D游戏使用正交多一点。 相机参数 清除标记: (1)天空盒 (2)仅深度,类似于权重,优先级,深度大的覆盖住深度小的视线 例如 主相机显示的却不是当先视线,而是新相机的视线 ,主

    2023年04月21日
    浏览(47)
  • 海康摄像机配置流程

    海康摄像机配置流程 文档所用摄像机型号: DS-2CD2245XM-LGLSET 1、先接通摄像机电源,连上网线 2、在 设备网络搜索 客户端中搜索并激活设备 (1)下载 设备网络搜索 ​ 设备网络搜索工具下载地址 (2)没有激活的设备显示未激活状态,此时记下所显示的IP地址 ​ (3)在谷歌

    2024年02月02日
    浏览(66)
  • 打架识别摄像机

    随着社会治安问题的增加,打架事件在公共场所频繁发生,给社会治安带来了一定程度的威胁。因此,为了提高公共场所的安全性,可以利用现代科技,如人工智能和摄像技术,开发一种打架识别摄像机。 这种摄像机可以通过人工智能算法对视频进行实时监测,当监测到有两

    2024年01月25日
    浏览(42)
  • Unity摄像机跟随

    将摄像机直接拖拽到被跟随的目标下面即可,这样摄像机永远在目标的后面 缺点: 屏幕旋转太平滑了 目标物体在屏幕上的位置永远不变 目标物体被销毁时总不能把摄像机也销毁了吧 先相机坐标和物体坐标做差,求得偏移量,在之后的每一帧里,将偏移量加上物体的坐标。

    2024年02月21日
    浏览(54)
  • OpenCV之摄像机标定

    最近方向定下来是双目立体视觉,主要是做重建这块的研究。大致过程是图像获取-摄像机标定-特征提取-匹配-三维重建,当然开始可以进行图像预处理,矫正,后期可以进行点云的进一步处理,如渲染表面使其更接近于现实物体。 图像获取相对来说比较简单,用相机拍摄目

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包