我需要Three.js代码在'div'元素中将3D对象坐标转换为2d坐标,以便我可以将文本标签放置在需要的位置(这些标签无需随3D运动缩放/移动/旋转)。不幸的是,到目前为止,我已经看过并尝试过的所有示例似乎都在使用过时的功能/技术。就我而言,我相信我正在使用Three.js的r69。
这是一个“较旧”的技术示例,它只会为我带来错误:
Three.js: converting 3d position to 2d screen position
以下是一些较新的代码(?)的片段,这些代码没有为我提供足够的上下文来开始工作,但看上去却更加干净:
https://github.com/mrdoob/three.js/issues/5533
最佳答案
我为我的项目编写了以下功能;它接收一个THREE.Object3D
实例和一个相机作为参数,并返回屏幕上的位置。
function toScreenPosition(obj, camera)
{
var vector = new THREE.Vector3();
var widthHalf = 0.5*renderer.context.canvas.width;
var heightHalf = 0.5*renderer.context.canvas.height;
obj.updateMatrixWorld();
vector.setFromMatrixPosition(obj.matrixWorld);
vector.project(camera);
vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = - ( vector.y * heightHalf ) + heightHalf;
return {
x: vector.x,
y: vector.y
};
};
然后,我创建了一个
THREE.Object3D
只是为了保持div的位置(它附着在场景中的网格上),并且在需要时可以使用toScreenPosition
函数轻松地将其转换为屏幕位置,并更新div元素的坐标。var proj = toScreenPosition(divObj, camera);
divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';
Here a fiddle with a demo 。
关于3d - 将3D位置转换为2d屏幕位置[r69!],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27409074/