2

次のようなサンプル コードが与えられます。

<html>
    <body>
        <span id='canvas'></span>                 
    </body>

<script src="Three.js"></script>
<script>    
    var renderer = new THREE.CanvasRenderer();
    renderer.setSize(500, 500);
    document.getElementById('canvas').appendChild(renderer.domElement);

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(36, 1, 0.1, 3000);
    camera.position.set(0, 0, 50);
    scene.add(camera); 

    renderer.render(scene, camera);
    alert('0');
    foo();
    alert('3');


    function foo() {
        var x = new THREE.Mesh(new THREE.SphereGeometry(5, 5, 5), new THREE.MeshNormalMaterial());
        scene.add(x);
        renderer.render(scene, camera);
        alert('1');
        bar();
    }

    function bar() {
        var y = new THREE.Mesh(new THREE.CubeGeometry(20, 20, 20), new THREE.MeshNormalMaterial());
        scene.add(y);
        renderer.render(scene, camera);
        alert('2');
    }

</script>

</html>

(このサンプルは実際のプロジェクトの一部ではありませんが、問題を説明するのに役立ちます。) 目標は、ゼロ アラートが実行されたときに何も表示されず、最初のアラートの前に球体が表示され、前に立方体が表示されることです。 2番目のアラート。実際、すべてのレンダリングは 3 番目のアラートの後に実行されます。しかし、foo() と bar() から戻る前に結果が必要です。

レンダリングを実行するためにグローバル スコープ内にいる必要があるのはなぜですか?
関数を離れずにシーンをレンダリングする方法はありますか?

ご協力いただきありがとうございます。

4

1 に答える 1

0

おそらく、このコードはあなたが探している効果を提供しますか?

<script src="Three.js"></script>
<script>  

// insert global variable declarations here 
var loopNumber = 0;

init();
animate();

function init()
{
     // insert standard Three.js setup/initialization code here
}

function animate() 
{
    requestAnimationFrame( animate );
    render();       
    update();
}

function update()
{
    loopNumber++;
    if (loopNumber == 1)
        foo();
    if (loopNumber == 2)
        bar();
}

function render() 
{
    renderer.render( scene, camera );   
}
于 2012-08-08T00:01:05.180 に答える