Question

给出这样的示例代码：

<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（）返回之前得到一个结果。

为什么我们必须在全球范围内执行渲染？
是否有任何方法可以在不离开函数的情况下渲染场景？

感谢您的帮助。

Answer 1

也许这段代码会提供你想要的效果？

<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 );   
}

在ThreeJS中立即渲染

1 个答案: