如何将THREE.js视图调整为画布大小

Question

我想将元素拖放到鼠标位置。为此，我需要"；sync"；THRE.js空间到画布大小({0,0}坐标位于屏幕中间(。假设我的元素有500px的宽度，如果我用鼠标坐标x = 500放下一个元素，那么对象x的坐标应该是x = 250。在这一点上，我使用的是PerspectiveCamera。

我根据本教程的解释进行了计算，以便使fov(视野(边界与绿线的边界相交(在示例中为圆圈高度，在我的情况下为画布宽度(

这是我迄今为止所做的基于相机z位置的fov计算(主要使用毕达哥拉斯(。

calculateFOV(z:number){
const b = z;
const a = this.width / 2;
const c = Math.sqrt((a**2) + (b**2));
const cosa =  a / c;
let angle = (Math.acos(cosa) * (180 / Math.PI));
let resAngle = 180 - 90 - angle
return (resAngle * 2);
}
...
const zPosition = 40;
const fov = this.calculateFOV(zPosition);
this.camera = new THREE.PerspectiveCamera( fov, this.width / this.height, 10,  zPosition);

但它并没有像预期的那样起作用。

如果你需要更多的细节，请告诉我。

Answer 1

您的模型(线条？(的宽度为W，高度为H。
假设相机位于Z。
画布的宽度为W，高度为H。
1Three.js fov基于高度。

您需要比较模型与画布的纵横比。

if ((W/H) < (w/h)) then fov = 2*atan2(H/2, Z);
else                    fov = 2*atan2(W*h/w/2, Z);

(是的，THRE.js摄像头需要度数(

(这让我对自己的工作有了一些信心：(

If the canvas aspect ratio is 4/3, H=30, W<40, Z=100, then  
(W/H)<(4/3) and fov = 2*atan2(30/2, 100);  
If the canvas aspect ratio is 4/3, W=40, H<30, Z=100, then  
(W/H)>(4/3) and fov = 2*atan2(40*3/4/2, 100);

Answer 2

我通过这样做来实现它：

calculateFOV(z:number){
const b = z;
//scaling mid base of fov triangle to aspect ratio
const a = ((this.width / 2 ) / (this.width / this.height));
//pythagore
const c = Math.sqrt((a**2) + (b**2));
//cosine of angle
const cosa = a / c;
//invert cosine to degrees
const angle = Math.acos(cosa) * (180 / Math.PI);
//angle left multiplied by 2
let resAngle = (90 - angle) * 2
return (resAngle);
}

和z = this.width

我不能真正理解它，但它通过将中底缩放到纵横比来工作。