当前位置：首页 > article >正文

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

article 2025/3/9 9:15:12

本篇主要学习内容 :

光线投射器
交互事件

点赞 + 关注 + 收藏 = 学会了

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([sphere, sphere2, sphere3])
 
    // 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([sphere, sphere2, sphere3])
    if (intersects.length > 0) {
        if (intersects[0].object._isSelect) {
            intersects[0].object.material.color.set(intersects[0].object._oldColor)
            intersects[0].object._isSelect = false
            return
        }
        intersects[0].object._isSelect = true //是否选择
        intersects[0].object._oldColor = intersects[0].object.material.color.getHex() //原有颜色  16进制的值
        intersects[0].object.material.color.set('red') //改变颜色
    }
})