lookAt(mesh.position) 관련 질문입니다!

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

GUI 컨트롤

작성

322

수정됨

GUI컨트롤 강의에서 8:05에 lookAt(mesh.position)을 했는데 왜 lookAt(mesh)를 하면 화면에 아무것도 안 보이는건가요??

+애니메이션이 계속 업데이트 되기 때문에 camera.lookAt(mesh.position)을 draw()함수에 넣어야된다고 하셔서 애니메이션을 끄고 실행해보려고 draw()함수를 주석처리하고 camera.lookAt(mesh.position)을 다음과 같이 넣었더니 GUI를 움직여도 변화가 없는데 이건 왜인가요??ㅠㅠ

// GUI
const gui = new dat.GUI();
gui.add(mesh.position, 'y', -5, 5, 0.01).name('y 위치'); //조정할 속성, 속성값, 최솟값, 최댓값, 조정 단위 
gui
    .add(mesh.position, 'z')
    .min(-10)
    .max(3)
    .step(0.01) //위와 같은데 쓰는 방식만 다른거임
    .name('메쉬의 z위치'); //조정 이름 설정

gui.add(camera.position, 'x', -10, 10, 0.01).name('카메라 x');
camera.lookAt(mesh.position);
// 그리기
const clock = new THREE.Clock();

// function draw() {
    
// 	const time = clock.getElapsedTime();

// 	mesh.rotation.y = time;

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

blender 인터랙티브-웹 three.js

답변 2

1분코딩

지식공유자

ODeorain님 말씀대로, 계속 변경된 화면을 그려줘야하기 때문에 camera.lookAt을 계속 반복 실행되는 함수인 draw에 넣어주셔야 합니다~ draw 함수를 예제대로 아래처럼 작성해 보세요^^

function draw() {
		const time = clock.getElapsedTime();
		mesh.rotation.y = time;

		camera.lookAt(mesh.position);

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

ODeorain

애니메이션이 계속 업데이트 되어야 변경된 GUI값을 화면에 반영할 수 있기 때문이 아닐까요...?

function draw(){

renderer.render(scene,camera);
renderer.setAnimationLoop(draw);
camera.lookAt(mesh.position);

}

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

lookAt(mesh.position) 관련 질문입니다!