我需要Three.js代码将3D对象坐标转换为'div'元素中的2d,以便我可以将文本标签放置在需要的位置(没有那些标签缩放/移动/旋转以及3D移动).不幸的是,到目前为止我见过和尝试过的所有示例似乎都在使用过时的函数/技术.就我而言,我相信我使用的是R69 of Three.js.
这是一个"老"技术的例子,它只会给我带来错误:
下面是一些新代码(？)的片段,它没有为我提供足够的上下文工作,但看起来更清晰:
我阅读了很多关于使用片段着色器获取深度的信息.
如
http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=234519
但我还是不知道这是否gl_FragCoord.z是线性的.
GLSL规范称屏幕上的范围为[0,1]而未提及线性与否.
我认为线性是至关重要的,因为我将使用渲染模型来匹配Kinect的深度图.
那么如果它不是线性的,那么如何在世界空间中线性化呢？
在three.js中,当鼠标被缩放时,文本将被放大并相应地减小.
var texture = new THREE.Texture( canvas );
var material = new THREE.SpriteMaterial ( { map: texture, transparent:false } );
var sprite = new THREE.Sprite( material );
当鼠标缩放时,如何防止文本大小发生变化？
我需要在浏览器窗口大小更改后获取正确的 Three.JS 相机 FOV。我已查看以下问题，但似乎无法找到我的问题的答案：
我的相机设置如下（“this”指我设置的 gameCamera 对象）：
const CAMERA_DIST = 8000;
-other stuff-
this.camera = new THREE.PerspectiveCamera(
45, //FOV parameter
window.innerWidth / window.innerHeight, //aspect ratio parameter
1, //frustum near plane parameter
CAMERA_DIST //frustum far plane parameter
);
当用户调整浏览器窗口大小时，将调用以下更新代码。我包含了在这里找到的代码：（如何用三个 js 计算透视相机的 fov？）用于尝试计算新的 FOV（'aFOV'）。
function onWindowResize() {
gameCamera.camera.aspect = window.innerWidth / window.innerHeight;
console.log(gameCamera.camera.fov);
gameCamera.camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
console.log(gameCamera.camera.fov);
let aFOV = 2*Math.atan((window.innerHeight)/(2*CAMERA_DIST)) * (180/Pi);
console.log(aFOV);
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
} …我想在动画过程中修改相机的 FOV 值。不幸的是，一旦我实现了 FOV 值，我就可以观察到我的场景变得更小。
所以我一直想知道，FOV 值和透视相机的距离位置之间的数学联系是什么？
这个想法是在 FOV 值发生变化时拥有相同的场景（通过修改相机位置来实现相同的大小）。
非常感谢。
编辑1：
这是说明我的问题的片段：当我实现相机的 FOV 值（从 4 到 45）时，我的方块和相机之间的距离发生了变化。我该如何预防呢？
let W = window.innerWidth, H = window.innerHeight;
let renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );
let camera = new THREE.PerspectiveCamera( 4, W/H, 1, 100 );
let scene = new THREE.Scene();
camera.position.set(0,0,14);
camera.lookAt(0,0,0);
let geo = new THREE.BoxGeometry(0.5, 0.5, 0.5);
let mat = new THREE.MeshNormalMaterial();
let mesh = new …我的目标是将球体放置在鼠标指向的位置(Z-coord为0).
我看到了这个问题,但我还没有理解MVP矩阵的概念,所以我研究了一下,现在我有两个问题:
如何从相机设置创建视图矩阵,如查找,眼睛和向上矢量？
我还阅读本教程的几种类型的相机,这一个WebGL的.
我仍然可以把它放在一起我不知道如何获得投影矩阵...
我应该采取哪些措施来实现所有这些目标？