javascript - Three.js 在运行时不更新颜色以网格化

Question

好的，所以我正在尝试创建一个简单的程序，其中包含一个简单的动画，每 2 秒将交通灯的颜色从绿色变为红色，反之亦然，但颜色没有改变。

我已经尝试调试打印 bool 值的代码，应该使代码工作，结果是正确的，但颜色根本没有改变。我试图改变的网格是一个叫做 bombilla 的网格，我试图在 setInterval() 每两秒调用一次的 changeColor 函数中改变它

  var scene;
  var camera;
  var renderer;
  var cube;
  var cylinder;

  var red = 1;

  //Create the scene to draw
  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xf0f0f0 );

  //Create orthographic camera and add it to scene
  camera = new THREE.OrthographicCamera( window.innerWidth/-200, window.innerWidth/200, window.innerHeight/200, window.innerHeight/-200, 0.1, 1000 );
  scene.add( camera );

  //Create a renderer for the scene
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  cube = new THREE.BoxBufferGeometry( 1, 1, 1 );
  cylinder = new THREE.CylinderGeometry( 0.1, 0.1, 5, 100 );

  var carga =      new THREE.Mesh( cube, new THREE.MeshLambertMaterial( { color:0xA6A6A6 } ) );
  var cabina =     new THREE.Mesh( cube, new THREE.MeshLambertMaterial( { color:0xF2F2F2 } ) );
  var luna =       new THREE.Mesh( cube, new THREE.MeshLambertMaterial( { color:0xf0f0f0 } ) );
  var ventanilla = new THREE.Mesh( cube, new THREE.MeshLambertMaterial( { color:0xF6F6F6 } ) );
  var poste =      new THREE.Mesh( cube, new THREE.MeshLambertMaterial( { color:0x000000 } ) );
  var semaforo =   new THREE.Mesh( cube, new THREE.MeshLambertMaterial( { color:0x000000 } ) );
  var wheel1 =     new THREE.Mesh( cylinder, new THREE.MeshLambertMaterial( { color:0x000000 } ) );
  var wheel2 =     new THREE.Mesh( cylinder, new THREE.MeshLambertMaterial( { color:0x000000 } ) );
  var bombilla =   new THREE.Mesh( cylinder, new THREE.MeshLambertMaterial( { color:0xFF0000 } ) );

  scene.add( carga );
  scene.add(cabina);
  scene.add(luna);
  scene.add(ventanilla);
  scene.add(poste);
  scene.add(semaforo);
  scene.add(wheel1);
  scene.add(wheel2);
  scene.add(bombilla);

  var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
        light.position.set( 2, 1, 5 ).normalize();
        scene.add( light );

  var init = function()
  {
    //Move the camera to be able to see the object
    camera.position.z = 3;

    //Set the truck
    carga.rotation.y = 1;
    carga.rotation.x = 0.5;

    carga.scale.z = 1.5;

    //Set the cabin
    cabina.rotation.y = 1;
    cabina.rotation.x = 0.5;

    cabina.scale.x = 0.75;
    cabina.scale.y = 0.8;
    cabina.scale.z = 0.95;

    cabina.position.x = 0.7;
    cabina.position.y = -0.3;
    cabina.position.z = 0.35;

    //set the windshield
    luna.rotation.y = 1;
    luna.rotation.x = 0.5;

    luna.scale.x = 0.5;
    luna.scale.y = 0.3;
    luna.scale.z = 0.01;

    luna.position.x = 1.1;
    luna.position.y = -0.3;
    luna.position.z = 0.9;

    //set the window
    ventanilla.rotation.y = 1;
    ventanilla.rotation.x = 0.5;

    ventanilla.scale.x = 0.01;
    ventanilla.scale.y = 0.3;
    ventanilla.scale.z = 0.3;

    ventanilla.position.x = 0.7;
    ventanilla.position.y = -0.4;
    ventanilla.position.z = 2;

    //set the front wheel
    wheel1.rotation.y = 1;
    wheel1.rotation.x = 0.5;
    wheel1.rotation.z = 3.1415/2;

    wheel1.scale.x = 1;
    wheel1.scale.y = 0.02;
    wheel1.scale.z = 1;

    wheel1.position.x = 0.7;
    wheel1.position.y = -0.97;
    wheel1.position.z = 0.5;

    //set the back wheel
    wheel2.rotation.y = 1;
    wheel2.rotation.x = 0.5;
    wheel2.rotation.z = 3.1415/2;

    wheel2.scale.x = 1;
    wheel2.scale.y = 0.02;
    wheel2.scale.z = 1;

    wheel2.position.x = -0.5;
    wheel2.position.y = -0.65;
    wheel2.position.z = 0.;

    //set the traffic light stand
    poste.rotation.y = 1;
    poste.rotation.x = 0.5;

    poste.scale.x = 0.2;
    poste.scale.y = 1.5;
    poste.scale.z = 0.2;

    poste.position.x = 2;
    poste.position.y = 0;
    poste.position.z = 0;

    //set the traffic light
    semaforo.rotation.y = 1;
    semaforo.rotation.x = 0.5;

    semaforo.scale.x = 0.2;
    semaforo.scale.y = 0.7;
    semaforo.scale.z = 0.5;

    semaforo.position.x = 2.01;
    semaforo.position.y = 0.4;
    semaforo.position.z = 0;

    //set the light bulb
    bombilla.rotation.y = 1;
    bombilla.rotation.x = 0.5;
    bombilla.rotation.z = 3.1415/2;

    bombilla.scale.x = 1;
    bombilla.scale.y = 0.002;
    bombilla.scale.z = 1;

    bombilla.position.x = 1.95;
    bombilla.position.y = 0.35;
    bombilla.position.z = 0.8;
  };

  var changeColor = function ()
  {
    if(red == 1)
      {
        bombilla.material.color.set(0x0CAB00);
        red = 0;
      }
      else if(red == 0)
      {
        bombilla.material.color.set(0xFF0000);
        red = 1;
      }
  }

  var update = function()
  {
    setInterval(changeColor,2000);
  };

  var render = function()
  {
    renderer.render(scene, camera);
  };

  var GameLoop = function()
  {
    //requestAnimationFrame(GameLoop);
    init();
    update();
    render();
  };

  GameLoop();

Answer 1

目前您的代码存在两个主要问题。

requesteAnimationFrame() 被注释掉了，因此场景只会被渲染一次，永远不会再渲染一次，使得任何动画或对场景的更改都无关紧要。

更明显的问题是在动画循环中使用 setInterval 来控制何时更改 Material 颜色。您在每次帧更新时调用 setInterval。这意味着，两秒后， Material 将在每次帧更新时交换颜色。

相反，您需要做的是检测自上次更新以来是否已经过了两秒，然后才执行您的 changeColor 函数。

可以使用 THREE.Clock 轻松控制此逻辑

// global scope
var clock = new THREE.Clock(); //automatically starts clock

// update function
var update = function() {
  var time = clock.getElapsedTime(); // elapsed time since last reset
  if ( time > 2 ) {
    changeColor();
    clock.start(); // resets clock
  }
};

JSFiddle