[Three.js] 3DモデルのGLBをブラウザで表示する簡単HelloWorld

Three.jsで扱う3Dモデルフォーマットは、glTFというフォーマットがいいらしいという事で、このデータを読み込むようにするプログラムは意外と簡単に構築できる。データフォーマットの参考: https://ics.media/tutorial-three/model_basic/ 尚、前回構築したThree.jsの環境構築に追加するような形で読み込むので、自分で環境構築が出来ない人はそちらの記事を先に読んでおくとわかりやすいでしょう。前回記事 : [Three.js] 静的HTMLにThree.jsライブラリをセットする初期設定

ソースコード

index.htmlとstyle.cssは、前回記事と同じモノです。

main.js

import * as THREE        from "three"
import { OrbitControls } from "OrbitControls"
import { GLTFLoader }    from "GLTFLoader"

class Main{
  width  = window.innerWidth
  height = window.innerHeight

  constructor(){
    this.mixer    = null
    this.renderer = new THREE.WebGLRenderer()
    this.clock    = new THREE.Clock()
    this.scene    = new THREE.Scene()
    this.texture  = new THREE.Texture()
    this.set_renderer()
    this.set_camera()
    this.set_grid()
    this.set_light()
    this.set_ambient()
    this.render()
    this.load_model()
  }

  get root(){
    return document.body
  }

  set_renderer(){
    this.renderer.setSize(this.width, this.height)
    this.root.appendChild(this.renderer.domElement)
    this.renderer.setClearColor(0x444444, 1) //背景色を設定
  }

  set_camera(){
    this.camera  = new THREE.PerspectiveCamera( 20, this.width/this.height, 1.0, 1000 )
    this.camera.position.set(-50, 50, 50)
    const center_pos = new THREE.Vector3({x:0, y:0, z:0})
    this.camera.lookAt(center_pos)
    this.control = new OrbitControls(this.camera, this.root)
  }

  set_grid(){
    this.gridHelper = new THREE.GridHelper(50, 50, 0x888800)
    this.scene.add(this.gridHelper)
  }

  set_light(){
    const color_light = new THREE.Color("#ffffff")
    this.light = new THREE.DirectionalLight(color_light, 1.0)
    this.light.position.set(10,10,10 ).normalize()
    this.scene.add(this.light)
  }

  set_ambient(){
    const color_ambient = new THREE.Color("#ff8800")
    this.ambient = new THREE.AmbientLight(color_ambient , 1,0)
    this.scene.add(this.ambient)
  }

  render() {
    requestAnimationFrame( this.render.bind(this) )
    if (this.mixer){this.mixer.update(this.clock.getDelta())}
    this.renderer.render(this.scene, this.camera)
  }

  load_model(){
    const loader = new GLTFLoader()
    loader.load(
      "monkey.glb",
      this.loaded_model.bind(this),
      function (xhr){
        console.log((xhr.loaded / xhr.total * 100 ) + '% loaded')
      },
      function (error){
        console.log('An error happened')
      }
    )
  }
  loaded_model(gltf){
    const mesh = gltf.scene;
    mesh.scale.set( 5, 5, 5 );
    mesh.rotation.y = -Math.PI/4;   
    let animations = gltf.animations;
    if ( animations && animations.length ) {
      mixer = new THREE.AnimationMixer( mesh );
        for ( let i = 0; i < animations.length; i ++ ) {
          let animation = animations[ i ];
          mixer.clipAction( animation ).play();
        }
    }
    this.scene.add( mesh );
  }
}

new Main()

解説

前回のjavascriptソースと違う箇所（追加箇所）の文字を変えておきました。上部の、"this.load_model()"は、glbファイルを読み込むための起動処理です。 GLTFLoaderライブラリを新たに読み込んで、 const loader = new GLTFLoader() とインスタンス実行をすることで、loaderを作り、その次に、loader.load()と関数を実行すると、その中で引数として指定したglbファイルを読み込みます。 load()関数の仕様は次の通りです。 load( "読み込むファイルのパス" , function(読み込まれた3Dデータ){読み込み後の処理})

[Three.js] 3DモデルのGLBをブラウザで表示する簡単HelloWorld

ソースコード

main.js

解説

関連リンク