three.js如何讓三角符號從屏幕中心顯示或隱藏？

項(xiàng)目首頁需要用到一個動畫，一個三角符號顯示、隱藏的動畫效果，利用 three.js 畫了這個三角符號，然后利用 tween.js 來顯示或隱藏這個三角符號，=但是現(xiàn)在都是從三角符號的底邊中點(diǎn)位置顯示或隱藏的，如何讓其在屏幕中心位置顯示或隱藏呢？

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