ブログ記事内でthree.jsスクリプトを動かしたい -

three.jsを使うようになった経緯
3Dテストができるようなテンプレートを作成
テスト環境の確認

three.jsを使うようになった経緯

以前から自分のサイトで3DCGを扱いたいと思っていました。ある時、Verge3Dを見つけて「おっ！欲しかったのはこれかも」と思い、さっそくライセンスを購入して、見様見真似でキャラを作り始めました。

後でわかったのですが、Verge3DはThree.jsを基盤とした3Dライブラリで、プログラムコードを書かずに作品が作成できるよう、ノードベースのビジュアル・スクリプト・エディタなど多彩な機能を備えたツールです。

使っていくうちに、確かにPuzzles（上記のエディタ）は便利だなとは思いつつも、じれったさも感じました。元々Python好きでコードを書くのに抵抗がない私としては、パズルのピースを並べるよりも、普通のエディタでjavascriptコードをガシガシ書き込んでいくやり方の方が好きだな、と思うようになったのです。毎年のライセンス更新料もちょっと痛かったです。

Verge3Dで開発したmmToolのスクリプトの大半は、Three.jsのサンプルコードを元にしたものです。コーディングの際、元のスクリプトの「THREE」の部分を「V3D」に置き換え、ちゃんと動くかどうか注意しながら書きました。

そういうことがあって、「この先の3Dコンテンツは、いっそのことThree.js一つでやっていこう」という気持ちになったのです。

3Dテストができるようなテンプレートを作成

このサイトはHugoという静的サイトジェネレータを使っています。記事はマークダウン形式のテキストで書きますが、Hugoは文章だけでなくHTMLやjavascriptのコードも受け付けて、ブラウザで表示できるhtmlファイルを出力してくれます。

ここで、Three.jsの出力が表示できるようにするためのコードをまとめて、テンプレートとして保存したいと思います。

準備（html, css, js）

htmlに結果表示用のDivを設けます。スクリプト・タグでthreejsをインポートします。個々の記事のmdファイルにその都度書き込むか、どのページでも必ずthreeライブラリを読み込むようにするかは、しばらく様子を見てから決めましょう。

html
<div class="mlnTest" id="mlnOutput"></div>

css
.mlnTest {
    width: 598px;
    height: 415px;
    margin: 40px auto;
    }

html内に
<script type="importmap"> { "imports": { "three": "/js/three/three.module.min.js" } } </script>

※ 開発用ブラウザについて：
例えば筆者が日記用で使っているFalkonなど、importmapに対応していないブラウザもあるようです。開発ではマイナーなブラウザは使わない方が良さそうですね。

※ ’three.module.min.js’は同じディレクトリに’three.core.min.js’がないとエラーが出るので、ダウンロードパッケージからコピーしておきました。理由はそのうち調べましょう。

環境をセットアップ

これから開発していくいろいろなthree.jsスクリプトを試すための、実行環境を作るスクリプトをhtmlで指定しておきます。

<script type="module" src="/js/three/mln.js"></script>

mln.jsの中身：

/* mln.js */

'use strict';
import * as THREE from 'three'
import { OrbitControls } from "./jsm/controls/OrbitControls.js"

// 環境準備...............................................................
//----------------------------------
// SCENE, CAMERA, RENDERER, CONTROL
//----------------------------------

// シーンとグリッド
const scene = new THREE.Scene()
const grid = new THREE.GridHelper(10, 10, 0x000000, 0x000000)
grid.material.opacity = 0.1
grid.material.transparent = true
scene.add(grid)

// カメラ
const fov = 30,
      ratio = 598 / 415,
      near = 0.1,
      far = 1000,
      camera = new THREE.PerspectiveCamera( fov, ratio, near, far)
camera.position.set(0, 0.25, 4.5)
camera.lookAt( 0, 0, 0 )
scene.add(camera)

// レンダラー
const container = document.getElementById("mlnOutput")
const renderer = new THREE.WebGLRenderer({ 
                        antialias: true,
                        preserveDrawingBuffer: true })
renderer.setSize(598, 415)

container.appendChild(renderer.domElement)
renderer.setClearColor( 0xffffff, 0)
camera.updateProjectionMatrix()

// オービット・コントロール
const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener( 'change', ()=>{　camera.updateProjectionMatrix(); renderer.render(scene, camera)} )
controls.update()

// シーンのレンダリング
renderer.render(scene, camera)
// 環境準備ここまで........................................................
export { scene, grid, camera, renderer, controls }

テスト環境の確認

灰色のグリッド線が現れたら成功です。マウスをぐりぐり動かしてグリッドが動くのを確認します。

△

threejs