【重要】サービス終了のお知らせ

Forked from: siouxcitizen's Three.js r70(WebGL使用) でPlaneによるマップの遷移機能を追加 View Diff (320)

Fork
1
Fav
0
View
3929
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 747 lines
  • HTML 8 lines
  • CSS 10 lines
// forked from siouxcitizen's "Three.js r70(WebGL使用) でPlaneによるマップの遷移機能を追加" http://jsdo.it/siouxcitizen/9cWS
前回のコードから
①3Dモデルのクリック判定部分を修正しました(しかばねのクリック反応がまだイマイチですが。。。)
②CreateJS部分のインターフェースを修正しました
③3Dオブジェクト削除について修正しました
④3Dオブジェクトへの光沢設定を修正しました

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



■①のクリック判定の修正については下記サイト・コードを参考にさせていただきました

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

Three.jsを使って、作ってみた
http://gupuru.hatenablog.jp/entry/2013/12/02/190413

three.js / docs Reference Core Object3D
http://threejs.org/docs/#Reference/Core/Object3D

https://threejsdoc.appspot.com/doc/three.js/src.source/core/Ray.js.html

■②のCreateJS部分のインターフェースの修正については下記サイト・コードを参考にさせていただきました

CreateJSのMotionGuidePluginでモーショントゥイーン
http://jsdo.it/umeyoshioka/qSXQ

akihiro kamijo EaselJS のマウスイベント処理
http://cuaoar.jp/2012/03/easeljs.html

kudox.jp EaselJS ver 0.7で変更されたイベント処理を理解しよう
http://kudox.jp/java-script/createjs-easeljs-event

■③3Dオブジェクト削除の修正ついては下記サイト・コードを参考にさせていただきました
あまりよく理解できなかったので、自分の修正した部分がホントに機能しているのかどうかよくわかってませんが。。。

three.js の Mesh を削除する
http://qiita.com/yomotsu/items/7be847bf2fd08335e8b1

three.jsでmeshの追加削除を繰り返し行うとメモリ使用量が増えていくのを修正したい
http://qa.atmarkit.co.jp/q/3083

THREE.Scene クラスの remove メソッド
http://ginpro.winofsql.jp/article/271817132.html

Three js memory management
http://stackoverflow.com/questions/13914959/three-js-memory-management

Memory leak with three.js and many shapes
http://stackoverflow.com/questions/12945092/memory-leak-with-three-js-and-many-shapes

■④3Dオブジェクトへの光沢設定の修正ついては下記サイト・コードを参考にさせていただきました

Three.jsを使って、作ってみた 今回は、Three.jsの「マテリアル(材質)のプロパティ」について書きます。
http://gupuru.hatenablog.jp/entry/2013/12/08/215106

にゃあプロジェクト [three.js] ライト (1) ~MeshPhongMaterial, MeshLambertMaterial~
http://blog.project-nya.jp/1931

  • Three.js r70(WebGL使用) でCreateJSもつかってインターフェースまわりを修正
  • Three.js r70(WebGL使用) でCreateJSもつかってインターフェースまわりを修正

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