网站常用模块网站建设氺金手指排名12

网站常用模块,网站建设氺金手指排名12,高端网站教建设,宁波seo基础优化平台Three.js Raycaster#xff08;射线投射器#xff09;鼠标点击选中模型笔记 一、Raycaster 简介 Raycaster#xff08;射线投射器#xff09;是Three.js中用于实现**鼠标拾取#xff08;3D对象选择#xff09;**的核心类。它通过从相机位置发射一条射线#xff0c;检测与…Three.js Raycaster射线投射器鼠标点击选中模型笔记一、Raycaster 简介Raycaster射线投射器是Three.js中用于实现**鼠标拾取3D对象选择**的核心类。它通过从相机位置发射一条射线检测与哪些3D对象相交从而实现点击选中功能。二、实现步骤详解1. 监听点击事件addEventListener(click,(e){// 获取鼠标在浏览器窗口中的像素坐标constpxe.offsetX;// 鼠标X坐标constpye.offsetY;// 鼠标Y坐标});2. 坐标转换关键步骤将屏幕像素坐标转换为Three.js的归一化设备坐标NDCNDC范围X轴[-1, 1]Y轴[-1, 1]原点在屏幕中心屏幕坐标范围X轴[0, window.innerWidth]Y轴[0, window.innerHeight]原点在左上角constx(px/window.innerWidth)*2-1;// 转换到[-1, 1]consty-(py/window.innerHeight)*21;// 转换到[-1, 1]Y轴需要取反3. 创建并设置Raycaster// 创建射线投射器constraycasternewTHREE.Raycaster();// 设置射线的起点和方向// setFromCamera()方法从相机位置发射射线方向指向鼠标点击的3D空间点raycaster.setFromCamera(newTHREE.Vector2(x,y),camera);4. 检测相交物体// intersectObjects()方法检测射线与哪些物体相交// 参数要检测的物体数组constintersectsraycaster.intersectObjects([cube,cube2,cube3]);// intersects返回一个数组包含所有相交的物体信息按距离从近到远排序5. 处理选中结果if(intersects.length0){// 获取第一个最近相交的物体constselectedObjectintersects[0].object;// 修改物体材质颜色selectedObject.material.color.set(Math.random()*0xffffff);}console.log(intersects);// 查看详细的相交信息三、intersects 对象详解intersects数组中的每个元素包含以下属性{distance:距离相机的距离,point:相交点的3D坐标(Vector3),face:相交的面(Face3),faceIndex:面的索引,object:相交的3D对象,uv:纹理坐标}四、完整代码流程事件监听→ 监听鼠标点击事件坐标获取→ 获取鼠标在屏幕上的像素位置坐标转换→ 像素坐标 → 归一化设备坐标NDC射线创建→ 实例化Raycaster射线设置→ 从相机向鼠标点击的3D方向发射射线相交检测→ 检测射线与指定物体的交点结果处理→ 处理选中的物体如改变颜色五、注意事项坐标转换Y轴需要取反因为屏幕坐标原点在左上角而Three.js坐标原点在中心性能优化如果场景中有大量物体应避免检测所有物体可以分组检测使用BVH包围盒层次结构加速多物体选择intersects数组包含所有相交物体可以支持多选功能相机类型适用于PerspectiveCamera透视相机和OrthographicCamera正交相机六、实际应用场景3D编辑器中的对象选择游戏中的物品拾取交互式3D可视化VR/AR中的手势选择七、示例代码片段// 简化的Raycaster使用示例functiononMouseClick(event){// 1. 获取鼠标位置constmousenewTHREE.Vector2();mouse.x(event.clientX/window.innerWidth)*2-1;mouse.y-(event.clientY/window.innerHeight)*21;// 2. 创建射线constraycasternewTHREE.Raycaster();raycaster.setFromCamera(mouse,camera);// 3. 检测相交constintersectsraycaster.intersectObjects(scene.children);// 4. 处理结果if(intersects.length0){constselectedObjectintersects[0].object;// 执行选中操作...}}templatedivclasscontainerrefcontainerRef/div/templatescript setupimport{onMounted,ref}fromvue;import*asTHREEfromthree;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls;constcontainerRefref(null);// 创建3D场景对象SceneconstscenenewTHREE.Scene();// 实例化一个透视投影相机对象constcameranewTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);// 实例化一个WebGL渲染器constrenderernewTHREE.WebGLRenderer({antialias:true});//设置Canvas画布尺寸.setSize()renderer.setSize(window.innerWidth,window.innerHeight);//创建一个长方体几何对象GeometryconstgeometrynewTHREE.BoxGeometry(0.5,0.5,0.5);//材质MaterialconstmaterialnewTHREE.MeshLambertMaterial({color:0x0000ff,//设置材质颜色});//物体网格模型MeshconstcubenewTHREE.Mesh(geometry,material);//设置网格模型在三维空间中的位置坐标默认是坐标原点cube.position.set(0,0,0);//在threejs中你创建了一个表示物体的虚拟对象Mesh需要通过.add()方法把网格模型mesh添加到三维场景scene中。scene.add(cube);//再创建两个立方体constgeometry2newTHREE.BoxGeometry(0.5,0.5,0.5);constmaterial2newTHREE.MeshLambertMaterial({color:0x00ff00,});constcube2newTHREE.Mesh(geometry2,material2);cube2.position.set(0.5,0.5,0.5);scene.add(cube2);constgeometry3newTHREE.BoxGeometry(0.5,0.5,0.5);constmaterial3newTHREE.MeshLambertMaterial({color:0xff0000,});constcube3newTHREE.Mesh(geometry3,material3);cube3.position.set(0.5,-0.5,-0.5);scene.add(cube3);//环境光constAmbientLightnewTHREE.AmbientLight(0xffffff,0.4)// 创建环境光scene.add(AmbientLight)// 将环境光添加到场景//Directional LightconstdirectionalLightnewTHREE.DirectionalLight(0xffffff,0.8);// 设置光源的方向通过光源position属性和目标指向对象的position属性计算directionalLight.position.set(100,75,30);// 方向光指向对象网格模型mesh可以不设置默认的位置是0,0,0scene.add(directionalLight);//相机在Three.js三维坐标系中的位置camera.position.set(0,0,2);camera.lookAt(0,0,2);constaxesHelpernewTHREE.AxesHelper(150);scene.add(axesHelper);functionanimate(){requestAnimationFrame(animate);//.x是围绕X转cube.rotation.x0.01;//.y是围绕X转cube.rotation.y0.01;renderer.render(scene,camera);}animate();addEventListener(click,(e){// 获取鼠标位置constpxe.offsetXconstpye.offsetY// 转换坐标 归一化设备坐标NDCconstx(px/window.innerWidth)*2-1consty-(py/window.innerHeight)*21// 创建射线投射器 RaycasterconstraycasternewTHREE.Raycaster()// 设置射线投射位置和方向raycaster.setFromCamera(newTHREE.Vector2(x,y),camera)// 获取射线选中的物体constintersectsraycaster.intersectObjects([cube,cube2,cube3])if(intersects.length0){// 改变颜色intersects[0].object.material.color.set(Math.random()*0xffffff)}console.log(intersects)});// 挂载完毕 获取domonMounted((){// 相机控间constcontrosnewOrbitControls(camera,containerRef.value);contros.enableDampingtrue;containerRef.value.appendChild(renderer.domElement);});/script