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 = bottom
z：1 =远方飞机
z：-1 =近平面

ThreeJS获取视图的坐标摄像头

1 个答案: