Three.js

WebGLでブラウザ上の3D表現を実現するJavaScriptライブラリ。移動式クレーン安全シミュレーターの3D描画に使っています。ゲームエンジンではなく軽さを取った理由と、荷振れを振り子モデルで表す設計を記録します。

Three.jsは、WebGLを利用してブラウザ上で3D表現を実現するJavaScriptライブラリです。BenriWorksでは、建設現場の安全教育向け「移動式クレーン安全シミュレーター」の3D描画に使用しており、荷振れのような物理現象の表現から現場シーンの構築までを担っています。

ゲームエンジンではなくThree.jsを選ぶ理由

3D教育コンテンツを作る選択肢としては、UnityなどのゲームエンジンをWebGLビルドで配信する方法もあります。それでもThree.jsを選んでいるのは、成果物の軽さと配信の自由度のためです。ゲームエンジンのWebGLビルドは数十MBのダウンロードが前提になりがちですが、Three.jsなら必要なコードとモデルだけを載せられ、現場のスマートフォン回線でも実用的な初期読み込みに収まります。Next.jsアプリの1ページとして自然に組み込めるため、教材ページとシミュレーターを同じサイト内で行き来させる構成も作りやすくなります。

引き換えに、物理・アニメーション・UIはすべて自前で組むことになります。この「自前で組む」部分こそが、開発記事として発信している知見の中心です。

物理表現は「現象の芯」だけを数式にする

クレーンの荷振れ表現では、汎用の物理エンジンを使わず、ブームの先端を支点とした振り子運動＋減衰という最小のモデルを自前実装しました。安全教育で伝えたいのは「旋回すると荷が遅れてついてくる」「急停止すると振れが残る」という現象の芯であり、それは振り子の運動方程式だけで再現できます。汎用エンジンを使うより挙動が安定し、「この揺れはどのパラメータから来るのか」を教育的に説明できることが利点です。この設計と検証は開発記事「Three.jsでクレーンの荷振れを表現する」で公開しています。

スマートフォンで動かすための画作り

現場での利用を想定すると、描画性能の下限は低価格帯のスマートフォンになります。クレーンシミュレーターがローポリゴン・フラットシェーディング寄りの画作りなのは、この下限で実用的な応答を保つためです。写実性を上げるほど教育効果が上がるわけではなく、「どの操作がどの結果を生んだか」が視認できることのほうが重要だ、というのが運用してみての実感です。

Three.jsによる物理表現・シーン設計の知見を探している開発者の参考になるよう、試した内容は数式とあわせて記事化していきます。