Three.js实现深度拾取功能

threejs自带的接口实现坐标拾取一般使用射线法,该方法属于几何计算,通过使用Ray创建射线与geometry通过某个加速结构(bvh或者kdTree),最终与确定的一个三角形进行相交测试
这种方法有如下优点:

  • 计算结果精确,由于属于几何计算,射线拾取的精度非常高
  • 返回的信息详细,不仅可以计算当前拾取点的坐标,也可以返回当前三角形所属于的mesh,当前点的uv等…
  • 。。。。。
    同样精度高带来的另一个问题便是性能消耗大,如果遇到稍微复杂的场景,整个计算过程将十分耗时,鼠标移动过程中的坐标拾取更是无法做到,同时,由于射线拾取依赖于几何数据,因此geometry的buffer数据需要常驻内存,这更会带来严重的性能问题。
    针对坐标拾取这种常规功能,很多时候并不需要像射线拾取那样返回过多的信息,只需要计算坐标即可,因此,我们可以通过计算深度反酸世界坐标,主要方法如下,将NDC坐标转换到世界坐标

image.png
主要步骤如下:

  1. 由于是深度坐标拾取第一步先计算深度,关键代码如下
        let currentRenderTarget = pickRenderer.getRenderTarget();
        pickRenderer.getClearColor(oldClearColor);
        let oldClearAlpha = pickRenderer.getClearAlpha();
        let oldAutoAClear = pickRenderer.autoClear;
        let oldSceneEnv = scene.environment;
        let oldBackground = scene.background;
        pickRenderer.autoClear = false;
        pickRenderer.setClearColor(0x000000, 1);
        scene.environment = undefined;
        scene.background = undefined;
        //在深度材质下渲染一遍
        scene.overrideMaterial = this.depthMaterial;

        scene.frameState.passes.pick = true;
        scene.executeUpdate()<
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Three.js是一个用于创建和展示3D图形的JavaScript库。它提供了丰富的功能和工具,可以帮助开发者实现虚拟宇宙系统的功能性需求。以下是一些可能的功能性需求和Three.js的相关特性: 1. 创建和渲染3D场景:Three.js提供了创建和渲染3D场景所需的基本组件,如场景(Scene)、相机(Camera)、渲染器(Renderer)等。开发者可以使用这些组件来构建虚拟宇宙的场景。 2. 导入和展示3D模型:Three.js支持导入各种格式的3D模型,如OBJ、FBX、GLTF等。开发者可以使用Three.js加载和展示虚拟宇宙中的各种物体和角色模型。 3. 实现交互和控制:Three.js提供了丰富的交互和控制功能,如鼠标交互、触摸交互、键盘控制等。开发者可以使用这些功能实现用户与虚拟宇宙的交互和控制。 4. 实现动画和特效:Three.js支持各种动画和特效效果,如平移、旋转、缩放、淡入淡出等。开发者可以使用这些特性来实现虚拟宇宙中的动态效果和特效。 5. 实现光照和阴影效果:Three.js提供了多种光照和阴影效果的实现方式,如平行光、点光源、聚光灯等。开发者可以使用这些功能来增强虚拟宇宙的真实感和逼真度。 6. 实现碰撞检测和物理模拟:Three.js支持碰撞检测和物理模拟的功能,开发者可以使用这些功能实现虚拟宇宙中的物体之间的碰撞、重力等物理效果。 7. 实现音频和音效:Three.js提供了音频和音效的支持,开发者可以使用这些功能来为虚拟宇宙添加背景音乐、音效等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值