gpt4 book ai didi

javascript - 在 ThreeJS 中立即渲染

转载 作者:行者123 更新时间:2023-11-30 06:41:03 24 4
gpt4 key购买 nike

给定这样的示例代码:

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

为什么我们必须在全局范围内才能执行渲染?
有没有什么方法可以在不离开功能的情况下渲染场景?

感谢您的帮助。

最佳答案

也许这段代码会提供您正在寻找的效果?

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

关于javascript - 在 ThreeJS 中立即渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11272765/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com