javascript - 从 Three.js Cube 移除旋转动画

Question

我已经根据 Three.js 示例创建了一个 3D 线框立方体，但它一直在旋转，

我想停止这个动画。

现在，当我从脚本底部删除 animate(); 时， Canvas 不会加载。

// start animation
animate();
</script>

当我尝试从中删除 animate(); 函数时:

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

动画停止了，但它的形状很奇怪，但不是立方体的形状。同样在每次刷新时它都会改变形状。

这是我的代码:

Javascript:

    <script defer="defer">
  // revolutions per second
  var angularSpeed = 0.2; 
var lastTime = 0;

// this function is executed on each animation frame
function animate(){
    // update
    var time = (new Date()).getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    cube.rotation.y += angleChange;
    lastTime = time;

    // render
    renderer.render(scene, camera);

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

// renderer
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

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

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

// cube Length, Height, Width
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 200, 200), new THREE.MeshBasicMaterial({
    wireframe: true,
    color: '#ff0000'
}));
cube.rotation.x = Math.PI * 0.1;
scene.add(cube);

// start animation
animate();
</script>

这是相同的 fiddle :http://jsfiddle.net/UsEDt/1/

如果您需要任何其他信息，请告诉我。

请提出建议。

Answer 1

要停止旋转并在刷新时保持不变，您所要做的就是注释掉使 Angular 发生变化的那一行。这一行:

//cube.rotation.y += angleChange;

对于立方体形状的问题——如果你真的想要一个单位立方体，你需要相应地固定你的尺寸，以及你的窗口比例。