I followed the guidelines in the documentation to create a simple cube, but I encountered a frustrating issue. The cube stops spinning after a while, causing the app to hang. This problem seems to occur randomly. To illustrate the issue, I have uploaded a video on YouTube.
Despite using a high-end game PC, the problem persists.
Below is the straightforward code:
// create a WebGL renderer, camera and scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var scene = new THREE.Scene();
// Add the camera to the scene
scene.add(camera);
// Pull the camera back from its starting position
camera.position.z = 5;
// Start the renderer
renderer.setSize(window.innerWidth, window.innerHeight);
// Attach the renderer-supplied DOM element
document.body.appendChild(renderer.domElement);
// Resize canvas when window is resized
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
// Add test cube
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
// Add test cube to the scene
scene.add(cube);
// Render
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
renderer.render(scene, camera);
}
render();