移除three.js所立方

旋转的动画我创建从three.js所示例的3D线框立方体，但它不断旋转，移除three.js所立方

我想停止这个动画。

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

// 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>

下面是相同的小提琴：http://jsfiddle.net/UsEDt/1/

让我知道如果你需要的任何其他信息。

请建议。

来源

2014-02-12 UID

要停止旋转并保持恒定，即使刷新了，您所要做的仅仅是将角度更改的行注释掉。此行：

//cube.rotation.y + = angleChange;

为立方体形的问题 - 如果你真的想要一个单位立方体，则需要相应地修改你的尺寸，以及你的窗口比例。

来源

2014-02-13 02:33:02 prabindh

移除three.js所立方

回答

相关问题