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)创建射线
const raycaster = new THREE.Raycaster()
1.2)获取射线核心
// 通过摄像机和鼠标位置更新射线 从相机发出到鼠标点
raycaster.setFromCamera(mouse, camera)
// 计算物体和射线焦点
const intersects = raycaster.intersectObjects()
// console.log(intersects)
// console.log(intersects.face) //点到物体面信息
// console.log(intersects.normal) //射线射中点法相向量
// console.log(intersects.object) //选中物体
// console.log(intersects.point) //射线点中的点
// console.log(intersects.uv) //射线的uv
2.点击变乱
2.1） 创建鼠标向量（鼠标点）
const mouse = new THREE.Vector2()
2.1）监听鼠标变乱
window.addEventListener('click', (event) => {
console.log(event.clientX, event.clientY)
// 设置鼠标向量xy值 鼠标获取xy坐标与three获取坐标相反
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
// console.log(mouse.x, mouse.y)
// 通过摄像机和鼠标位置更新射线 从相机发出到鼠标点
raycaster.setFromCamera(mouse, camera)
// 计算物体和射线焦点
const intersects = raycaster.intersectObjects()
if (intersects.length > 0) {
if (intersects.object._isSelect) {
intersects.object.material.color.set(intersects.object._oldColor)
intersects.object._isSelect = false
return
}
intersects.object._isSelect = true //是否选择
intersects.object._oldColor = intersects.object.material.color.getHex() //原有颜色16进制的值
intersects.object.material.color.set('red') //改变颜色
}
})
https://i-blog.csdnimg.cn/direct/a324587a992b40a0b22d29aff4ce44d3.gif
到此基础入门（八）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]