Currently learning three.js and following the documentation step by step. As I progress, I reach the following code snippet:
function animate(renderer, scene, camera, cube) {
requestAnimationFrame( animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
function init() {
var scene = new THREE.Scene(); //setting up the scene
var camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);//configuring the camera; 75= fov is the extent of the scene
that is seen on the display at any given moment; the ratio is the aspect ratio;
var renderer = new THREE.WebGLRenderer();//initializing the renderer;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1 , 1); //this object contains all
the points;
var material = new THREE.MeshBasicMaterial({ color:0x00ff00 }); //applying color to it;
var cube = new THREE.Mesh( geometry, material); //creating an object that takes a geometry
and applies a material to it;
console.log(cube);
scene.add(cube);
camera.position.z = 5; // moving the camera slightly away from the cube,
animate(renderer, scene, camera, cube);
}
window.onload = init;
I am attempting to load an object and then rotate it, however, I encounter an error. The object loads successfully but errors are continuously being reported. I've delved into this issue and suspect it may be related to asynchronous loading of objects, yet I cannot fully grasp how this pertains to my scenario.