분류 전체보기

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..

threejs 개발 할 때 도움을 줄 수 있는 유틸리티 (AxesHelper, GridHelper)

AxesHelper - 축 가이드  // AxesHelper const axesHelper = new THREE.AxesHelper(3); scene.add(axesHelper);  GridHelper - 격자무늬 가이드  // GridHelper const gridHelper = new THREE.GridHelper(5); scene.add(gridHelper);

안개(Fog) 만들기

안개 만들기  /* Scene 만들기 */ const scene = new THREE.Scene(); // 안개 만들기 scene.fog = new THREE.Fog("black", 3, 7);안개는 Scens에 추가하면 된다.안개를 넣으면 원감이 좀 더 살아난다.   threeJs 공식 문서Code Exampleconst scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0xcccccc, 10, 15 );Fog( color : Integer, near : Float, far : Float )