ThreeJS 기초

게시 2022/11/30

By 6 분읽는 시간

첫 시작은 HTML 파일 생성과 JS파일 생성부터

HTML

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test</title>
    <style>
        body {
            margin: 0;
        }
    </style>
    <script type="module" src="js/index.js" defer></script>
</head>
<body>
</body>
</html>

JS

CDN Import

three.js 를 CDN을 통해 import먼저 시켜주자

  
import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js";

Three.js를 구성하는 3가지 요소 생성 (Scene, Camera, Renderer)

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

let scene, camera, renderer;

const init = () => {
  scene = new THREE.scene();
  camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
  renderer = new THREE.WebGLRenderer();
};

init();

처음에 사용할 변수를 미리 선언해준다.

WIDTH, HEIGHT : 화면의 가로길이, 세로길이

scene, camera, renderer : 화면, 카메라, 렌더러 변수 미리 생성

init() : 초기에 실행될 함수를 한번에 정의 시켜주는 함수

기본 3가지요소에 대한 내용 설정하고 animate 함수,

  
const init = () => {
  // 화면 생성
  scene = new THREE.Scene();

  // 카메라 설정
  camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
  camera.position.set(50, 50, 50); // 카메라 포지션 설정

  // 렌더링 설정
  renderer = new THREE.WebGLRenderer({ antialias: true }); //안티앨리싱 온
  renderer.setSize(WIDTH, HEIGHT); // 렌더링 사이즈 설정
  renderer.setClearColor("#000000"); // 배경설정
  document.body.appendChild(renderer.domElement);
};

// 애니메이션 조절 함수
const animate = () => {
  camera.lookAt(scene.position);
  //장면의 위치를 바라봄
  camera.updateProjectionMatrix();
  //변경된 값을 카메라에 적용한다

  renderer.render(scene, camera); // 렌더링 시작
  requestAnimationFrame(animate); // 프레임 단위로 애니메이션 실행
};

init();
animate();

카메라 설정 : 카메라의 경우 다양한 카메라의 종류가 있다. 위의 코드에는 PersectiveCamera를 사용했다.

  
camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
camera.position.set(50, 50, 50);

Three.JS에서 카메라에대한 정보 : https://threejs.org/manual/#ko/cameras

렌더링 설정 : 렌더링을 통해 해당요소를 출력한다.

  
renderer = new THREE.WebGLRenderer({ antialias: true }); //안티앨리싱 온
renderer.setSize(WIDTH, HEIGHT); // 렌더링 사이즈 설정
renderer.setClearColor("#000000"); // 배경설정
document.body.appendChild(renderer.domElement);

animate : three.js에서 화면이 동작하게 만들어주는 역할이다.

  
const animate = () => {
  renderer.render(scene, camera); // 렌더링 시작
  requestAnimationFrame(animate); // 프레임 단위로 애니메이션 실행
};

helper 요소들 추가해주기

  
const help = () => {
  const axes = new THREE.AxesHelper(50);
  scene.add(axes);

  const gridHelper = new THREE.GridHelper(20, 20);
  scene.add(gridHelper);
};

help();

AxesHelper : x , y , z 축 표시
gridHelper 해당 영역을 사각형으로 표시

structure 요소 추가하기

  
let boxMesh;
----

const structure = () => {
  const geometry = new THREE.BoxBufferGeometry(10, 10, 10);
  const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
  boxMesh = new THREE.Mesh(geometry, material);
  scene.add(boxMesh);
};

geometry : 형태를 의미
material : 재질을 선택할 수 있음

ligth 요소 추가하기

  
const light = () => {
  const HemisphereLight = new THREE.HemisphereLight(0xc0daf5, 0xc0daf5, 0.3);
  HemisphereLight.position.set(-50, 50, -50);
  scene.add(HemisphereLight);

  const spotLight = new THREE.SpotLight(0x000000);
  spotLight.position.set(60, 60, 60);
  scene.add(spotLight);
};

strucure , light 요소 init() 함수 안에 넣어주기

  
const init = () => {
.
.
.

structure();
light();
}

full code

  
import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.146.0/three.module.js";

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

let scene, camera, renderer;

let boxMesh;

const init = () => {
  // 화면 생성
  scene = new THREE.Scene();

  // 카메라 설정
  camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
  camera.position.set(50, 50, 50);

  // 렌더링 설정
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(WIDTH, HEIGHT);
  renderer.setClearColor("#000000");
  document.body.appendChild(renderer.domElement);

  // 요소 생성
  structure();

  // 조명 생성
  light();
};

// 요소 항목
const structure = () => {
  const geometry = new THREE.BoxBufferGeometry(10, 10, 10);
  const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
  boxMesh = new THREE.Mesh(geometry, material);
  scene.add(boxMesh);
};

// 조명 설정
const light = () => {
  const HemisphereLight = new THREE.HemisphereLight(0xc0daf5, 0xc0daf5, 0.3);
  HemisphereLight.position.set(-50, 50, -50);
  scene.add(HemisphereLight);

  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(60, 60, 90);
  scene.add(spotLight);
};

// 에니메이션 설정
const animate = () => {
  camera.lookAt(scene.position);
  //장면의 위치를 바라봄
  camera.updateProjectionMatrix();
  //변경된 값을 카메라에 적용한다

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};

// 헬퍼 설정
const help = () => {
  const axes = new THREE.AxesHelper(50);
  scene.add(axes);

  const gridHelper = new THREE.GridHelper(70, 20);
  scene.add(gridHelper);
};

init();
help();
animate();

Threejs

threejs js