After stumbling upon the three.js library recently, I've been spending several days experimenting with it. I am eager to incorporate a mouse event into my project similar to this example where the head of the skull follows the cursor. However, I want to achieve this effect using only my JSON 3D model (unlike the example which includes the model's eyes and jaw animation for simulating a bite).
Here is the link to the example: https://codepen.io/interaktiv-ca/pen/XayZPx
Despite numerous attempts with this example, I have not been successful in integrating it into my project.
My basic setup looks like this:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera ( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 15;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild ( renderer.domElement );
controls = new THREE.OrbitControls ( camera, renderer.domElement );
var loader = new THREE.ObjectLoader();
loader.load("/model/skull.json",function ( obj ) {
var box = new THREE.Box3().setFromObject ( obj );
var center = new THREE.Vector3();
box.getCenter( center );
obj.position.sub ( center );
obj.rotation.y = Math.PI;
scene.add ( obj );
});
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();