次のようなサンプル コードが与えられます。
<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() から戻る前に結果が必要です。
レンダリングを実行するためにグローバル スコープ内にいる必要があるのはなぜですか?
関数を離れずにシーンをレンダリングする方法はありますか?
ご協力いただきありがとうございます。