質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

612閲覧

Three.jsのコードで3D迷路だけを表示したいのですが、なかなかうまくいきません

tomeater

総合スコア15

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/08/31 18:19

編集2018/08/31 22:27

下記リンク先のThree.jsのコードで、迷路だけを表示したいのですが、なかなかうまくいきません、
迷路表示以外の関係ないのは全部取り払って3D迷路だけ表示でシンプルにしてみたいです。(恐竜とかは要らないのですが・・・。)

どこを消してどこを取り出せばいいのかご教示お願いします。

コードはこちらです。
https://codepen.io/MSEdgeDev/pen/NpKejy
https://docs.microsoft.com/ja-jp/windows/uwp/get-started/get-started-tutorial-game-js3d

他にも、迷路の書き方はいろいろあると思いますが、
1,0だけで3D迷路を書くのが一番効率よい書き方だと思いました。
英語のサイトでも解説等を探したのですが今のところ見つかりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

loader.load の部分が恐竜のモデルの読み込み部分になります。既存のコードは読み込みが完了した後に、animate() の呼び出しを行っている為、モデルの読み込みを行わない場合は、別途 animate() を呼ぶ必要があります。
また、恐竜のモデルを読み込まない場合は、animateDino() の呼び出しは不要になるのでコメントアウトしてみて下さい。

js

1// Set up the game 2function init() { 3 4/* 5 // load the dino JSON model and start animating once complete 6 loader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/515428/dino.json', function (geometry, materials) { 7 8 9 // Get the geometry and materials from the JSON 10 var dinoObject = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials)); 11 12 // Scale the size of the dino 13 dinoObject.scale.set(DINOSCALE, DINOSCALE, DINOSCALE); 14 dinoObject.rotation.y = degreesToRadians(180); 15 dinoObject.position.set(30, 0, -400); 16 dinoObject.name = "dino"; 17 scene.add(dinoObject); 18 19 //position.setFromMatrixPosition(dino.matrixWorld); 20 dino = scene.getObjectByName("dino"); 21 22 // Model is loaded, switch from "Loading..." to instruction text 23 instructions.innerHTML = "<strong>Click to Play!</strong> </br></br> W,A,S,D or arrow keys = move </br>Mouse = look around"; 24 25 // Call the animate function so that animation begins after the model is loaded 26 animate(); 27 }); 28*/ 29 // Call the animate function so that animation begins after the model is loaded 30 animate(); 31 32 33}

js

1function animate() { 2 render(); 3 requestAnimationFrame(animate); 4 5 // Get the change in time between frames 6 var delta = clock.getDelta(); 7 // Update our frames per second monitor 8 9/* 10 // If the player is in dino's range, trigger the chase 11 var isBeingChased = triggerChase(); 12 // If the player is too close, trigger the end of the game 13 if (dino.position.distanceTo(controls.getObject().position) < CATCHOFFSET) { 14 caught(); 15 // Player is at an undetected distance 16 // Keep the dino moving and let the player keep moving too 17 } else { 18 animateDino(delta); 19 animatePlayer(delta); 20 } 21*/ 22 animatePlayer(delta); 23}

投稿2018/09/01 00:54

cx20

総合スコア4632

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomeater

2018/09/02 01:40

ありがとうございます。 一度コメントアウトして試してみます。
cx20

2018/09/02 07:10

参考までに迷路に不要なコードを削除したサンプルを作成してみました。 http://jsdo.it/cx20/wLcg
tomeater

2018/09/02 08:34

ありがとうございます。 今はマップの広さを大きくしようと試みているのですが、 まだ成功していません。 壁が原因でしょうか。 もし助言いただければ幸いに存じます。
cx20

2018/09/02 11:10 編集

マップを広くしてみました。 http://jsdo.it/cx20/a8Dr PerspectiveCamera の far(奥行き)の値が小さいと全体を表示しきれないので、2000 → 10000 に変更しています。
tomeater

2018/09/02 16:40

カメラだったんですね。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問