three.js Light 객체 사용하기

// Light
const ambientLight = new THREE.AmbientLight('white', 0.5);
scene.add(ambientLight);

const light = new THREE.DirectionalLight('white', 0.5);
light.position.y = 3;
scene.add(light);

const lightHelper = new THREE.DirectionalLightHelper(light);
scene.add(lightHelper);

...

// Geometry
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const boxGeometry = new THREE.BoxGeometry(1,1,1);
const sphereGeometry = new THREE.SphereGeometry(0.7, 16, 16);

// Material
const material1 = new THREE.MeshStandardMaterial({ color: 'white' })
const material2 = new THREE.MeshStandardMaterial({ color: 'royalblue' })
const material3 = new THREE.MeshStandardMaterial({ color: 'gold' })

// Mesh
const plane = new THREE.Mesh(planeGeometry, material1);
const box = new THREE.Mesh(boxGeometry, material2);
const sphere = new THREE.Mesh(sphereGeometry, material3);
scene.add(plane, box, sphere);

plane.rotation.x = -Math.PI * 0.5;
box.position.set(1,1,0);
sphere.position.set(-1,1,0);

...

// Dat GUI
const gui = new dat.GUI();
gui.add(light.position, 'x', -5, 5);
gui.add(light.position, 'y', -5, 5);
gui.add(light.position, 'z', -5, 5);

각 도형 mesh를 생성하고, light를 추가해보자.

ambient light과 directional light를 추가한 상태에서 gui를 통해 directional light 객체를 움직여보자.

 

Directional Light의 좌표를 gui로 움직이며 확인해보자. 말그대로 직선광이기 때문에 범위 외 혹은 반대쪽으로는 빛이 향하지 않는다. 

 

// Light
const ambientLight = new THREE.AmbientLight('white', 0.5);
scene.add(ambientLight);

const light = new THREE.DirectionalLight('white', 0.5);
light.position.y = 3;
scene.add(light);

const lightHelper = new THREE.DirectionalLightHelper(light);
scene.add(lightHelper);

...

// Geometry
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const boxGeometry = new THREE.BoxGeometry(1,1,1);
const sphereGeometry = new THREE.SphereGeometry(0.7, 16, 16);

// Material
const material1 = new THREE.MeshStandardMaterial({ color: 'white' })
const material2 = new THREE.MeshStandardMaterial({ color: 'royalblue' })
const material3 = new THREE.MeshStandardMaterial({ color: 'gold' })

// Mesh
const plane = new THREE.Mesh(planeGeometry, material1);
const box = new THREE.Mesh(boxGeometry, material2);
const sphere = new THREE.Mesh(sphereGeometry, material3);
scene.add(plane, box, sphere);

plane.rotation.x = -Math.PI * 0.5;
box.position.set(1,1,0);
sphere.position.set(-1,1,0);

...

// Dat GUI
const gui = new dat.GUI();
gui.add(light.position, 'x', -5, 5);
gui.add(light.position, 'y', -5, 5);
gui.add(light.position, 'z', -5, 5);

function draw() {
    // const delta = clock.getDelta();
    const time = clock.getElapsedTime(time);

    light.position.x = Math.cos(time) * 5;
    light.position.z = Math.sin(time) * 5;

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

draw함수에 위와 같이 삼각함수를 이용한 원 모양 애니메이션도 넣을 수 있다.