Three.js_06 glTF 파일 불러오기

https://threejs.org/docs/index.html?q=gltf#examples/en/loaders/GLTFLoader 

three.js docs

https://youtu.be/qkag4hU5Xac

 

해보자.

1. 스케치팹 에서  gltf  파일을 받는다.

https://sketchfab.com/feed

Log in to your Sketchfab account

 

---

01. 이전  orbitControls 에서처럼 GLTFLoader를 불러온다

import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js'

 

02. gltf코드 추가

  //gltfloader
  const gltfloader = new GLTFLoader()
  const url = '../donny/scene.gltf'
  gltfloader.load(
    url,
    (gltf) => {
      const root = gltf.scene
      scene.add(root)
    }
  )

 

>app.js 전체

import * as THREE from 'three'
import { Scene } from 'three'
import { WEBGL } from './webgl'
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js'

if (WEBGL.isWebGLAvailable()) {
  //장면
  const scene = new THREE.Scene();
  //배경색 바꾸기
  scene.background = new THREE.Color(0x004fff)

  //카메라
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z =3

  //캔버스
  // const canvas = document.querySelector('#c')

  //렌더러
  const renderer = new THREE.WebGLRenderer({
    alpha : true,
    antialias : true
  })
  renderer.setSize(window.innerWidth, window.innerHeight)

  document.body.appendChild(renderer.domElement)
  //controls
  const controls = new OrbitControls( camera, renderer.domElement )

  //Light
  const pointLight = new THREE.PointLight(0xffffff, 1)
  pointLight.position.set(0,2,12)
  scene.add(pointLight)

  //gltfloader
  const gltfloader = new GLTFLoader()
  const url = '../donny/scene.gltf'
  gltfloader.load(
    url,
    (gltf) => {
      const root = gltf.scene
      scene.add(root)
    }
  )

  //render
  function render(time) {
    time *= 0.001;  // convert time to seconds
   
    renderer.render(scene, camera);
   
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  //반응형 처리
  function onWindowResize(){
    camera.aspect = window.innerWidth/window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  window.addEventListener('resize', onWindowResize)
  

} else {
  var warning = WEBGL.getWebGLErrorMessage()
  document.body.appendChild(warning)
}

 

npm run serve

음 .. 빛과 카메라 다시 수정

 

  //카메라
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z =3
  scene.add(camera)


  //Light
  const pointLight = new THREE.PointLight(0xffffff, 1)
  pointLight.position.set(0,2,12)
  // scene.add(pointLight)
  camera.add(pointLight)