(해당페이지를 공부하며, 옮겨적은 요약정리 입니다.)
Renderer: Scene과 Camera를 넘겨 받아 카메라의 절두체 안 3D씬의 일부를 평면이미지로 렌더링하는 객체, 입력한 데이터를 실제로 canvas에 그려주는 역할!
Scene Graph: Scene 또는 다수의 Mesh, Light, Group, Object3D, Camera로 이루어진 트리 구조
Scene: 씬 그래프의 최상위 노드로서 배경색(background color), 안개(fog) 등의 요소를 포함
Camera: Camera는 다른 객체와 달리 씬 그래프에 포함될 필요가 없음
Mesh: 어떤 Material로 하나의 Geometry를 그리는 객체
Material: 기하학 객체를 그리는데 사용하는 표면 속성
Texture: 기하학 객체의 표면을 이미지로 덮어줄 때 사용
Geometry: 기하학 객체의 정점 데이터
Light: 여러 종류의 광원
주의: type="module"을 포함하면 인터널 스크립트에서도 import 모듈을 사용할 수 있습니다. 예:
<script type="module"> /* 여기에 코드를 작성하세요 */ </script>
.
1) Three.js 로드!
2) renderer 생성
3) 카메라 생성
4) Scene 생성
5) Geometry & Material 생성
6) Mesh로 그리기
7) Scene에 mesh 객체 추가
function render(time) {
time *= 0.001; // convert time to seconds
cube.rotation.x = time;
cube.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
}
const material = new THREE.MeshPhongMaterial({color: 0x44aa88}); // greenish blue
MeshBasicMaterial은 빛을 반사하지 않음
MeshPhongMaterial은 빛을 반사!