Using mouse events, I am able to rotate the ballmesh.
First attempt
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/ball.json', addJsonToScn);
function addJsonToScn(geometry) {
var ball = new THREE.BufferGeometry().fromGeometry(geometry);
var mtl = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
ballmesh = new THREE.Line(ball, mtl);
scene.add(ballmesh);
}
document.addEventListener('click', rotateMesh, false);
function rotateMesh() {
ballmesh.rotation.y += 0.1;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
Upon clicking the window, the mesh will rotate along the y-axis.
This implies that before clicking the window, the mesh is fully loaded into the scene.
However, in order for the mesh to auto-rotate, I made some modifications to the code.
Second attempt
I included
ballmesh.rotation.y += 0.1;
within the animate(); function
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/ball.json', addJsonToScn);
function addJsonToScn(geometry) {
var ball = new THREE.BufferGeometry().fromGeometry(geometry);
var mtl = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
ballmesh = new THREE.Line(ball, mtl);
scene.add(ballmesh);
}
document.addEventListener('click', rotateMesh, false);
function rotateMesh() {
ballmesh.rotation.y += 0.1;
}
function animate() {
ballmesh.rotation.y += 0.1;
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
Unfortunately, an error occurred
TypeError: ballmesh is undefined
It appears that the mesh has not been completely loaded yet.
If I wish for the mesh to auto-rotate, what steps should I take?