用于旋转长方体的three.js 动画逻辑答案

【问题标题】：three.js animation logic for spinning cuboids用于旋转长方体的three.js 动画逻辑
【发布时间】：2013-12-22 23:39:14
【问题描述】：

我正在尝试从 5 个长方体中的一个顶部创建一个长方体 - 每两秒旋转 180 CW 度。

它有点工作，但我没有得到顺利的结果......我认为一个好的策略是在旋转期间 - 单个面的左上角和右上角顶点的 z 位置将是比较 - 如果它们相同，那么是时候停止旋转周期了。

问题是顶点之间的差异永远不会为零..它非常接近于零...所以我检查它是否在 0.1 的边距内，因此我遇到了旋转开始卡住的问题因为有时它小于 0.1。有时，当它们应该停止时，旋转会继续，因为差异不小于 0.1。

var spinningPeriod = false, counter = 0, lastTime = 0;
function animate(){
    counter++;
    var time = (new Date()).getTime();
    var timeDiff = time - lastTime;
    var angleChange = 0.2 * timeDiff * 2 * Math.PI / 1000;

    if (counter%200==0 && counter > 0) {
        spinningPeriod = true;
    }
    if (spinningPeriod) {
       var v1 = cubes[0].geometry.vertices[0].clone();
       var v2 = cubes[0].geometry.vertices[3].clone();
       cubes[0].updateMatrixWorld();
       cubes[0].localToWorld(v1);
       cubes[0].localToWorld(v2);

       if (Math.abs(v1.x - v2.x) < 0.1) {
            spinningPeriod = false;
       } 

       for (var ii =0; ii<5; ++ii) {
        cubes[ii].rotation.y += angleChange;
       }
    }
    lastTime = time;
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
  }

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

  // camera
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;

  // scene
  var scene = new THREE.Scene();


  // cube
  var cubes = new Array();
  var currentHeight = -150;
  for (var ii =0; ii<5; ++ii) {
    cubes[ii] = new THREE.Mesh(new THREE.CubeGeometry(400, 50, 20));
    currentHeight += 50;
    cubes[ii].position.y = currentHeight;
    cubes[ii].overdraw = true;
    scene.add(cubes[ii]);
  }

  // start animation
  animate();

【问题讨论】：

标签： three.js webgl

【解决方案1】：

我同意，看位置可能不是最好的方法。如果你关心角度，那么角度应该是你的焦点。基本上你想让你的测试基于旋转与最大旋转 - 当你不止于此时，停止并根据需要进行调整（在这种情况下，有时角度变化量 > 1，所以我只是重置1).

代替上面的 animate 函数，试试这个 - 它看起来对我来说非常可靠。

var spinningPeriod = false, counter = 0, lastTime = 0;
var spinAngle = 0, spinMax = 1 * Math.PI;
function animate(){
    counter++;
    var time = (new Date()).getTime(),
        timeDiff = time - lastTime,
        speed = 0.2 * 2 * Math.PI / 1000,
        angleChange = speed * timeDiff;

    if (counter%200==0 && counter > 0) {
        spinningPeriod = true;
        spinAngle = 0;
    }
    console.log(counter, spinningPeriod, cubes[0].rotation.y / Math.PI);
    if (spinningPeriod) {
        spinAngle += angleChange;
        if (spinAngle > spinMax) {
            spinningPeriod = false;
            spinAngle = spinMax;
        }
        for (var ii =0; ii<5; ++ii) {
            cubes[ii].rotation.y = spinAngle;
        }
    }
    lastTime = time;
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
}

【讨论】：