Three.js 사용방법 (세팅,배경과 카메라 설정 ,렌더)

three.js에 공식 사이트 문서다.

생각보다 복잡한 라이브러리라 참고해야 된다

https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

three.js docs

threejs.org

1. three.js설치와 세팅방법

npm설치, cdn으로 뭐 방법은 여러 개다

이 글에서는 cdn으로 세팅하는 방법을 작성하겠다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style> body { margin: 0; overflow: hidden;}  </style> <!--css조절-->
</head>
<body>
    <script type="importmap">
        {
          "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.min.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/"
          }
        }
    </script>
    <script type="module" src="./main.js"></script> <!-- ✅ three.js를 코딩할 경로-->
</body>
</html>

importmap은 브라우저에서 자바스크립트 모듈을 가져올 때 특정 경로를 정의
해준다고 하는데 잘은 모르겠고 importmap을 타입에 적고 하면 브라우저가 js파일에
import * as THREE from "three"; 와 같이 npm으로 설치 안 해도
import문를 브라우저에서 인식해 주는 것 같아 보인다

2. three.js코드 작성 (배경, 카메라, 렌더러)

2-1. 배경과 카메라 설정

import * as THREE from "three";

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // 배경색 바꾸는 코드다
//scene.background = new THREE.Color("blue"); 이렇게도 사용 가능하다 
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
//인자값 시야각,종횡비,절단면1,절단면2 이다

여기서 PerspectiveCamera()를 정리하자면 한국어로는 관점 카메라라고 나온다

카메라를 세팅하는 코드인데 각 인자값이 뭘 의미하는지 적자면

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

첫 번째 fov는 카메라의 시야각을 뜻한다

한 70~80 해주면 괜찮게 보인다

조절해 주면 높을수록 보이는 부분이 많아진다

두 번째 aspect 종횡비라고 하는데 화면의 가로, 세로 비율 이런 거 같다

window.innerWidth / window.innerHeight 이거를 넣어주면 된다

세 번째로 near와 far은 거리 감각 같은 것 같다

0.1~1000 거리 사이의 물체만 렌더링 한다고 하는데 near값을 크게 하면 가까운 물체가

사라지고 far값을 작게 하면 멀리 있는 배경이 잘려 보인다고 한다

(아직은 이해가 약간 안 된다.. 상황마다 조절해 보면서 알아야 될 듯하다)

2-2. 렌더러 설정

const canvas = document.querySelector("#canvas")
const renderer = new THREE.WebGLRenderer({
    canvas:canvas, // 해당 three.js가 돌아갈코드를 지정하는거다 (위에 쿼리셀렉터로 지정해준 곳으로 들어감)
    alpha:true, //배경에 투명도를 뜻한다 new THREE.Color(0x87CEEB);  배경색상을 없애면 나오는듯 하다다
    antialias:true //안티엘리어싱싱
});

렌더링 하는 방식을 지정해 주는 듯하다

마지막으로 three.js 캔버스 사이즈를 설정해 주는 코드를 작성해 주겠다

renderer.setSize(window.innerdth, window.innerHeight); //캔바스 사이즈 설정
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera); //이게 있어야 장면이랑 카메라가 뜨는듯

setSize를 통해 크기를 설정해 주면 된다.

코드 상에서 브라우저 크기대로 뛰우도록 작성하였다

마지막에 renderer.render(scene, camer)가 있어야 캔버스가 제다로 출력되어 브라우저에 나온다!

(빼먹으면 안 나옵니다 이 코드는요!)

3. 카메라 위치 설정하는 법

three.js 좌표의 구성을 아래 이미지와 같다고 생각하면 된다

아래 코드에서 적힌 대로 camera.position.x 이렇게 사용하면 된다

좌표값대로 움직이게 된다

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//PerspectiveCamera 사용한 변수에다가 적용하면됨
camera.position.x = 0
camera.position.y = 0
camera.position.z = 1;

4.Geometries 사용하는 방법

const obj1 = new THREE.BoxGeometry(1,1,3); // 무슨 도형을 렌더링 할지 나타내는 코드이다
const mesh = new THREE.MeshStandardMaterial({ //도형의 재질과 색상을 뜻한다다
    color:"red"
})
const cube1 = new THREE.Mesh(obj1,mesh)
scene.add(cube1)

지오메트리의 경우 도형이 겁나게 많다

scene.add는 장면에 지오메트리를 넣어주는 거다

new THREE.Scene();에 추가해 준다고 생각하면 된다

해당 링크에서 크기나 세부적인걸 조절할 수 있다

https://threejs.org/docs/#api/en/geometries/BoxGeometry

three.js docs

threejs.org

지오메트리의 위치 조절도 카메라랑 같다

const obj1 = new THREE.BoxGeometry(1,1,2); // 무슨 도형을 렌더링 할지 나타내는 코드이다
const mesh = new THREE.MeshBasicMaterial({ //도형의 재질과 색상을 뜻한다
    color:"red"
})
const cube1 = new THREE.Mesh(obj1,mesh)
scene.add(cube1)

cube1.position.x = 1 // 위치 조절 하는방법

5. 애니메이션 사용하는 방법

function animate(){ 
    requestAnimationFrame(animate);//이 함수안에 있는거를 에니메이션작동 하게 해줌
      cube1.rotation.x += 0.01;
      camera.rotation.z +=0.01;
      renderer.render(scene, camera); //이게 있어야 장면이랑 카메라가 렌더링됨
}

animate();

reqiestAnimation에 인자값으로 함수를 넣어주면

렌더링 되고 애니메이션이 실행된다

6. 오늘 정리한 거 합친 템플릿 코드 (이거 복붙 하면 됨)

import * as THREE from "three";

const scene = new THREE.Scene();
scene.background = new THREE.Color("skyblue"); 

const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 22);


const obj1 = new THREE.BoxGeometry(1,1,2); // 무슨 도형을 렌더링 할지 나타내는 코드이다
const mesh = new THREE.MeshBasicMaterial({ //도형의 재질과 색상을 뜻한다다
    color:"red"
})
const cube1 = new THREE.Mesh(obj1,mesh)
scene.add(cube1)


camera.position.z = 5; 
cube1.position.x = 1
const canvas = document.querySelector("#canvas")
const renderer = new THREE.WebGLRenderer({
    canvas:canvas, // 해당 three.js가 돌아갈코드를 지정하는거다 (위에 쿼리셀렉터로 지정해준 곳으로 들어감)
    alpha:true, //배경에 투명도를 뜻한다 new THREE.Color(0x87CEEB);  배경색상을 없애면 나오는듯 하다다
    antialias:true //안티엘리어싱
});

renderer.setSize(1200,1200); //캔바스 사이즈 설정
document.body.appendChild(renderer.domElement);


function animate(){ 
    requestAnimationFrame(animate);//이 함수안에 있는거를 에니메이션작동 하게 해줌줌
      cube1.rotation.x += 0.01;
      camera.rotation.z +=0.01;
      renderer.render(scene, camera); //이게 있어야 장면이랑 카메라가 렌더링됨
}

animate()

dev_note417