JavaScript three.js

[javascript]threejsで3D表示をしてみた。

概要

やれること :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.htmlthreeというフォルダを作ります。ちなみにフォルダ作成や名前は任意です。

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/

 

関連記事

[javascript]Three.jsでグリッド/カメラ設定(基本)

-JavaScript, three.js

© 2022 monz code Powered by AFFINGER5