도형에 재질 추가하기

// 도형 여러개 추가 (생략)
const geometry = new THREE.TorusGeometry(0.3, 0.15, 16, 40)
const material04 = new THREE.MeshBasicMaterial({ color: 0xff7f00 })
const obj04 = new THREE.Mesh(geometry, material04)
scene.add(obj04)

도넛 모양의 도형을 여러 개 추가하였다. 이 도형에 입체감을 주기 위해 빛을 추가해 보자!

// 빛
const pointLight = new THREE.PointLight(0xffffff, 1)
pointLight.position.set(0, 2, 12)
scene.add(pointLight)

빛을 추가했는데 아무런 변화가 없다...

Material에는 여러 종류가 있는데, 그중에서도 빛에 영향을 받는 Material이 있고 빛의 영향을 받지 않는 Material도 있다. 
MeshBasicMaterial는 빛의 영향을 받지 않는 Material이므로 빛을 추가해도 아무런 변화가 없는 것이다.

 

빛의 영향을 받는 MeshStandardMaterial로 설정하니 좀 더 입체감 있는 도형으로 변경된 것을 확인할 수 있다.

// 두번째 도넛
const material05 = new THREE.MeshStandardMaterial({ color: 0xff7f00 })
const obj05 = new THREE.Mesh(geometry, material05)
obj05.position.x = -1
scene.add(obj05)

Three.js에서는 다양한 Material를 제공하고 있다.

https://threejs.org/docs/#api/en/materials/LineBasicMaterial

three.js docs

아래는 여러 Material를 적용해본 모습이다.

const geometry = new THREE.TorusGeometry(0.3, 0.15, 16, 40)
const material04 = new THREE.MeshBasicMaterial({ color: 0xff7f00 })
const obj04 = new THREE.Mesh(geometry, material04)
obj04.position.x = -2
scene.add(obj04)

const material05 = new THREE.MeshStandardMaterial({ color: 0xff7f00 })
const obj05 = new THREE.Mesh(geometry, material05)
obj05.position.x = -1
scene.add(obj05)

const material06 = new THREE.MeshDepthMaterial({ color: 0xff7f00 })
const obj06 = new THREE.Mesh(geometry, material06)
obj06.position.x = 0
scene.add(obj06)

const material07 = new THREE.MeshLambertMaterial({ color: 0xff7f00 })
const obj07 = new THREE.Mesh(geometry, material07)
obj07.position.x = 1
scene.add(obj07)

const material08 = new THREE.MeshPhongMaterial({ color: 0xff7f00 })
const obj08 = new THREE.Mesh(geometry, material08)
obj08.position.x = 2
scene.add(obj08)

 

참고

https://designbase.co.kr/category/threejs-course/

Three.js | 디자인베이스