Three js - tutorial

Three js를 다시 시작한 기념(?)으로 간단한 예제들로 시작을 했고

 

추후에 참고가 되기를 바라며 포스팅을 시작합니다

(사실 필자가 까먹을거 대비용으로..)

 

먼저 공홈에 나와있는 기본 예제+@를 시작으로 하면서 개념들을 집고 넘어갈 예정입니다

(기본 예제 링크 : https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)

 

index.tsx

import React from 'react';
import { useBasic } from 'src/custom_hooks';

const BasicExample = () => {
    const { ref } = useBasic();

    return (
        <div ref={ref} className='div_three' />
    );
};

export default BasicExample;

custom hook을 사용해서 바깥(?)에서는 ref만 사용할 수 있도록 만들어놨고

 

useBasic부분을 보면

 

use_basic.ts

import { useEffect, useRef } from "react";
import * as Three from "three";


const useBasic = () => {
    const ref = useRef<HTMLDivElement>(null);

    const width = window.innerWidth;
    const height = window.innerHeight;

    const scene = new Three.Scene();

    let camera: Three.PerspectiveCamera;

    let light: Three.AmbientLight;

    let renderer: Three.WebGLRenderer;

    let cube: Three.Mesh;

    useEffect(() => {
        if (ref.current !== null) {
            setRenderer();

            ref.current.appendChild(renderer.domElement);

            setCamaera();

            setLight();

            makeCube();

            animate();
        }
    }, [ref]);

    const setRenderer = () => {
        renderer = new Three.WebGLRenderer();

        renderer.setSize(width, height);
    };

    const setCamaera = () => {
        camera = new Three.PerspectiveCamera(75, width / height, 0.1, 1000);

        camera.position.z = 5;
    };

    const setLight = () => {
        light = new Three.AmbientLight(0xffffff, 5);
        scene.add(light);
    };

    const makeCube = () => {
        const geometry = new Three.BoxGeometry(1, 1, 1);
        const material = new Three.MeshMatcapMaterial({ color: 0x00ff00 });
        cube = new Three.Mesh(geometry, material);

        scene.add(cube);
    };

    const animate = () => {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

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

    return { ref };
};

export default useBasic;

먼저 개념을 하나씩 잡고 가겠습니다

 

1. scene : 사물, 공간, 빛, 카메라 등 렌더링 시킬 친구들(?)을 추가할 수 있는 기능입니다

2. camera : 렌더링 된 사물 등을 보여주는 기능입니다

3. light : 광원 역할을 해줍니다

4. mesh : 사물의 뼈대(?) 같은 역할로 삼각형, 사각형등 폴리곤들이 모인 물체입니다

4.1 geometry : 육면체, 삼각뿔, 도넛, 하트같은 도형을 설정해 줄 수 있습니다

4.2 material : 도형의 재질을 결정해주는 역할을 합니다

4.3 texture : 도형의 껍데기(?)를 입힐 수 있는 역할을 해줍니다

5. renderer : 위에 구현한 scene을 렌더링 해줍니다

 

이제 소스를 뜯어보면

 

div가 렌더링 된 시점에 renderer를 div 내부에 추가해주고

 

scene, camera, light, mesh 등을 넣어줍니다

 

그 후 계속 재귀를 돌고있는 animate 함수를 추가해줘야되는데

 

이 부분을 해주지 않으면 아무것도 볼 수 없는 상황이 생깁니다

 

이유는 아직 아무것도 렌더링 시키지 않아서 그렇습니다

 

추가로 basic material을 사용하면 재질이 빛을 반사하지 않아서 빛이 없는것처럼 느껴질 수 있습니다

< 구현된 기본 예제 코드 >

 

조금 더 자세한 내용을 보시려면 해당 링크를 참고해주세요

(링크 : https://threejs.org/docs/)

 

앞으로 구현할 때마다 간단한 내용과 함께 포스팅 할 예정입니다