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

本篇主要学习内容 :

  1. 光线投射器
  2. 交互事件

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

1.光线投射器 Raycaster

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

1.1)创建射线
js 复制代码
const raycaster = new THREE.Raycaster()
1.2)获取射线焦点
js 复制代码
 // 通过摄像机和鼠标位置更新射线   从相机发出到鼠标点
 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) 创建鼠标向量(鼠标点)
js 复制代码
const mouse = new THREE.Vector2()
2.1)监听鼠标事件
js 复制代码
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') //改变颜色
    }
})

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

相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
Ares-Wang5 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
美狐美颜sdk5 小时前
直播美颜SDK动态贴纸模块开发指南:从人脸关键点识别到3D贴合
3d·美颜sdk·直播美颜sdk·第三方美颜sdk·视频美颜sdk·美颜api
cpsvps6 小时前
3D芯片香港集成:技术突破与产业机遇全景分析
人工智能·3d
SY_FC6 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
渣渣盟8 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
Carlos_sam9 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录9 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录9 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
遂心_10 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api