社区
JavaScript
帖子详情
threejs如何拾取sprite
4525
2020-06-05 07:04:20
threejs如何拾取sprite,想鼠标操作sprite
...全文
1381
10
打赏
收藏
threejs如何拾取sprite
threejs如何拾取sprite,想鼠标操作sprite
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
10 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
霍庆祝
2020-12-28
打赏
举报
回复
1
addEventListener("click", (event: { clientX: number; clientY: number; }) => { console.log(event.clientX,event.clientY); // 拿到鼠标在屏幕的坐标 let mouseX = event.clientX;//鼠标单击位置横坐标 let mouseY = event.clientY;//鼠标单击位置纵坐标 const rect=this.container?.getBoundingClientRect();//拿到div相对屏幕坐标的偏移量 //屏幕坐标转标准设备坐标 const x = ((mouseX - rect!.left) / this.container.clientWidth) * 2 - 1; const y = - ((mouseY - rect!.top) / this.container.clientHeight) * 2 + 1; let standardVector = new THREE.Vector3(x, y);//标准设备坐标 //标准设备坐标转世界坐标 let worldVector = standardVector.unproject(this.camera); //射线投射方向单位向量(worldVector坐标减相机位置坐标) let ray = worldVector.sub(this.camera.position).normalize(); //创建射线投射器对象 let raycaster = new THREE.Raycaster(this.camera.position, ray);//光线投射的起点向量。 光线投射的方向向量,应该是被归一化的。 raycaster.camera=this.camera//设置一下相机 //返回射线选中的对象 let intersects:any = raycaster.intersectObjects(this.scene.children); console.log(intersects); // if (intersects.length > 0) { // intersects[0].object.material.color.set(randomColor()) // } });
霍庆祝
2020-12-28
打赏
举报
回复
2
设置一下相机就行了 raycaster.camera=this.camera
A奶糖001
2021-11-18
举报
回复
@霍庆祝
请教一下怎么设置
O起个大早听鸟叫O
2020-11-17
打赏
举报
回复
大佬,你的问题解决了吗,如果解决,可否告诉下解决方法
聪明的飞机
2020-09-11
打赏
举报
回复
请问我的场景加入精灵后,使用射线报错是什么原因?不管在场景哪个位置双击使用射线都会报错:THREE.Sprite: "Raycaster.camera" needs to be set in order to raycast against sprites.
Leon-Amazing
2022-03-02
举报
回复
@聪明的飞机
哥,我也遇到了这个问题,你解决了吗?
RaymondLam00
2022-06-10
举报
回复
1
@Leon-Amazing
哥,我也遇到这个问题,你解决了吗?
m0_62165332
2022-07-26
举报
回复
@RaymondLam00
将精灵那一部分从场景中移除
2条回复
Thre
ejs
开发3D地图实践总结
前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享。法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。如果一个顶点被多个三角形共享,共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和。N=N1+N2;所以如果不做任何处理,直接将3维物体的点传递给BufferGeometry,那么由于法向量被合成,经过片元着色器插值后,就会得到这个黑不溜秋的效果
Thre
ejs
之射线
拾取
模型
参考资料 射线Ray … 射线
拾取
Sprite
控制场景 知识点 注:基于
Thre
e.jsv0.155.0 射线Ray Raycaster(射线
拾取
模型) 屏幕坐标转标准设备坐标 Raycaster(鼠标点击选中模型) Canvas尺寸变化(射线坐标计算) 射线
拾取
层级模型(模型描边) 射线
拾取
Sprite
控制场景 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
thre
e.js 射线
拾取
精灵图
Sprite
控制场景
效果:这里只是 鼠标点击时,改变了精灵图的材质颜色。
thre
ejs
射线
拾取
模型(vue3+ts)
thre
ejs
拾取
物体
thre
e.js 射线
拾取
thre
e.js 射线
拾取
JavaScript
87,997
社区成员
224,709
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章