인프런 커뮤니티 질문&답변

강의 잘보고 있습니다.

ThreeJS 관련해서는 이강좌 만한게 없네요^^

저번에 ThreeJS를 이용한 그래프만들기를 문의 했습니다.

https://www.inflearn.com/questions/499689/%EA%B0%95%EC%9D%98-%EB%84%88%EB%AC%B4-%EC%9E%98%EB%93%A3%EA%B3%A0-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4-%EC%A7%88%EB%AC%B8-%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4

제가 구성해야할 Bar가 256*60개여서 해당부분으로 해보니 프레임이 너무 안나와서

geometry를 합쳐서 하나의 mesh로 구성해 보았습니다.

 let geometrys = [];

    class Bar {
      constructor(info = {}) {
        this.container = info.container;
        this.value = info.value || 0;

        const heightValue = (this.value / maxValue) * maxBarHeight;

        this.x = info.x || 0;
        this.y = heightValue / 2;
        this.z = info.z || 0;

        const geometry = new THREE.BoxGeometry(1, 1, 1);
        originHelper.position.set(this.x, this.y, this.z);
        originHelper.scale.set(1, heightValue, 4);
        originHelper.updateMatrixWorld(true, false);
        geometry.applyMatrix4(originHelper.matrixWorld);
        geometrys.push(geometry);
      }
    }

    for (let i = 0; i < 256 * 60; i++) {
      const value = Math.random() * 255;
      new Bar({
        value,
        x: (i % 255) * barDistance + 1,
        y: 0,
        z: parseInt(i / 256) * 4,
      });
    }

    // 생성한 geometry를 전부 합침

    let mergedGeometry = mergeBufferGeometries(geometrys, false);
    let mesh = new THREE.Mesh(mergedGeometry, basicMaterial);
    scene.add(mesh);

    // 그리기
    const clock = new THREE.Clock();

    function draw() {
      
      ///////////////////////////////////////
      for (let i = 0; i < 256 * 60; i++) {
        const value = Math.random() * 255;
        const heightValue = (value / maxValue) * maxBarHeight;
        const y = heightValue / 2;
        originHelper.position.set(
          (i % 255) * barDistance + 1,
          y,
          parseInt(i / 256) * 4
        );
        originHelper.scale.set(1, heightValue, 4);
        originHelper.updateMatrixWorld(true, false);
        geometrys[i].applyMatrix4(originHelper.matrixWorld);

      }
      renderer.render(scene, camera);
      renderer.setAnimationLoop(draw);
      // requestAnimationFrame(draw);
    }

이렇게 구성해보고 프레임마다 난수를 발생해서 그래프가 갱신하게 구성하고 싶은데

mesh와 다르게 geometry의 matrix를 업데이트 해도 변하지가 않습니다.

혹시 해당부분을 해결할 방법이 있나요?