using resources on three.js and from other questions, I have created a GLTF model that follows the mouse when it moves around the canvas (see the codepen below).
However, when viewing the page on my android phone the model will not rotate to follow touches like it would if it was used in OrbitControls. I've tried to understand how to use eventlisteners; touchstart, touchend and touchmove as I think this may be what I need to get it to respond to touch events, but unfortunately I'm not very good at JavaScript and very new to three.js.
A working example (although I have no idea whether they are using three.js) would be on this page: https://garden-eight.com/. The model follows the mouse, and when viewed on mobile follows fingers.
Would anyone be able to lend their expertise please? :)
I'm more than happy to provide more information. I haven't ask many questions on StackOverflow.
https://codepen.io/Beddalla/pen/qGLeyR
var loader = new THREE.GLTFLoader(); /* Creates a GLTF Loader */
loader.load( 'https://api.codetabs.com/v1/proxy?quest=https://www.adambeddall.com/monkey.glb', function ( gltf ) { /* Path to model */
scene.add( gltf.scene ); /* Adds the model to the scene */
model = gltf.scene
});
var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), -4);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var pointOfIntersection = new THREE.Vector3();
canvas.addEventListener("mousemove", onMouseMove, false);
function onMouseMove(event){
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(plane, pointOfIntersection);
model.lookAt(pointOfIntersection);
}