お世話になります。
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;
</script> </body> </html>// ブラウザサイズ変更に合わせて出力をリサイズ function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // リサイズ関数を有効にする window.addEventListener('resize', onResize, false);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/10 15:19