Three.js Cannon.es 調査資料 - はじめに
はじめに
「ブラウザで物理シミュレーション」というのをきっかけに、調査、試行錯誤したものを記します。
ここ最近ウェブ技術から遠ざかっていたこともあり、JavaScriptの最新技術を 1 から勉強・確認しつつ、物理エンジン（cannon.js）でできることを模索しています。
公式 example の車モデルや国土地理院の地形データを見て、
「ビーナスラインを走れるんじゃないか？」
と思い至りこれを当面の目標とします。
具体的には、
国土地理院からダウンロードしてきた地形データ（標高データと地図画像）と
物理エンジンの車モデル RaycastVehicle モデルを使って、
ビーナスライン～美ヶ原（大門峠～霧ヶ峰～和田峠～落合大橋～武石川方面）
の地形を再現しつつ、ドライブすることを目指します。
ネタ自体少々遅きに失した感は否めないですが、逆にすでにいろいろな資料がありふれており教材には事欠かないので、なるべく他の方とは別の視点でアプローチしたいと思います。
主要技術
ウェブブラウザでの3D表現として、検索でよくヒットする Three.js を用います。
有用なことは公式のオンライン資料やデモから確認できます。
一方、物理エンジンの選定にはやや迷いましたが cannon.es を選択します。
主な採用理由は以下の通り。
- サンプルが充実していること
- 個人での作成デモが多いこと
- 手始めに学習するのに難度が高くない
- 特別な環境が不要ですぐに始められる
参考資料として、次を紹介します。
開発環境
開発環境の構築には
- ICS様「フロントエンドの知識地図」（書籍）
- ICS様 TypeScriptで始めるNode.js入門
- ICS様 VS Codeを使いこなせ!フロントエンジニア必須の拡張機能7選
を参考に Visual Studio Code 上で環境を構築しました。
環境を構築し、使い方をひととおり確認しましたが、使いこなす程には理解が及ばず、この環境で機能をフル活用できていないです。
当初 TypeScript でやるぞと意気込んでいたものの、初学者にはささいなエラーを修正するにも四苦八苦。識者が周りにいないことから気軽に問合せすることもできない状況。既存のコード、他者のサンプルコードとすり合わせるに苦労するので、結局、ライブラリ自体は cannon.es を使いつつも cannon.js っぽい使い方で、JavaScript をべた書きすることしました。
なので環境自体は TypeScript で開発できる環境を整えつつも、実際は JavaScript をべた書き。
開発環境の機能も、ローカルなウェブサーバ機能（Live Server）のみを使うという使い方に甘んじてます。
学習資材
Three.js については公式のデモや ICS 様で学習させていただきました。
- threejs 公式 examples
- threejs 公式 デモのリンク・右フレーム内
- ICS様 簡単なThee.jsのサンプルを試そう
- ICS様 Three.js入門サイト
- cannon 公式 examples
Three.js, cannon.es の学習にあたり、モチベーション高く学習を継続するために、
個人的興味から、車モデル（RigitVehicle, RaycastVehicle）のサンプルコードをベースに
改造していくことにします。
Discussion