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();

WIP 的 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 = 近平面