![]()
#StandardMeterial빛이 무조건 존재해야 Mesh 오브젝트가 보임// 빛 생성하면 renderer에 추가 설정 필요const renderer = new THREE.WebGLRenderer({antialias: true}); // antialias : 박스 표면 부드럽게renderer. shadowMap.enabled = true; // Mesh에 그림자 생성 가능하도록 함renderer.setSize(window.innerWidth, window.innerHeight); // renderer 사이즈 설정document.body.appendChild(renderer.domElement) // 완성된 결과물을 html에 추가.....
# Three.js 시작하기 (1)[Three.js] Three.js 시작하기 (1)# Three.js란? - Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리 - WebGL을 쉽게 사용할 수 있도록 해주는 JS 기반 라이브러리 - WebGL 기술을 기반으로 랜더링과d0u0b.tistory.com# renderer,camera 설정* 기존 코드의 문제점- 영상에서 보이듯 창을 줄이면 오브젝트가 사라짐- 개발자 도구를 열고 새로고침 후 개발자 도구 닫으면 renderer 크기가 제대로 안잡힘* 해결 방법- 크기가 변경될 경우 이벤트 리스너를 걸어서 Camera, renderer 설정을 다시 잡아줌# main.js// 크기가 변경될 경우의 이벤트 ..
![]()
# Three.js란?- Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리- WebGL을 쉽게 사용할 수 있도록 해주는 JS 기반 라이브러리- WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있음# Three.js 를 사용하기 위한 기본 개념* CameraPerspectiveCamera- 원근감이 존재하는 일반적인 카메라OrthographicCamera- 원근감이 존재하지 않는 카메라fov : 시야각aspect : 카메라의 가로, 세로 비율near : 카메라가 가장 가까이 잡을 수 있는 곳far : 카메라가 가장 멀리 잡을 수 있는 곳* Scene- 배경 및 장면* Mesh- 배경, 장면에 올라..
