Question

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

它有点工作，但我没有得到平滑的结果......我认为一个好的策略是在旋转期间 - 单个面的左上角和右上角顶点的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();

Answer 1

我同意，看这个位置可能不是最好的方法。如果你关注角度，那么角度应该是你的焦点。基本上你想让你的测试基于旋转与最大旋转 - 当你超过那个时，根据需要停止并调整（在这种情况下，它有时是＆gt; 1，具有angleChange的数量，所以我只是把它重置为1）。

而不是上面的动画功能，试试这个 - 看起来它对我来说非常可靠。

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

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

1 个答案: