ThreeJS更新相机位置，使平面世界位置与DIV屏幕位置匹配

Question

目标

我想更新相机位置，以便平面世界位置与DIV 屏幕位置相匹配。

第一个想法

我需要计算camera.position.z - 这样即使调整画布大小，飞机的面也会匹配DIV - 的大小。

this.computeZ = function(meshHandle, cameraHandle, faceHeight, targetHeight){
    var face = meshHandle.geometry.vertices[2]
    var vFOV = cameraHandle.fov * Math.PI / 180;  
    var vHeightPartial = 2 * Math.tan( vFOV / 2 );
    var p1 = faceHeight * window.innerHeight;
    var p2 = face.z * vHeightPartial;
    var p3 = targetHeight * vHeightPartial;
    var p4 = targetHeight * p2;
    var p5 = p1 + p4;
    var z = p5/p3;
    return z;
}

See computeZ in action here.

后续步骤

世界面部大小现在与DIV屏幕像素大小匹配。

接下来，我们需要找到camera.position.x和camera.position.y - 以便脸部直接与DIV重叠。

我已经研究过......
How to Fit Camera to Object
Three.js - Width of view
THREE.JS: Get object size with respect to camera and object position on screen
Converting World coordinates to Screen coordinates in Three.js using Projection

...但一直在努力构建适用于computeX和computeY

的内容

请帮忙

查看我提供的the fiddle中的computeX和computeY功能。 这些功能是我最好的尝试 - 但是不起作用。

如何构建这些功能？

更新

我在solution的帮助下想出Craig's post。这个类基于他的方法来覆盖resize事件。

Answer 1

＆＃13;

＆＃13;

vector.x / offsetX = vector.z / z - mesh.geometry.parameters.depth

＆＃13;

＆＃13;

＆＃13;

为了解决这个问题，我给出了这两个步骤，1：获取3D空间中的dom元素坐标。 2：使用类似的三角形计算x和y的偏移量。我将向您展示如何使用类似的三角形。

因为相机是透视相机。现在dom元素，相机和网格可以形成一个三角形，如果我们忽略Y维度，三角形看起来就像这张图片。

现在，我们知道3D空间中的dom元素坐标，你得到了正确的＆＃39; z＆＃39;，我们也知道绿色立方体的深度。我们需要计算偏移量x（图中的紫色线）。很明显，图片中的这些三角形是相似的三角形。 offsetY。我们可以做同样的事情来获得from threading import Timer from functools import partial def plus(a,b): print (a+b) def repeat(func,interval,*args): # call the provided func func(*args) Timer(interval, partial(repeat, func, interval), args=args).start() repeat(plus,1,2,3) 。