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

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

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

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

JavaScript

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

解決済

Three.jsのdat.GUIが動作しない。

no23h
no23h

総合スコア49

Three.js

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

JavaScript

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

1回答

0評価

0クリップ

3246閲覧

投稿2017/04/09 05:17

お世話になります。
Three.jsのdat.GUIについて質問させてください。
カメラのポジションをシュミレーションするために、dat.GUIでcameraX、cameraY、cameraZを定義しています。
ブラウザではGUIも正常に表示されるのですが、スライダーを動かしても変化がありません。
カメラポジション以外にボックスジオメトリのアニメーションも定義しておりますが、こちらは正常に動作します。
原因がわからず困っております。
どなたかアドバイスをいただけないでしょうか。

以下コードを全て記述いたします。

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.3/dat.gui.min.js"></script> <style> body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hidden; } </style> </head> <body> <div id="Stats-output"></div> <div id="WebGL-output"></div> <script type="text/javascript"> var scene; var camera; var renderer; function init() { var stats = initStats(); // 統計情報を初期化 /* GUI ******************************************** */ var controls = new function() { this.cameraX = 50; this.cameraY = 50; this.cameraZ = 50; this.animSpeed = 0.03; } var gui = new dat.GUI(); gui.add( controls, 'cameraX', 0, 100 ); gui.add( controls, 'cameraY', 0, 100 ); gui.add( controls, 'cameraZ', 0, 100 ); gui.add( controls, 'animSpeed', 0.03, 0.60 ); /* ************************************************* */ /* 1. シーンオブジェクトを作成。 ※シーンオブジェクトは表示したい全ての物体と光源を保持して変更を監視するコンテナのようなもの。 */ scene = new THREE.Scene(); /* 2. カメラオブジェクトを作成。 ※カメラオブジェクトはシーンを描画する時に何が見えるかを決定する。 */ camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // カメラのプロパティを設定する camera.position.x = controls.cameraX; camera.position.y = controls.cameraY; camera.position.z = controls.cameraZ; camera.lookAt(scene.position); /* 3. レンダーオブジェクトを作成。 ※レンダーオブジェクトはカメラオブジェクトの角度に基づいて、シーンオブジェクトがどのように見えるか計算する。 */ renderer = new THREE.WebGLRenderer(); // WebGLRenderer()のプロパティを設定 renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true; //シーンに影を描画する /* 4. 物体を生成する。 */ // 補助軸を追加する。 var axes = new THREE.AxisHelper(50); scene.add(axes); // プレーンジオメトリを作成する。 var planeGeometry = new THREE.PlaneGeometry(100, 100); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; plane.rotation.x = -0.5 * Math.PI; // X軸を基準に-90度回転。 plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; scene.add(plane); // シーンに追加する // ボックスジオメトリを作成する。 var boxGeometry = new THREE. BoxGeometry(10, 10, 10); var boxMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff}); var box = new THREE.Mesh( boxGeometry, boxMaterial); box.castShadow = true; box.position.x = 0; box.position.y = 5; box.position.z = 0; scene.add( box); // 光源を設定する var spotLight = new THREE.SpotLight(0xffffff); spotLight.castShadow = true; spotLight.position.set(30, 60, 60); spotLight.castShadow = true; scene.add(spotLight); /* 5. レンダラの出力 */ // レンダラの出力をHTML要素に追加する。 document.getElementById("WebGL-output").appendChild(renderer.domElement); var step = 0; renderScene(); function renderScene() { stats.update(); // アニメーション step += controls.animSpeed; box.position.y = 5 + ( 15 * Math.abs(Math.sin(step))); requestAnimationFrame(renderScene); // アニメーション使用時に必ず定義。 renderer.render(scene, camera); // カメラオブジェクトを渡してシーンを描画するようにレンダーに指示を与える。 } /* stats ******************************************* */ function initStats() { var stats = new Stats(); stats.setMode(1); // 0: fps(フレーム数), 1: ms(描画時間) stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } /* ************************************************* */ } window.onload = init;
// ブラウザサイズ変更に合わせて出力をリサイズ function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // リサイズ関数を有効にする window.addEventListener('resize', onResize, false);
</script> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Three.js

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

JavaScript

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