ThreeJS:从相机视图获取世界坐标

Question

我想对平面顶点进行动画处理以填充屏幕。(顶点，因为这是我想要的效果，我希望以短暂的延迟对每个顶点进行动画处理，然后填满屏幕(

作为概念证明，我有一个顶点，可以使用下面的函数将动画化到一个随机点 -

tileClick() {
var geo = this.SELECTED.geometry;
var mat = this.SELECTED.material as THREE.MeshBasicMaterial;
TweenMax.TweenLite.to(geo.vertices[0], 0.3, {x: -5, y:5, onUpdate: () =>{
mat.needsUpdate = true;
geo.colorsNeedUpdate = true;
geo.elementsNeedUpdate = true;
}, ease: TweenMax.Elastic.easeOut.config(1, 0.5)});
}

但是，现在我需要计算出相机当前视图的点。 伪代码：camera.view.getBoundingClientRect();

在制品的PLNKR - https://next.plnkr.co/edit/Jm4D2zgLtiKBGghC

Answer 1

我相信你需要的是THREE.Vector3.unproject.使用此方法，您可以将矢量设置为屏幕坐标x, y, z，它将返回世界坐标中的x, y, z：

var vector = new THREE.Vector3();
var zNearPlane = -1;
var zFarPlane = 1;
// Top left corner
vector.set( -1, 1, zNearPlane ).unproject( camera );
// Top right corner
vector.set( 1, 1, zNearPlane ).unproject( camera );
// Bottom left corner
vector.set( -1, -1, zNearPlane ).unproject( camera );
// Bottom right corner
vector.set( 1, -1, zNearPlane ).unproject( camera );

请注意，所有输入都在[-1, 1]范围内：

• x：-1 = 屏幕左侧
• x： 1 = 屏幕右侧
• y：1 = 顶部
• y：-1 = 底部
• z： 1 = 远平面
• z： -1 = 近平面