THREE.LineSegments - geometry.needsUpdate 沒有更新

Question

嗨，我無法讓我的THREE.LineSegments使用geometry.needsUpdate進行更新。 我有一個快速的 animation，它在每次迭代時繪制一個正方形的一側，從左側直立開始，然后以順時針方向旋轉，並逐個繪制每一側。 我正在使用 tweenmax 對其進行動畫處理，因為它是更大的 animation 的一部分，因此我刪除了很多多余的腳本。 每次迭代時，側數組都會更新它的值 [x,y,z,x,y,z] ，因此側的 position 應該改變。 我可以在我的控制台中看到側陣列正在更新並且值正在發生變化，但我的 THREE.LineSegments 沒有，因此我得到的只是一條直立的線。 誰能告訴我如何更新它？ 這是代碼：

import './style.css'
import * as THREE from 'three'


const canvas = document.querySelector('canvas.webgl')


const width = canvas.offsetWidth,
    height = canvas.offsetHeight;


const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
});



renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(0x000000);


const scene = new THREE.Scene()
scene.background = new THREE.Color(0x21282a);


const camera = new THREE.PerspectiveCamera(75, width / height)
camera.position.z = 3

scene.add(camera)



const material = new THREE.LineBasicMaterial({
    color: 0xff0000
});
           //[x,y,z,x,y,z]
const side = [0, 0, 0, 0, 1, 0]



let i = 0

function moveLine(side) {


    TweenMax.to(side, 4, {

        onUpdate: function () {

         if (i === 0){
            side[0] = 0 //x
            side[1] = 0 //y
            side[2] = 0 //z
            side[3] = 0 //x
            side[4] = 1 //y
            side[5] = 0 //z
            i++
        } else if (i === 1){
            side[0] = 0 //x
            side[1] = 1 //y
            side[2] = 0 //z
            side[3] = 1 //x
            side[4] = 1 //y
            side[5] = 0 //z
            i++
        } else if (i === 2){
            side[0] = 1 //x
            side[1] = 1 //y
            side[2] = 0 //z
            side[3] = 1 //x
            side[4] = 0 //y
            side[5] = 0 //z
            i++
        } else if (i === 3){
            side[0] = 1 //x
            side[1] = 0 //y
            side[2] = 0 //z
            side[3] = 0 //x
            side[4] = 0 //y
            side[5] = 0 //z
            i=0
        }

        }

    });


}
moveLine(side)


const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute(side, 3) );

const segments = new THREE.LineSegments(geometry, material);

scene.add( segments );





const render = () => {

    geometry.needsUpdate = true

    renderer.render(scene, camera);

    console.log(side)
}

TweenMax.ticker.addEventListener("tick", render);

Answer 1

幾何.needsUpdate = true

它應該是：

const positionAttribute = geometry.getAttribute('position');
positionAttribute.needsUpdate = true;

您更新單個緩沖區屬性，而不是整個幾何圖形。