社区
JavaScript
帖子详情
threejs如何拾取sprite
4525
2020-06-05 07:04:20
threejs如何拾取sprite,想鼠标操作sprite
...全文
1380
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地图实践总结
创建指向相机的POI(Point of Interest)时,
Thre
e.js提供了
Sprite
类,可以将文字和图片作为纹理贴图。然而,未正确调整精灵(
Sprite
)的scale会导致图像失真。解决这一问题的关键在于计算屏幕像素与3D世界单位长度...
Thre
ejs
之射线
拾取
模型
射线
拾取
Sprite
控制场景 知识点 注:基于
Thre
e.jsv0.155.0 射线Ray Raycaster(射线
拾取
模型) 屏幕坐标转标准设备坐标 Raycaster(鼠标点击选中模型) Canvas尺寸变化(射线坐标计算) 射线
拾取
层级模型(模型描边) 射线...
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写文章