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

react에 three.js를 따라하고 있습니다. 그런데 다른건 다 잘 되는데 dat.GUI는 똑같이 따라 하니 안되네요 혹시 다른 방법을 더 추가 해야 할까여

import * as THREE from 'three';
import dat from 'dat.gui';

export default function example() {
	 const scene = new THREE.Scene();
	 const renderer = new THREE.WebGLRenderer({
		 antialias : true
	 });
   renderer.setSize(window.innerWidth, window.innerHeight);
   renderer.setPixelRatio(window.devicePixelRatio>=1 ? 2 : 1);
   document.body.innerHTML="";
   document.body.appendChild(renderer.domElement);

	// Camera
	const camera = new THREE.PerspectiveCamera(
		75,
		window.innerWidth / window.innerHeight,
		0.1,
		1000
	);
	camera.position.y = 1;
	camera.position.z = 5;
	scene.add(camera);

	// Light
	const ambientLight = new THREE.AmbientLight('white', 0.5);
	scene.add(ambientLight);
	
	const directionalLight = new THREE.DirectionalLight('white', 1);
	directionalLight.position.x = 1;
	directionalLight.position.z = 2;
	scene.add(directionalLight);

	// Mesh
	const geometry = new THREE.BoxGeometry(1, 1, 1);
	const material = new THREE.MeshStandardMaterial({
		color: 'seagreen'
	});
	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	// Dat GUI
	const gui = new dat.GUI({ name: "My GUI" });
	console.log(gui)
	gui.add(mesh.position, 'y', -5, 5, 0.01).name('큐브 Y');
	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;
		camera.lookAt(mesh.position);
		renderer.render(scene, camera);
		renderer.setAnimationLoop(draw);
	}

	function setSize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.render(scene, camera);
	}
	// 이벤트
	window.addEventListener('resize', setSize);
	draw();
}