티스토리 뷰

3D 웹 만들기/THREE.js

[THREE.js] 화면에 100개의 Mesh 를 뿌려보자!

한솔방울 2022. 12. 17. 01:39
반응형

안녕하세요!!

 

오늘은 THREE.js를 사용해서 화면에 100개의 Mesh를 랜덤하게 뿌려보는 소스를 작성해보려고 합니다.

 

강의를 통해 많이 배우긴 했지만.. 너무 내 지식이 아닌 것 같아서.. 다시 듣는 중이랍니다.

 

오늘은 간단하게 THREE.js를 사용, 똑같은 Mesh를 100개 만들어 x, y, z 값만 랜덤하게 배정하는 것을 해볼 것입니다!

index.html

 

우리는 box.js를 불러와 사용할 것으로, src설정, type='module'로 불러옵니다. 로컬에서 테스트를 하기 위해선 vscode의 extensitions에서 liveserver 를 설치하는것을 권장합니다!

 

// index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>박스 100개 랜덤뿌리기</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
        </style>
        <script src="./js/box.js" type="module" defer></script>
    </head>
    <body></body>
</html>

box.js

 

기본 설정을 진행해야 합니다. 우리는 THREE.js와 OribitControl을 사용할 예정이라 설치 말고 unpkg를 사용해서 불러올 겁니다.

 

import * as THREE from "https://unpkg.com/three@0.108.0/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/three@0.108.0/examples/jsm/controls/OrbitControls.js";

 

이렇게 불러와 사용할 것입니다.

 

우선 먼저 무대를 작업해야 합니다. 앞으로 scene은 무대라고 지칭하겠습니다. 우리가 사용할 mesh를 앞으론 배우 라고 하겠습니다.

 

배우가 연극을 하기 위해선 무대가 있어야 합니다. 우리는 100개의 배우를 만들것이고, 무대는 1개를 생성할 것입니다. 무대에서 배우는 서로 각자 다른 위치에 있을것인데, 배우들만 있고 무대가 없다면 우리는 공연을 볼 수 없을겁니다! 그렇기에 무대를 먼저 설정해줍니다.

 

scene = new THREE.Scene();
scene.background = new THREE.Color("#000000"); // 무대의 색상

 

자 이제 무대가 생성되었습니다. 근데 여기서 무대에 배우가 있고, 열심히 연극하는데 우리가 볼 수 없다면 의미가 있을까요? 그렇기위해선 우리가 볼 수 있게 우리의 눈 역할을 해줄 카메라가 필요합니다.

 

let WIDTH = window.innerWidth;
let HEIGHT = window.innerHeight;

camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
camera.position.set(0, 0, 150); // 카메라 위치 수정

 

자 카메라까지 설정이 끝났습니다. 카메라 다음엔 우리가 열심히 만들었던 카메라랑 무대를 화면에 보여주어야겠죠? 화면에 보여주는 방식은 두가지가 있습니다. html에 canvas를 정의해서 THREE.WebGLRenderer에 넣는 방식과 THREE.WebGLRender를 document.body에 추가하는 방식이 있습니다.

 

우리는 이번파트에선 간단하게 document.body에 추가해보도록 하겠습니다.

 

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);

document.body.appendChild(renderer.domElement);

 

여기까지 우린는 화면, 카메라, 무대를 세팅하였습니다. 여기서 개발에 유용한 OrbitControls를 추가해보려 합니다. OrbitControls가 뭐냐면 화면을 마우스로 제어할 수 있는 기능입니다. OrbitControls가 없이 화면을 띄우면 우리는 정적인 3D웹 화면을 보게됩니다. 마우스로 제어가 불가능하죠

 

그럼 위, 아래, 앞, 뒤를 확인하기위해 camera.position나 camera.rotation을 사용하게 될 것입니다. OrbitControls는 마우스를 통한 이런 편리한 기능을 제공합니다.

 

controls = new OrbitControls(camera, renderer.domElement);

 

OrbitControls는 이렇게만 해도 작동합니다!

 

그럼 이제 배우를 세팅해보도록 하겠습니다. 배우는 총 100개를 생성할 것이며 각각 x, y, z를 다르게 진행할 겁니다.

 

// 100개 반복문
for (let i = 0; i < 100; i++) {
    addBox(i);
    //console.log(i);
}

// 100개 생성
const addBox = (i) => {
	// 크기 지정 5, 5, 5
    const geometry = new THREE.BoxBufferGeometry(5, 5, 5);
    const material = new THREE.MeshLambertMaterial({
        color: 0xffffff, // 색상
    });
    const boxMesh = new THREE.Mesh(geometry, material);
    // - 200 ~ 200 까지 랜덤
    let x = Math.random() * 400 - 200;
    // let y = i * 5;
    let y = Math.random() * 400 - 200;
    let z = Math.random() * 400 - 200;
    boxMesh.position.set(x, y, z);
    boxMesh.rotation.set(0, y, 0);
    scene.add(boxMesh);
};

 

여기서 random() 에 -200을 하는 이유는 뭘까요? 우리가보는 웹의 width 가 1024px 라고 한다면 왼쪽0px 에서부터 오른쪽 1024px까지로 인식합니다.

 

하지만 canvas는 다르답니다. canvas의 0, 0, 0은 정중앙입니다. 정중앙에서 x축 방향으로 왼쪽은 - 이고 오른쪽은 + 입니다. 그럼 우리가 설정하는 x와 z, y 모두 +와 - 값을 갖고있어야합니다. 하지만 Math.random() * 200은 1부터 200까지의 숫자 즉, +인 양수만 나오게 됩니다.

 

그럼 canvas에서 오른쪽으로 배우들이 몰려있을겁니다. 우린 이것을 방지하기 위해 -200을 해주는 겁니다. 그럼 수의 범위는 -200 ~ 200이 될겁니다.

 

 

완성된 웹의 화면입니다. 초록색 선과 빨간색 선, 바닥에 칸은 전부 helper를 사용한겁니다. helper를 사용하면 가이드선을 제공받을 수 있어 개발에 유용하답니다.

 

100개의 배우는 모두 -와 +방향으로 생성이 된 모습을 볼 수 있습니다. 어떤가요? 쉽지않나요?

 

다음엔 기회가 된다면 100개의 이미지를 갖고있는 배우들을 x, y, z만 랜덤으로 변경 후 화면에 뿌려주고 스크롤로 줌, 아웃 해보는? 그런 웹 소스를 보여드리고자 합니다. 물론.. 내가 시간이 된다면..

 

뭐 많이 하는건 아닌데.. 뭔가 항상 시간이 없는.. 설명도 더 하고싶은데.. 이것이 ISFP? 하.. 

 

어렵다..

 

나만의 3D 웹 페이지들을 개발중인데, 다 되면 올려보도록 하겠습니다..

반응형

'3D 웹 만들기 > THREE.js' 카테고리의 다른 글

[THREE.js] three.js 살짝 맛보기 기초 #1  (1) 2022.11.27