Three.js 入门(光线投射实现3d场景交互变乱）

本篇主要学习内容 :

• 光线投射器
  
• 交互变乱
  

点赞 + 关注 + 收藏 = 学会了
1.光线投射器 Raycaster

此类旨在帮忙光线投射。光线投射用于鼠标拾取（确定鼠标在 3D 空间中的哪些对象上）等。
Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
origin — 光线投射的原点向量。
direction — 为 射线。应举行标准化。
near — 返回的全部结果都比 near 更远。近 不能为负数。默认值为 0。
far — 返回的全部结果都比 far 更近。远不能 低于 NEAR。默认值为 Infinity。
1.1)创建射线

1. const raycaster = new THREE.Raycaster()

复制代码

1.2)获取射线核心

1. // 通过摄像机和鼠标位置更新射线   从相机发出到鼠标点
2. raycaster.setFromCamera(mouse, camera)
3. // 计算物体和射线焦点
4. const intersects = raycaster.intersectObjects([sphere, sphere2, sphere3])
6.     // console.log(intersects)
7.     // console.log(intersects.face) //点到物体面信息
8.     // console.log(intersects.normal) //射线射中点法相向量
9.     // console.log(intersects.object) //选中物体
10.     // console.log(intersects.point) //射线点中的点
11.     // console.log(intersects.uv) //射线的uv

复制代码

2.点击变乱

2.1） 创建鼠标向量（鼠标点）

1. const mouse = new THREE.Vector2()

复制代码

2.1）监听鼠标变乱

1. window.addEventListener('click', (event) => {
2.     console.log(event.clientX, event.clientY)
3.     // 设置鼠标向量xy值   鼠标获取xy坐标与three获取坐标相反
4.     mouse.x = (event.clientX / window.innerWidth) * 2 - 1
5.     mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
6.     // console.log(mouse.x, mouse.y)
7.     // 通过摄像机和鼠标位置更新射线   从相机发出到鼠标点
8.     raycaster.setFromCamera(mouse, camera)
9.     // 计算物体和射线焦点
10.     const intersects = raycaster.intersectObjects([sphere, sphere2, sphere3])
11.     if (intersects.length > 0) {
12.         if (intersects[0].object._isSelect) {
13.             intersects[0].object.material.color.set(intersects[0].object._oldColor)
14.             intersects[0].object._isSelect = false
15.             return
16.         }
17.         intersects[0].object._isSelect = true //是否选择
18.         intersects[0].object._oldColor = intersects[0].object.material.color.getHex() //原有颜色  16进制的值
19.         intersects[0].object.material.color.set('red') //改变颜色
20.     }
21. })

复制代码

   到此基础入门（八）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。