three.js3 [Three.js ] Three.js dat.GUI를 이용해보자 dat.GUI를 이용해보자 dat.GUI는 구글의 엔지니어들이 만든 라이브러리로, dat.GUI가 생성 한 패널 부분에서 매개 변수를 변경하면 이미지의 위치, 크기, 회전 속도 등을 동적으로 반영할 수 있도록 한다. ( 일단 재밌다 ) 페이지의 우측 상단에 있는 UI가 dat.GUI를 실행하면 나타난다!!! script 추가 https://threejs.org/ 사이트에서 파일을 다운로드한다. 다운로드한 파일(three.js-master) > examples > js > libs > dat.gui.min.js를 사용하면 된다. 객체 추가 화면 안의 sphere를 X축, Y축, Z축 이동과 크기를 조절하려고 한다. controls의 초기값을 설정한다. 처음 화면이 로드되었을때 기본값으로 사용된다. sphe.. 2019. 5. 6. [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 다음
