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

お世話になります。
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>

行動規範の内容に同意します

回答1件

ベストアンサー

Three.jsでの変更は基本的にanimation loopを通して明示的に行う必要があります。以下のように毎TickごとにCameraのプロパティをアップデートすれば、期待される動作になると思います。

js
1        function renderScene() {
2
3            stats.update();
4
5            // アニメーション
6            step += controls.animSpeed;
7            box.position.y = 5 + ( 15 * Math.abs(Math.sin(step)));
8
9            // 追加
10            camera.position.x = controls.cameraX;
11            camera.position.y = controls.cameraY;
12            camera.position.z = controls.cameraZ;
13
14            requestAnimationFrame(renderScene); // アニメーション使用時に必ず定義。
15            renderer.render(scene, camera); // カメラオブジェクトを渡してシーンを描画するようにレンダーに指示を与える。
16        }