THREE.jsについて

three.jsについて、一点ご質問がございます。
よろしければ、ご回答いただければ幸いでございます。

<html> <head> <title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="three.min.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        var render = function () {
            requestAnimationFrame(render);

            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;

            renderer.render(scene, camera);
        };

        render();
    </script>
</body>

</html>

上記コードを参考に、3Dのグラフィックを出力するプログラムを記述しようとしているのですが、
上記コードの var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
の部分の意味を、webでも調べてみたのですが、理解することができなかったため、
ご回答いただければと思い、投稿いたしました。
３Dグラフィックを作成し、表示するという目的に対し、
var geometry = new THREE.CubeGeometry(1,1,1);
で形を指定し、
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
で色を指定し、
renderクラスで画面表示をしてくれるという認識なので、
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
はいったい何をしてくれているのかという状態でございます。

不適切なご質問でしたら、誠に申し訳ございません。
よろしければ、ご回答いただければ幸いでございます。

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

回答2件

sceneオブジェクトはcanvasに表示するオブジェクトを管理するオブジェクトです。
sceneは映画やゲームのワンシーンをイメージしていただけると分かりやすいと思います。
画面上に映したいものをsceneに登録しておいて，sceneへのオブジェクトへの追加が終わったらrenderで描画するという構成になっています。
これは，オブジェクト指向的なメタ表現で直感的に理解しやすいことからThree.jsだけでなくゲームプログラミング用のフレームワーク等でもsceneという概念がよく使われます。
例えば，sceneをオブジェクトとして管理すると何が良いかと言うと，RPGなどのゲームなどで戦闘シーンなど全く違う場面に切り替えたい時sceneオブジェクトを破棄したり，劇的な場面の変化を表現したり，sceneの参照を付け替えるだけでscene切り替え前の状態を保存したりということができます。

投稿2016/05/09 07:49