#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();
'Framework > Three.js' 카테고리의 다른 글
[Three.js] Three.js 시작하기(2) : renderer, camera 설정 (0) | 2023.12.12 |
---|---|
[Three.js] Three.js 시작하기 (1) (0) | 2023.12.03 |