[Three.js] 静的HTMLにThree.jsライブラリをセットする初期設定

WebGLの代表的ライブラリである、Three.jsを手軽に使うための事前準備についての備忘録 Nodejsで使うのが標準らしく、npmでのインストール方法がスタンダードになっているので、スタンドアロンで導入する方法などを調査してメモしておくことにした。

CDNで環境設定

テスト環境などで手軽にThreee.jsを試せるので、以下のようにコードを書くことで、いとも簡単に実装することができる。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Three.js</title>
  <link rel="stylesheet" href="style.css" />
  <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",
        "OrbitControls" : "https://unpkg.com/three@0.139.2/examples/jsm/controls/OrbitControls.js",
        "DRACOLoader"   : "https://unpkg.com/three@0.139.2/examples/jsm/loaders/DRACOLoader.js"
      }
    }
  </script>
  <script type="module" src="main.js"></script>
</head>
<body></body>
</html>

main.js

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

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.set_object()
    this.render()
  }

  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)
  }

  set_object(){
    const mesh     = new THREE.BoxGeometry(3, 3, 3);// 立方体
    const material = new THREE.MeshLambertMaterial({color: 0x00ddff});// 影が表示される
    const cube     = new THREE.Mesh(mesh, material);// それらをまとめて3Dオブジェクトにします
    this.scene.add(cube);
  }

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

new Main()

セット完了

カメラとライトと必要なセットをして、Cubeオブジェクトを作って配置しておきました。 3Dとしてわかりやすいように、グリッド表示もしておきましたので、なんとなく3D空間として認識できるかと思います。

CDN環境設定カンタン解説

CDNを使った環境設定は、URLだけセットしてJavascriptを読み込めば良いというモノなのですが、 httpsの別ドメインなどからの読み込みは、javascriptでは、セキュリティが強く働いてしまうので、エラーになることが多い。今回は、htmlにscriptタグを書いて、"importmap"という定数のような定義をすることで、javascriptのimportの読み込み値を設定できる方法で記載している。単純にscriptタグに、urlを書いて事前に読み込む方式でもいいのだが、今後便利にclass構造でプログラム構築したいのであれば、この方式がいいと思われる。