분류 전체보기

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 )

라이브러리를 이용한 애니메이션

라이브러리를 이용한 애니메이션애니메이션 라이브러리 사이트 : Green Sock Green Sock NPM 설치 [깃허브 바로가기]> npm install gsap  import gsap from "gsap";const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, // 시야각 (field of view)window.innerWidth / window.innerHeight, // 종횡비(aspect)0.1, // near1000 // far); scene.add(camera); const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshS..

애니메이션 성능 보정

애니메이션 성능 보정 사용자마다 다른 기기에서 사용컴퓨터 성능에 따라 움직이는 속도가 다를 수 있음 주의 getElapsedTime()와 getDelta()은 동시에 사용하면 값이 꼬이기 때문에 동시에 사용하지 말자  성능 보정 : 경과시간 clock.getElapsedTime() clock.getElapsedTime() 메서드를 사용하여 경과시간으로 성능 보정하기 실행 시점으로부터 총 경과 시간초 단위로 찍힘성능이 시간에 영향을 주지 않음 (절대 시간)  기존// 1초에 60도씩 돌아간다.mesh.rotation.y += THREE.MathUtils.degToRad(1);  성능 보정// 1도 대신 경과 시간을 넣기const time = clock.getElapsedTime() ;mesh.rotatio..