분류 전체보기

크기 조정

position// Three.js 필수 구성 요소 초기화const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 큐브 생성const geometry = new THREE.BoxGeometry(); // 기본 1x1x1 크기의 박스const material = new T..

위치 이동

position// Three.js 기본 설정 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 첫 번째 큐브 생성 (기본 위치) const geometry1 = new THREE.BoxGeometry(); co..

GUI 컨트롤

마우스 조절마우스 조절을 코드가 아닌 GUI를 제공하는 라이브러리를 사용해보기  설치npm i dat.gui   // Dat GUI const gui = new dat.GUI(); // 자바스크립트 오브젝트의 속성 값을 그래픽 기반의 UI로 조정할 수 있다. // gui.add(자바스크립트 오브젝트, "속성", 범위 최소값, 범위 최대값, 단계).name("레이블 이름"); gui.add(mesh.position, "y", -5, 5, 0.01).name("큐브 Y"); gui.add(camera.position, "x", -10, 10, 0.01).name("카메라 X"); // gui // .add(mesh.position, 'z') // .min(-10) // .max(3) ..

초당 프레임 수(FPS) 체크하기

// Three.js 기본 설정const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// FPS 체크를 위한 Stats 설정const stats = new Stats();document.body.appendChild(stats.dom);// 간단한 큐브 생성const ge..