inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Three.js로 시작하는 3D 인터랙티브 웹

안개(Fog)

mesh 배열 질문

376

admin

작성한 질문수 4

0

안녕하세요 선생님 선생님 강의를 따라하다가 애니메이션 부분을 일부러 안지우고 배열을 만들고 있었는데
아래와 같이 메쉬들 중 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);
    }

 

 

  1. 선생님 하나더 질문이 있습니다!
    위에 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 문의하기를 이용해주세요.

인터랙티브-웹 blender Three.js

답변 1

0

1분코딩

for문 안에서 mesh 변수를 계속 사용하고 있는데요, 그러다보니 결과적으로는 최종적으로 생성한 메쉬가 mesh 변수에 들어가게 됩니다. 그래서 draw 함수 안에서 mesh.position을 조정하면 마지막으로 생성된 메쉬 하나만 움직이는 것이고요~ 메쉬를 여러개 생성해서 meshes 배열 안에 넣은 이유가 바로 draw 함수 내부에서 이 배열을 이용해서 모든 메쉬들을 컨트롤 하기 위함입니다. 아래처럼 forEach 메서드를 이용해서 meshes 배열의 모든 원소들(메쉬들)을 전부 움직여줘야겠지요~ 강의에서 진행하는 예제들에서 보시면 그런 식으로 되어있답니다.

meshes.forEach(item => {

item.position.y += 0.01;

})

자바스크립트에서 객체(Object)를 저장하는 방식은, 객체 자체는 메모리에 저장하고 변수는 그 객체가 메모리에 저장된 주소를 가리키게 되어있습니다. 새로 생성해서 배열에 push할 때마다 랜덤한 위치값을 지정해주면 각 메쉬들이 각자의 랜덤값을 갖고있는 것은 맞는데, 보통은 draw 함수에서 바로 값을 갱신하기 때문에 바로 값이 변하게 되는거지요.

0

admin

아! 읽어보니 아직 객체 기초가 부족한것 같습니다 ㅠ_ㅠ 알려주셔서 감사합니다.

리액트/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