为了账号安全,请及时绑定邮箱和手机立即绑定

Threejs【坐标转换】如何让annotation跟随物体一起旋转

Threejs【坐标转换】如何让annotation跟随物体一起旋转

波斯汪 2019-03-14 16:12:07
现在根据鼠标点击的屏幕位置能够得到屏幕的坐标event.clientX和event.clientY,然后我的annotation就初始化在这个屏幕坐标的位置,那么如何绑定annotation和三维物体,使得物体旋转的时候可以让annotation跟随物体一起旋转呢?问题一:我知道的一种方法如下:/* 修改注解屏幕位置函数体 实时更新,实际是三维坐标向屏幕坐标的映射*/function updateScreenPosition() {    var canvas = renderer.domElement;    var vector = new THREE.Vector3(50, 0, 250); // 控制annotation的位置    vector.project(camera);    vector.x = Math.round((0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio)); // 控制annotation跟随物体一起旋转    vector.y = Math.round((0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio));    annotation.style.top = vector.y + "px";    annotation.style.left = vector.x + "px";    annotation.style.opacity = spriteBehindObject ? 0.25 : 1;}上面的方法可以控制annotation和物体一起旋转,但是annotation的位置确实预先设定的:var vector = new THREE.Vector3(50, 0, 250); // 控制annotation的位置对于上面这行代码,Vector3是个什么坐标系下的向量呢?当我在修改Vector3中的三个坐标的时候,发现它并不是控制annotation的位置的向量,比如我把鼠标点击位置的参数传递过来,然后触发鼠标点击事件,然后发现鼠标点击的位置并不是annotation的位置。如何把它和鼠标点击的屏幕坐标挂钩呢?问题二:如果不预先设定好这个Vector3 而是使用鼠标,而是直接传递event.clientX和event.clientYfunction updateAnnosPosition(){    var canvas = renderer.domElement;    var vector = new THREE.Vector3(clientX,clientY,-1);    vector.project(camera);    //这个位置的写法有问题    annos.style.left = clientX + "px";    annos.style.top = clientY + "px";    annos.style.opacity = spriteBehindObject ? 0.25 : 1;}这样是可以在鼠标点击位置触发annotation的,但是annotation却不跟随物体旋转。网上查了一下,大概是要进行屏幕坐标与三维坐标之间的转换:_mouse.x = ( event.clientX / _domElement.width ) * 2 - 1;_mouse.y = - ( event.clientY / _domElement.height ) * 2 + 1;但是还是不行,求教该如何处理。
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 890 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信