three.js / 3D Model 추가해보자

코딩/자바스크립트

three.js / 3D Model 추가해보자

민여 2022. 6. 3. 16:30

유튜브 출처: https://www.youtube.com/watch?v=CojyGfCMvuU

깃헙 링크: https://github.com/minyeokang/three

3d 애니메이션 라이브러리로 동적인 웹 구현해보기

내가 요즘 캔버스 공부하고 이런 애니메이션 플러그인 알아보고있었는데

마침 내사랑 코딩애플 선생님이 three.js 이용해서 3d 그래픽 렌더링하는걸 올려주셨다

따라해보자!

1.sketchfab에서 무료 3d glTF파일 다운로드

glTF이란? GL Transmission Format // JSON기반 3차원 장면과 모델을 표현하는 파일 포맷

2.기본셋팅

html에 canvas 그려주고

npm으로 three.js 설치하던지 cdn쓰던지 하고 import해오기

//나는 npm안쓰고 그냥 강의대로 따라하기로 함

<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.141.0/build/three.module.js",
          "GLTFLoader": "https://unpkg.com/three@0.141.0/examples/jsm/loaders/GLTFLoader.js"
        }
      }
    </script>
    <script type="module">
      import { GLTFLoader } from "GLTFLoader";
      import * as THREE from "three";
    </script>
  </body>

3.그려보자

3D model을 브라우저에 보여주려면

장면을 만들고 브라우저에 렌더링해달라고 하면 되는데

장면을 만드는걸 let scene = new THREE.Scene();

브라우저에 렌더링하는걸 let renderer = new THREE.WebGLRenderer();

장면에 추가하려면 scene.add()

렌더링하려면 renderer.render(scene)

(pixi랑 비슷한 맥락)

let scene = new THREE.Scene();

let renderer = new THREE.WebGLRenderer({
canvas : document.querySelector('#canvas')

})
scene.add()
renderer.render(scene)

인데 gltf는 loader로 업로드 해줘야함

let loader = new GLTFLoader();
        loader.load('shiba/scene.gltf', function(gltf){
            scene.add(gltf.scene)
            renderer.render(scene)
        })

//두번째인수에 콜백넘겨서 받아온 파일을 그려줌

근데 이렇게 해도 안그려지는게

3D model 보여줄때 필요한게

1.카메라

let camera = new THREE.PerspectiveCamera(30, 1);
camera.position.set(0,0,5)

//renderer.render에 camera도 추가해주기

2.배경

scene.background = new THREE.Color('white');

3.조명
let light = new THREE.DirectionalLight(0xfff00, 10);

그리고 계단현상 방지위해 antialias: true 해주고

색이 달라보이는거 해결하기 위해 renderer.outputEncoding = THREE.sRGBEncoding;입력

애니메이션 주려면 아까 canvas할때 썼던

requestAnimationFrame 쓰면됨

let loader = new GLTFLoader();
loader.load("shiba/scene.gltf", function (gltf) {
        scene.add(gltf.scene);
        function animate() {
          requestAnimationFrame(animate);
          gltf.scene.rotation.y -= 0.1;
          renderer.render(scene, camera);
        }
        animate();
});

여기서 마우스 컨트롤하려면 orbitcontrols로 하는데 일단은 여기까지!