mesh 배열 질문
376
작성한 질문수 4
안녕하세요 선생님 선생님 강의를 따라하다가 애니메이션 부분을 일부러 안지우고 배열을 만들고 있었는데
아래와 같이 메쉬들 중 1개만 로테이션 되어 올라가는 현상이 있습니다. 관련하여 너무 궁금하여 질문 드립니다.
1 ) 왜 모든 메쉬가 회전하여 올라가지 않고 1개만 올라가는건가요?
2) for문에서 meshes 배열에 mesh객체들을 모두 push로 넣으면 모든 메쉬가 다 배열안으로 들어갔기 때문에
메쉬가 1개라도 회전하면 안되지 않나용?
<하나만 올라오는 메쉬 이미지>
코드는 아래처럼 사용했습니다..
const meshes = [];
let mesh;
for (let i = 0 ; i < 10; i++){
mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5
mesh.position.z = Math.random() * 5
scene.add(mesh);
meshes.push(mesh);
}
let oldTime = Date.now();
//그리기
function draw() {
const newTime = Date.now();
const deltaTime = newTime - oldTime;
oldTime = newTime;
mesh.rotation.y += deltaTime * 0.001;
mesh.position.y += 0.01;
renderer.render(scene, camera);
window.requestAnimationFrame(draw);
}
선생님 하나더 질문이 있습니다!
위에 for문 속의 THREE.Mesh()로 메쉬 실행시에 폴더경로 : three > build > three.js 의 아래부분이 실행되는건가요?
위 코드에서 만들어진 생성자 함수로 만든 mesh객체들이 배열안드로 들어간다고 보면 되는걸까요?
저는 push하게 되는순간 위에 랜덤값이 들어간 객체 자체가 배열로 들어간다고 생각했습니다.. 아래처럼요
너무 궁금합니다...
<제가 상상한 객체를 배열로 푸쉬하는 모습>
meshes = [{position.x : 1.2 , position.y : 3.2 , ...............} //이런 모습보다 더 복잡하겠지만 '객체' 자체가 들어간다는것이 궁금합니다!
{position.x :1 , position.y :2 , ...............}
{position.x :4, position.y : 3.8 , ...............}
푸쉬 되는중....]
궁금해서 찾아본 원래 클래스들인데..
class Mesh extends Object3D {
constructor(geometry = new BufferGeometry(), material = new MeshBasicMaterial()) {
super();
this.isMesh = true;
this.type = 'Mesh';
this.geometry = geometry;
this.material = material;
this.updateMorphTargets(); class Object3D extends EventDispatcher {
constructor() {
super();
this.isObject3D = true;
Object.defineProperty(this, 'id', {
value: _object3DId++
});
this.uuid = generateUUID();
this.name = '';
this.type = 'Object3D';
this.parent = null;
this.children = [];
this.up = Object3D.DefaultUp.clone();
const position = new Vector3();
const rotation = new Euler();
const quaternion = new Quaternion();
const scale = new Vector3(1, 1, 1);
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)
- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
답변 1
0
for문 안에서 mesh 변수를 계속 사용하고 있는데요, 그러다보니 결과적으로는 최종적으로 생성한 메쉬가 mesh 변수에 들어가게 됩니다. 그래서 draw 함수 안에서 mesh.position을 조정하면 마지막으로 생성된 메쉬 하나만 움직이는 것이고요~ 메쉬를 여러개 생성해서 meshes 배열 안에 넣은 이유가 바로 draw 함수 내부에서 이 배열을 이용해서 모든 메쉬들을 컨트롤 하기 위함입니다. 아래처럼 forEach 메서드를 이용해서 meshes 배열의 모든 원소들(메쉬들)을 전부 움직여줘야겠지요~ 강의에서 진행하는 예제들에서 보시면 그런 식으로 되어있답니다.
meshes.forEach(item => {
item.position.y += 0.01;
})
자바스크립트에서 객체(Object)를 저장하는 방식은, 객체 자체는 메모리에 저장하고 변수는 그 객체가 메모리에 저장된 주소를 가리키게 되어있습니다. 새로 생성해서 배열에 push할 때마다 랜덤한 위치값을 지정해주면 각 메쉬들이 각자의 랜덤값을 갖고있는 것은 맞는데, 보통은 draw 함수에서 바로 값을 갱신하기 때문에 바로 값이 변하게 되는거지요.
리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?
0
80
1
소스코드 파일이 강의랑 같나요?
0
117
2
materials 배열에 있는 top, bottom ... 들에 대해서
0
118
0
gltf 포맷 사용
0
242
1
점프 애니메이션 stop
0
127
2
사양에 따른 다른 결과
0
111
1
중복 질문 삭제
0
160
1
혹시 이 빛의 범위를 조절할 수 있는 방법이 있나요?
0
124
1
gltf.scene.children 이 없는데도 모델이 화면에 떠요
0
101
2
GLF파일 export한 후에 three.js에서 렌더링 된 모델에는 텍스처 적용이 안되어있습니다..!
0
159
1
일반 유리, 강화 유리 강의에서 Glass 객체의 position X를 -1, 1로 설정한 이유를 모르겠어요
0
76
0
그림자가 다르게 표현됩니다
0
138
1
setAnimationLoop 위치가...
0
98
1
얼굴 그릴 때 붓이 깔끔하게 칠해지지 않고 얼룩덜룩해요
0
134
1
블렌더 texture paint 시 미러모드
0
162
0
DragControls의 인자값을 바꾸지 않았는데 에러가 안떠요!
0
104
1
blender 에서 색칠하기 편 Texter paint slot추가없음
0
956
2
fin 버전도 그냥 실행이 안돼요
0
289
2
자바스크립트 실행이 안되는 것 같아요
0
378
1
모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?
0
237
1
live server와 localhost:8080
0
340
1
material에 canvas 를 texture 로 넣는방법이 궁금해요
0
268
1
모바일 조이스틱은 어떻게 만들 수 있을까요?
0
206
1
징검다리 예제에서 SpotLight가 동작 오류
0
301
2





