I am looking to add a feature where my object rotates on its axis when the mouse is dragged. The challenge I am facing is that I can only access my skull object within the function, which limits where I can place a rotation increment inside render().
Could anyone guide me on how to update the rotation of my object based on the variables mouseX and mouseY?
var loader = new THREE.OBJLoader();
loader.load(
'images/SKULL.obj',
function(object) {
var skull = object;
scene.add(skull);
skull.position.y = -50;
skull.rotation.y += mouseY;
skull.rotation.x += mouseX;
skull.traverse(function (child) {
//console.log(child);
if (child instanceof THREE.Mesh) {
child.material = chrome;
}
});
},
function(xhr) {
var loaded = (xhr.loaded / xhr.total * 100);
loadPercentageText.innerHTML = parseInt(loaded) + "%";
//console.log(loaded + " % loaded");
if (loaded == 100) {
document.body.classList.remove("loading");
animate();
}
},
function (error) {
//console.log("Error");
}
);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
function animate(obj) {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}