Three.js：使用 SetTimeOut 为启动后 5 秒在场景中生成的灯光位置设置动画

Question

在使用 SetTimeOut 延迟后，我成功地在我的场景中生成了光。这工作非常好。但就我而言，我想为这盏灯添加动画属性。我怎样才能做到这一点？如果我为不存在的元素编写动画属性，three.js 会在启动时崩溃。如果我写一个 SetTimeOut 属性（就像我在场景中为我的灯光所做的那样），我会在浏览器控制台上收到此错误："light2 is not defined".

这是一个例子：

var scene = new THREE.Scene();

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 10);

var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( -150, 0, 15 );
scene.add( light );
      
var geometry = new THREE.BoxGeometry( 1.5, 1.5, 1.5 );
var material = new THREE.MeshPhysicalMaterial( { color: 0xffffff } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
   
   
setTimeout(function() {
var light2 = new THREE.PointLight( "hsl(358, 100%, 45%)", 1, 100 );
light2.position.set( 0, 0, 15 );
scene.add( light2 );
}, 5000);   
 
var animate = function () {
 
requestAnimationFrame( animate );

cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
    
light.position.x += 0.5;
 
setTimeout(function() {
  light2.position.x += 0.5;
}, 5001);
 
renderer.render(scene, camera);
 
};
 
animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<head>
<meta charset="utf-8">
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>

<body>
</body>

非常感谢。

Answer 1

在外部作用域中声明 var light2;：

var light2;         
setTimeout(function() {
    light2 = new THREE.PointLight( "hsl(358, 100%, 45%)", 1, 100 );
    light2.position.set( 0, 0, 15 );
    scene.add( light2 );
}, 5000);

然后在使用前检查是否设置：

setTimeout(function() {
    if (light2) {
        light2.position.x += 0.5;
    }
}, 5001);

Three.js：使用 SetTimeOut 为启动后 5 秒在场景中生成的灯光位置设置动画

Three.js : using SetTimeOut to animate position of a light spawned on scene 5 seconds after startup

settimeout

three.js