본문 바로가기

반응형

Three.js

Three.js Dubug UI (dat.gui) 오늘은 기본적인 Dubug UI 에 대해 알아 보겠다. https://threejs.org/examples/#webgl_animation_skinning_blending 공식 사이트에 있는 예제들 중 오른쪽 상단에 저런 높이 등 객체의 속성 조절, on off 등 다양한 속성들을 조절 할 수 있는 기능에 대해 알아 보겠다. 바로 dat.gui 라는 패키지인데 npm install --save dat.gui 설치 해준 뒤에 import * as dat from 'dat.gui' // 불러오기 const gui = new dat.GUI(); // 객체 생성 이제 gui 변수명의 저 객체를 사용해주면 될텐데 한가지 주의점이 우리가 저 디버그 툴로 관리해줄 객체가 만들어지고 난 뒤에 gui 객체로 관리해줘야 한.. 더보기
Three.js 여러 객체 Group으로 렌더링 하기 하나의 박스만 만들어서 렌더링을 해보았는데 이제 한번에 여러 3D 박스등 한번에 렌더링 하는것을 해보겠다. const scene = new THREE.Scene() const group = new THREE.Group(); scene.add(group); 객체들을 그룹으로 관리해줄 컨테이너? 개념의 Group객체를 만들어서 각각의 박스 혹은 담아줄 객체들을 그룹에 담아서 그룹을 scene에 담아주면 된다. const cube1 = new THREE.Mesh( new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial({color:0xff0000}) ) const cube2 = new THREE.Mesh( new THREE.BoxGeometry(1,1,1), n.. 더보기
Three.js 객체 변화주기(position, axesHelper(), scale, rotation ) 이번엔 저번에 만든 3d 객체의 위치를 이동시켜 보면서 익숙해져 보겠다. set() 함수를 이용하면 일일이 x,y,z 값을 하나 하나 정해주지 않고 한 번에 정의해줄 수 있다. mesh 생성후 mesh.position.x = 0.7; mesh.position.y = -0.6; mesh.position.z = 1; // 하나 하나 정의 mesh.position.set(0.7,-0.6,1) // 한 방에 정의 또 position.length(), position.distanceTo()등의 함수도 있는데 개체와 인자로 넣어준 객체 간의 거리를 나타낼 때 쓴다. console.log(mesh.position.distanceTo(camera.position)) 그 다음 axis 즉 x,y,z 축들을 기반으로 위치.. 더보기
Three.js와 첫 3D 객체 만들어보기 우연히 지인을 통해 Three.js 를 알게 되었다. Three.js 는 쉽게 말해 브라우저에 3D 객체를 쉽게 렌더링 되도록 도와주는 자바스크립트 라이브러리이다. WebGL은 3D 랜더링을 위한 일반 개발환경의 OpenGL의 ES 2.0을 바탕으로 웹에서 구동 할 수 있게 제공한 기술로서 Three.js는 WebGL 기술을 기반으로 보다 간편하게 3D프로그래밍을 할 수 있게 해주는 라이브러리라고 생각하면 되겠다. https://threejs.org/ 위 사이트에 올라가있는 예제들 혹은 사이트들을 보면 나처럼 흥미가 생길 수 밖에 없을 것이다. 이제 간단한 큐브 모양의 3D객체를 만들어 볼텐데 그러기 위해서는 Three.js를 CDN으로 부르거나 혹은 직접 공식홈페이지에서 다운로드 받아 프로젝트 폴더에 .. 더보기

반응형