저번에 이어 질문드립니다.
388
작성한 질문수 3
강의 잘보고 있습니다.
ThreeJS 관련해서는 이강좌 만한게 없네요^^
저번에 ThreeJS를 이용한 그래프만들기를 문의 했습니다.
제가 구성해야할 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를 업데이트 해도 변하지가 않습니다.
혹시 해당부분을 해결할 방법이 있나요?
답변 1
0
아- 프로젝트 길게 하시는군요! 고생이 많으십니다.
이미 합쳐진 지오메트리로 mesh를 만들었기 때문에 이후에 반영하는 값이 갱신되지 않는 것으로 보이는데, merge 하는 대신.. Bar 클래스를 살펴보니 geometry를 계속 새로 생성하고 있는데, 어차피 모양이 같다면 한개만 생성해서 계속 그 지오메트리를 재사용하시고 scale을 조정해서 해보시면 퍼포먼스 향상에 도움이 되지 않을까 싶습니다.
box3.position.x 위치
0
38
1
리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?
0
81
1
소스코드 파일이 강의랑 같나요?
0
119
2
materials 배열에 있는 top, bottom ... 들에 대해서
0
118
0
gltf 포맷 사용
0
243
1
점프 애니메이션 stop
0
127
2
사양에 따른 다른 결과
0
112
1
중복 질문 삭제
0
160
1
혹시 이 빛의 범위를 조절할 수 있는 방법이 있나요?
0
124
1
gltf.scene.children 이 없는데도 모델이 화면에 떠요
0
101
2
GLF파일 export한 후에 three.js에서 렌더링 된 모델에는 텍스처 적용이 안되어있습니다..!
0
160
1
일반 유리, 강화 유리 강의에서 Glass 객체의 position X를 -1, 1로 설정한 이유를 모르겠어요
0
77
0
그림자가 다르게 표현됩니다
0
138
1
setAnimationLoop 위치가...
0
99
1
얼굴 그릴 때 붓이 깔끔하게 칠해지지 않고 얼룩덜룩해요
0
135
1
블렌더 texture paint 시 미러모드
0
164
0
DragControls의 인자값을 바꾸지 않았는데 에러가 안떠요!
0
104
1
blender 에서 색칠하기 편 Texter paint slot추가없음
0
966
2
fin 버전도 그냥 실행이 안돼요
0
289
2
자바스크립트 실행이 안되는 것 같아요
0
380
1
모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?
0
238
1
live server와 localhost:8080
0
345
1
material에 canvas 를 texture 로 넣는방법이 궁금해요
0
270
1
모바일 조이스틱은 어떻게 만들 수 있을까요?
0
208
1





