three.js第四十七用 合并之后的物体的CPU单独拾取

threejs交流群511163089 

merge这个功能,做优化的都知道merge了会提升性能,减少drawcall。

instance或者merge都合并了物体,物体合在一起了怎么选择单独的物体呐?。?

其实raycaster点的本就不是你的物体,只是测试的与包围盒是否相交,那么你只需要保留之前的包围盒,直接用raycaster来进行与这些包围盒的相交测试就可以点到单个物体了。

为了简单,你的高亮效果,也不必是要让那个物体闪闪亮,可以让选中的包围盒显示出来不是吗?

为了效果,那么就可能需要麻烦的手段了。

可以把原来的单个物体的信息全部保留,点到了构造一个mesh显示在那,样式随你定。

也可以给物体加个attribute,在shader中增加一个ID,你点中的包围盒带着ID用uniform传入,高亮效果也随你定。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
当使用Three.js加载和渲染GLB文件时,拾取(picking)是指通过鼠标点击或触摸屏幕来选择和交互3D场景中的对象。下面是一个使用Three.js进行GLB拾取的完整代码示例: ```javascript // 导入Three.js库 import * as THREE from 'three'; // 创建场景、相机和渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加光源 const light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 0, 5); scene.add(light); // 加载GLB模型 const loader = new THREE.GLTFLoader(); loader.load('model.glb', function (gltf) { scene.add(gltf.scene); }, undefined, function (error) { console.error(error); }); // 创建射线投射器 const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); // 监听鼠标点击事件 function onMouseClick(event) { // 计算鼠标点击位置的归一化设备坐标 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 更新射线投射器的起点和方向 raycaster.setFromCamera(mouse, camera); // 计算射线与场景中的对象的交叉点 const intersects = raycaster.intersectObjects(scene.children, true); // 如果有交叉点,则输出被点击的对象 if (intersects.length > 0) { console.log('Clicked object:', intersects[0].object); } } // 监听鼠标点击事件 window.addEventListener('click', onMouseClick, false); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 这段代码首先创建了一个Three.js场景、相机和渲染器。然后,通过GLTFLoader加载GLB模型,并将其添加到场景中。接下来,创建了一个射线投射器,并监听鼠标点击事件。当鼠标点击时,计算鼠标点击位置的归一化设备坐标,并更新射线投射器的起点和方向。然后,使用射线投射器计算射线与场景中的对象的交叉点,并输出被点击的对象。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值