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

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

ただいまの
回答率

90.52%

  • JavaScript

    16347questions

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

  • Three.js

    118questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 977

no23h

score 24

お世話になります。
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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

        function renderScene() {

            stats.update();

            // アニメーション
            step += controls.animSpeed;
            box.position.y = 5 + ( 15 * Math.abs(Math.sin(step)));

            // 追加
            camera.position.x = controls.cameraX;
            camera.position.y = controls.cameraY;
            camera.position.z = controls.cameraZ;

            requestAnimationFrame(renderScene); // アニメーション使用時に必ず定義。
            renderer.render(scene, camera); // カメラオブジェクトを渡してシーンを描画するようにレンダーに指示を与える。
        }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/11 00:19

    shuntksh様
    ご回答ありがとうございます。ご指示いただきました内容で試したところ、無事望んでいた動作になりました。lookAt()も続けて記述することで動作しました。
    Three.jsは勉強したてで手探り状態でしたので、本当に助かりました。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    16347questions

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

  • Three.js

    118questions

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