Forked from: siouxcitizen's Three.js r70(WebGL使用) 3Dモデルにマウスクリックイベントを追加 View Diff (37)

Fork
5
Fav
0
View
5062
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 459 lines
  • HTML 8 lines
  • CSS 10 lines
// forked from siouxcitizen's "Three.js r70(WebGL使用) 3Dモデルにマウスクリックイベントを追加" http://jsdo.it/siouxcitizen/rrPcp
3Dモデルのマウスクリックイベントを追加その2

前回のコードから、
勇者3Dモデル以外の3Dモデルについてもマウスクリックイベントを追加してみました
3Dモデルごとのイベントの振り分けを、動けばいいや方式でテキトーに実装したので
そのへん怪しいかもしれません

操作方法:
青ボタンで勇者キャラ左まわりにカメラが移動
赤ボタンで勇者キャラ右まわりにカメラが移動
黄色ボタンでカメラの距離を変更
緑ボタンでカメラの高さを変更
紫ボタンでカメラを元の位置へ移動
勇者3Dモデル、村長3Dモデル、マップ(マップ用Plane)、をクリックでメッセージが表示されます



引き続き以下のコード・サイトを参考にさせていただきました

Three.js でピッキング(3Dモデルをマウスで選択)してみた
http://tmlife.net/programming/javascript/threejs-picking.html

Three.js 3Dモデルをマウスでクリック(ピッキング処理)
http://gupuru.hatenablog.jp/entry/2013/12/02/190413

多彩な表現力のWebGLを扱いやすくする「Three.js」 (5/5)
http://www.atmarkit.co.jp/ait/articles/1210/04/news142_5.html

JavaScript 3DレンダリングエンジンのThree.jsを試す
http://kray.jp/blog/three-js/

公式サイト?のサンプルも参考にしました
view-source:http://threejs.org/examples/webgl_interactive_cubes.html
  • Three.js r70(WebGL使用) 3Dモデルにマウスクリックイベントを追加2
  • Three.js r70(WebGL使用) 3Dモデルにマウスクリックイベントを追加2

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

siouxcitizen

Author

混沌としてきたので投稿コードをまとめてみました Naver : http://matome.naver.jp/odai/2142288467101177901

作業用BGMにYoutube動画を連続再生するプログラムもまとめてみました 直リンク : http://matome.naver.jp/odai/2143666226200730001 アーティスト別の再生動画の一覧付きリスト : http://matome.naver.jp/odai/2142630899820574901

旧ブログ : http://oretaikan.blog20.fc2.com 作りかけ新ブログ : http://oreorekaihatsu.blogspot.jp/

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by