three.js メッシュの立方体をグリグリ視点を変えれるようにする

HTML5に搭載されたwebGLを扱うためのライブラリthree.jsを使って立体物を表示、マウスで視点を操作できるようにしたサンプルです。

マウス視点操作にはTrackballControls.jsがありますが、Z回転が邪魔だったりで今回はOrbitControls.jsを利用。
・・・たぶん、パラメーターなどで制御できると思うのですが。

ヘッダータグに二つのjsを読み込む

javascriptはこんな感じ

結果イメージ

three
・マウスでグリグリ視点移動できます
・ipadなどのタッチ操作もできます

参考サイト

three.js公式
https://github.com/mrdoob/three.js/

OrbitControls.js
https://gist.github.com/mrflix/8351020

今回は、Three.jsの「OrbitControls.js」について書きます。
http://gupuru.hatenablog.jp/entry/2013/12/18/223629

今回は、Three.jsの「AxisHelper」をやります。
http://gupuru.hatenablog.jp/entry/2013/11/28/210633

WebGLメモ
http://www.mwsoft.jp/programming/webgl/

WebGL With Three.js – Lesson 3
https://www.script-tutorials.com/webgl-with-three-js-lesson-3/

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL