[Three.js] Three.js 시작하기(3) : StandardMeterial, 빛, OrbitControls 설정

#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에 추가

...


// 빛 생성
const directionalLight = new THREE.DirectionalLight(0xffffff, 5);   // 색, 빛의 세기
directionalLight.castShadow = true;     // 그림자 생성
directionalLight.position.set(3,4,5);   // 빛의 위치 설정
directionalLight.lookAt(0, 0, 0);       // 빛이 어디를 바라볼 것인지 설정
scene.add(directionalLight);

// Mesh 오브젝트 생성
const geometry = new THREE.BoxGeometry(1,1,1);                  // 박스 오브젝트 생성
const material = new THREE.MeshStandardMaterial({color:0xff0000})  // StandardMaterial : 빛 필수(빛이 존재하지 않으면 보이지 않음)
// const material = new THREE.MeshBasicMaterial({color:0xff0000})  // 기본 오브젝트 스타일
const mesh = new THREE.Mesh(geometry, material);                // Mesh 오브젝트 생성
mesh.castShadow = true;     // 그림자 생성
mesh.position.y = 0.5;
scene.add(mesh);    // 생성한 오브젝트를 scene에 추가

# OrbitControls 설정

• 마우스 드래그를 이용하여 카메라 시점 변경할 수 있도록 함

import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"

.
.
.

// 마우스 드래그으로 카메라 시점 변경
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();

const render = () =>{
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();