three.js如何让三角符号从屏幕中心显示或隐藏？

Question

项目首页需要用到一个动画，一个三角符号显示、隐藏的动画效果，利用 three.js 画了这个三角符号，然后利用 tween.js 来显示或隐藏这个三角符号，=但是现在都是从三角符号的底边中点位置显示或隐藏的，如何让其在屏幕中心位置显示或隐藏呢？

three.js 画三角符号代码

    var geometry = new THREE.Geometry();
    geometry.vertices.push(
      new THREE.Vector3(-x, 0, 0),
      new THREE.Vector3(0, Math.sqrt(3 * x * x), 0),
      new THREE.Vector3(x, 0, 0),
      new THREE.Vector3(-x, 0, 0)
    );
    
    var material = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 5});
    
    triangular = new THREE.Line(geometry, material);
    triangular.position.y = -2200;
    triangular.position.z = -1000;
    scene.add(triangular)

tween.js 控制三角符号显示或隐藏代码

    var scale = triangular.scale.x < 1 ? 1 : 0.0010000000000000009;
    var duration = scale == 1 ? 2500 : 500;
    new TWEEN.Tween(triangular.scale)
      .to({ x: scale, y: scale, z: scale }, duration)
      .easing(TWEEN.Easing.Quartic.InOut)
      .onComplete(function() {
        isMeTriang = false;
      }).start();

Answer 1

问题找到了，主要的问题是方向搞错了，不是不用这么麻烦，直接跳涨三角符号的四个顶点就好。

思路：以三角符号的中心点（0,0,0）来计算4个定点的位置就行了，因为如果是中心位置就是显示、隐藏的位置！

错误原因：之前计算思路是，以中心位置的水平位置计算的两个底角的位置，所以中心位置看上去在底边的中心位置