WebGL2 [Three.js ] Three.js 간단한 Animation를 넣어보자 Three.js 간단한 Animation를 넣어보자 requestAnimationFrame 함수 Animation 효과를 주기 위해 setInterval 함수를 쓸 수 있지만, setInterval는 브라우저의 다른 탭을 사용할 때도 계속 호출되기 때문에 CPU를 많이 사용한다. 이를 보안하기 위하여 Three.js의 내장 함수인 requestAnimationFrame를 사용한다. 자세한 건 microsoft에서 나온 requestAnimationFrame의 설명을 한번 보자! 여기도 있다! https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame requestAnimationFrame 시작! plane과 scene, 그리고 c.. 2019. 4. 3. [Three.js ] Three.js를 시작해보자 Three.js를 시작해보자 WebGL를 그대로 사용하려고 하면 고급의 기술을 필요로 하다고 한다. 그래서 JavaScript 라이브러리를 통해 WebGL를 쉽게 다룰 수 있도록 Three.js를 사용한다. HTML 준비 https://threejs.org/ 사이트에서 파일을 다운로드한다. 다운로드한 파일(three.js-master) > build의 three.js를 사용하면 된다. three.js를 쓰던 three.min.js를 쓰던 상관없다. 시작 1 2 3 4 Colored by Color Scripter cs Scene를 추가한다 Scene은 렌더링 할 모든 객체와, 광원을 저장하는 컨테이너이다. THREE.Scene이 없으면 렌더링 할 수 없다!! 1 var scene = new THREE.S.. 2019. 3. 27. 이전 1 다음
