目次
概要
やれること ：webブラウザ内でthree.jsを使って3D表示
読者対象 ：three.js入門者
必要時間 ：20分程度
必要条件 ：html＋javascriptの動作環境がある
筆者のスキルレベル
three.jsを初めて触るレベル
html＋javascriptも学習サイトで入門編を終えた程度
やりたいこと
今回やりたいことを簡単に図にすると以下の通り。
3Dモデルをwebブラウザで表示する。それだけです。
最終的にやりたいことはまた後日まとめようかなと思います。
事前準備
下記のgithubからthree.jsをダウンロードします。
https://github.com/mrdoob/three.js/tree/r111
今回three.js実装にあたり参考にさせてもらったサイトはES5(JavaScriptの仕様)用の記述だったため、ES6用に書き換えるのが私には困難だったためr111のthree.jsを使います。
最新をrev使うとES6になっているので「cannot use import statement outside a module threejs ~」のようなエラーが多数出ます。対処法は気が向けば書きます。
ダウンロードしたファイルを解凍するとthree.js-r110のフォルダが出てきます。
その中からthree.jsを使います。ちなみに下記の場所に格納されています。
three.js-r110 >> build >> three.js
次に今回作成するファイルを構築していきます。
適当なフォルダにindex.htmlとthreeというフォルダを作ります。ちなみにフォルダ作成や名前は任意です。
threeのなかに先程ダウンロードしたthree.jsを入れましょう。
それから、今回実装する3d_viewer.jsも作成しておきましょう。
ソースコード
まずはhtml
次はjs
実行結果
今回はとりあえず何も考えずにただ表示させることは成功しました。
ここからどんどん改良していきましょう。
今回参考にしたサイト
ics.media Three：https://ics.media/tutorial-three/quickstart/
three.js超入門 ：https://qiita.com/watabo_shi/items/bf9bcd4569b6d480c608
データプロ ：https://dp778.co.jp/blog/production/6743/