작업에 시작하기에 앞서 fog(안개)를 뜻하는 건 정말 뿌연 연기자체를 만드는 것이 아닌
원근감 효과를 주기 위해 멀리 떨어져 있는 mesh가 안개가 낀것처럼 뿌옇게 보이는 효과를 의미한다!
해당 코드는 ⭐️ 구역만 수정된 부분으로 해당 구역만 집중해서 보면 된다!
mesh 배열 생성
<script>
// Camera
const camera= new THREE.PerspectiveCamera(
75, //시야각$
window.innerWidth / window.innerHeight, //종횡비
0.1, //near
1000 //far
);
camera.position.y = 1; ⭐️
camera.position.z = 5; // 5m라고 가정
scene.add(camera);
//light
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.x = 1; ⭐️
light.position.y = 1; ⭐️
light.position.z = 5;
scene.add(light);
// ~~~ 중간 생략 ~~~
// draw 함수에서 위로 회전하면서 반복되는 효과는 삭제 ⭐️
</script>작업하기에 앞서 카메라의 위치와 조명의 위치를 변경 및 추가해주었고,
현재 단락에서 필요없는 draw 함수내에 MESH가 위로 움직이며 회전하는 반복문 코드는 삭제 처리해주었다.
<script>
// Mesh
const geometry = new THREE.BoxGeometry(1,1,1); // 1m * 1m * 1m를 의미
const material = new THREE.MeshStandardMaterial({
color:'#f00000'
});
⭐️
const meshes = [];
let mesh;
for(let i = 0; i < 10; i++){
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
meshes.push(mesh);
}
⭐️
</script>일단 여러개의 mesh들이 필요하기 때문에 mesh 변수를 전체적으로 수정해줍니다!
여러개의 mesh가 필요로 하기에 상수로 meshes라는 배열을 담는 변수를 선언해줍니다!
그 후 mesh 변수를 선언해주고, for을 사용하여 10번 반복되는 반복문을 만들어줍니다.
앞서 선언해준 mesh변수에 threeJS의 기능인 Mesh를 사용해 geometry, material를 넣어 mesh를 10개 생성해주고,
빈 배열인 meshes에 반복문으로 생성되는 mesh를 넣어(push)줍니다. 그리고
scene(무대)에 add를 사용하여 추가된 mesh를 넣어줍니다.
그리고 나서 확인을 해주면 10개의 mesh가 딱 하고 나타나는게 아니라 같은 공간에 10개의 mesh가 생성되기 때문에 시각적으로 차이가 없습니다!
<script>
const meshes = [];
let mesh;
for(let i = 0; i < 10; i++){
mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5; ⭐️
mesh.position.z = Math.random() * 5; ⭐️
scene.add(mesh);
meshes.push(mesh);
}
</script>그래서 이렇게 mesh의 x값과 z(앞,뒤)값을
Math (자바스크립트에서 수학 관련 함수와 상수를 제공하는 내장 객체 )객체를 사용,
Math객체의 random함수를 이용하여 랜덤하게 위치값을 설정해준다!
여기서 5는 0에서 5까지의 값중에 위치시키로 한다는 뜻이다!
하지만 이렇게 설정할 경우 아래와 같이 이미지가 가운데를 기준으로 우측으로 쏠린 것처럼 노출된다
그 이유는 Math.random() * 5;와 같이 random값을 5로 설정하여 0에서5까지라는 기준이 되었기 때문에 중간의 값인 0에서 +값은 우측으로만 mesh가 랜덤 생성된 것이다!
mesh.position.x = Math.random() * 5 - 2.5; ⭐️
mesh.position.z = Math.random() * 5 - 2.5; ⭐️ 그래서 해당 코드를 5의 절반 값인 -2.5를 해준다면
랜덤의 값이 -2.5에서 +2.5까지로 설정되어 왼쪽 오른쪽 골고루 분포되게 된다!
<script>
// Camera
const camera= new THREE.PerspectiveCamera(
75, //시야각$
window.innerWidth / window.innerHeight, //종횡비
0.1, //near
1000 //far
);
camera.position.y = 1; ⭐️
camera.position.z = 5; // 5m라고 가정
scene.add(camera);
//light
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.x = 1; ⭐️
light.position.y = 1; ⭐️
light.position.z = 5;
scene.add(light);
// ~~~ 중간 생략 ~~~
// draw 함수에서 위로 회전하면서 반복되는 효과는 삭제 ⭐️
</script>fog 생성
<script>
// Scene
const scene = new THREE.Scene();
scene.fog = new THREE.Fog('blue',1,7);⭐️
</script>fog를 생성해주는데! 안개는 해당 무대에 전체적으로 깔리는 것이기에 scene에 설정해준다!
scene.fog에서 fog는 Three.js에서 안개 효과를 적용하기 위해 공식적으로 정의한 속성으로
fog는 반드시 정해진 이름이어야 Three.js 엔진이 안개 처리를 해줍니다.
foggy처럼 마음대로 이름을 붙여도 Three.js는 무시합니다
그리고 Three.js의 기능인 Fog를 사용
new THREE.Fog('blue',1,7);
첫번째 매개변수의 인자로는 색상, 두번째와 세번째는 near와 far이다.
결과물은 위의 이미지와 같이 노출된다! 노란 박스와 같이 파란색 안개(그라데이션)가 깔리는 걸 확인할 수 있다! 이때 안개 색상을 배경색과 동일하게 작업해주면 원근감을 딱 느낄 수 있는 결과값이 나타난다!
new THREE.Fog('black',1,7);
draw 함수를 활용한 애니메이션
<script>
const meshes = []; ✅
let mesh;
for(let i = 0; i < 10; i++){
mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
scene.add(mesh);
meshes.push(mesh);
}
//그리기
const clock = new THREE.Clock();
function draw() {
const delta = clock.getDelta();
⭐️
meshes.forEach(item => {
item.rotation.y += delta;
});
⭐️
renderer.render(scene, camera);
renderer.setAnimationLoop(draw);
};
</script>draw 함수를 활용해서 mesh에게 회전효과를 넣어주려고 한다.
위에 선언해두었던 ✅, meshes를 forEach 반복문을 활용해, item이라는 매개변수를 선언해주어서
meshes 배열의 각 요소(item)를 한 번씩 반복하며 함수를 실행, 요소에 rotation y값을
이전에 정리했던 getDelta를 활용한 delta를 += 적용시켜 회전하도록 설정하였다.
