【３】Cubeで遊ぼう！ 経路探索編 - はじめてのthree.js | Xlune::Blog
はじめに 前回の記事ではthree.jsのCubeを迷路内で歩かせるものを作りました。 今回は別パターンの移動方法、経路探索を利用したマウスクリックベースの移動デモをやってみます。 下記は、今回用に書いたJSコードです。その他汎用ライブラリと合わせて読み込んでください。 FieldGenerator.js FieldStage.js MrCube.js RouteSearch.js フィールド生成 前回までは迷路が舞台でしたが、今回はマウスクリックベースの移動なので、戦略ゲームのようなフィールドを用意することにしました。 [Demo] Square_001 (WebGLRenderer or CanvasRenderer) [JSソース] マウスドラッグでフィールドの回転、マウスホイールでズームが行えます。 マウスのヒット判定 まずやらなければいけないのは、フィールドのどこをクリックしてい
【２】Cubeで遊ぼう！ Tweenアニメーション編 - はじめてのthree.js
はじめに 前回の記事ではthree.jsのCubeを使って迷路データを3Dで書きだすまでをやりました。 今回はその迷路の中を歩きまわるCube君を投入していきますよー。 ・・・その前に、JSコードがかさばるので前回分のコードは最適化して外部ファイルにしてます。事前に読み込んでください。 Maze.js Stage.js そして下記が、今回の開始時のスクリプトになります。 その他の外部ファイルは前回とほぼ同じですが "RequestAnimationFrame.js" だけ外してあります。 [Demo] Cube_001 (WebGLRenderer or CanvasRenderer) Cube_001 (CanvasRenderer) 配置と移動 壁と同じ要領で、Cubeを作って開始位置に設置します。また、矢印キーで上下左右に移動する実装もここで行っています。 [Demo] Cube_0
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
