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>

（此示例不是实际项目的一部分，但它有助于解释问题。）目标是在执行零警报时什么都看不到，然后在第一个警报之前看到一个球体，然后在之前看到一个立方体第二个警报。事实上，所有渲染都在第三次警报之后执行。但是我们需要在从 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 回答