Three.js:将三维位置转换为二维屏幕位置
Three.js: converting 3d position to 2d screen position
我有一个位置为(x,y,z)的3D对象。如何计算该对象的屏幕位置(x,y)?
我已经搜索过了,一个解决方案是,我必须找到投影矩阵,然后将3D位置点乘以这个矩阵,将其投影到一些2D观看表面(计算机屏幕)上。但我不知道如何在Three.js.中找到这个矩阵
我尝试了这样的转换函数,但它给出了错误的结果
function Point3DToScreen2D(point3D){
var screenX = 0;
var screenY = 0;
var inputX = point3D.x - camera.position.x;
var inputY = point3D.y - camera.position.y;
var inputZ = point3D.z - camera.position.z;
var aspectRatio = renderer.domElement.width / renderer.domElement.height;
screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
screenX = screenX * renderer.domElement.width;
screenY = renderer.domElement.height * (1-screenY);
return {x: screenX, y: screenY};
}
提前感谢。
对我来说,这个函数有效(Three.js版本69):
function createVector(x, y, z, camera, width, height) {
var p = new THREE.Vector3(x, y, z);
var vector = p.project(camera);
vector.x = (vector.x + 1) / 2 * width;
vector.y = -(vector.y - 1) / 2 * height;
return vector;
}
我终于通过以下代码完成了:
注意:div参数=canvas dom元素。
function toScreenXY( position, camera, div ) {
var pos = position.clone();
projScreenMat = new THREE.Matrix4();
projScreenMat.multiply( camera.projectionMatrix, camera.matrixWorldInverse );
projScreenMat.multiplyVector3( pos );
var offset = findOffset(div);
return { x: ( pos.x + 1 ) * div.width / 2 + offset.left,
y: ( - pos.y + 1) * div.height / 2 + offset.top };
}
function findOffset(element) {
var pos = new Object();
pos.left = pos.top = 0;
if (element.offsetParent)
{
do
{
pos.left += element.offsetLeft;
pos.top += element.offsetTop;
} while (element = element.offsetParent);
}
return pos;
}
在演示中查看源代码:http://stemkoski.github.com/Three.js/Mouse-Over.html
我相信你感兴趣的对象是THREE.Projector();例如,您可以使用它来自动计算,从鼠标光标在屏幕上的位置创建光线并将其投影到场景中。
相关文章:
- 当元素到达屏幕上的某个位置时触发事件
- Javascript元素相对于屏幕的位置
- 我希望每次单击按钮时都能将每张图片更改为显示在屏幕上的同一位置
- 为什么我的chosen.js放大镜图标在Retina屏幕上的位置不对
- CSS包含+的位置部分离开屏幕
- Three.js:将三维位置转换为二维屏幕位置
- 如何在屏幕上获取内联元素的顶部/左侧位置和高度
- 分叉弹性网格插件,能够通过单击屏幕上的任意位置来关闭预览
- 如何使页面的一部分始终相对于屏幕处于同一位置
- 在 Y 屏幕位置显示 CSS 动画
- 在 DOM 中添加新元素后,保留元素屏幕位置
- 如何获取元素与当前屏幕位置的偏移量
- 获取元素相对于屏幕的位置.(或替代解决方案)
- 跨浏览器和屏幕尺寸映射点击位置
- 如何在使用jquery / css动态显示周围元素的同时保持当前屏幕位置
- 绝对位置;在不同的屏幕上获得不同的结果
- 如何在 Jquery 中根据屏幕大小移动绝对位置元素
- Javascript - 从任何位置将元素动画到屏幕中心
- 计算屏幕上特定位置存在多少层
- 在点击任意位置屏幕上显示菜单