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

three.js 畫三角符號(hào)代碼

    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 控制三角符號(hào)顯示或隱藏代碼

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