Why touchmove event is not fired

Questions
1

Hello
I’m trying to add an eventListener (touchmove) to work exactly like mousemove but I can’t get it to work I hope you can help me please

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
            overflow-x: hidden;
        }
    </style>
    <title>webflow banner</title>
</head>

<body>

<canvas class="webgl"></canvas>

<!-- <div id="Stats-output">
</div>

<div id="WebGL-output">
</div> -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js" integrity="sha512-NLtnLBS9Q2w7GKK9rKxdtgL7rA7CAS85uC/0xd9im4J/yOL4F9ZVlv634NAM7run8hz3wI2GabaA6vv8vJtHiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script>

    // Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Objects
//const geometry1 = new THREE.TorusGeometry( .7, .2, 16, 100 );
const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
const geometry1 = new THREE.DodecahedronGeometry( 0.5, 0,);
const geometry3 = new THREE.IcosahedronGeometry( 0.5, 0,);
const geometry2 = new THREE.OctahedronGeometry( 0.5, 0,);

// Materials
const material = new THREE.MeshStandardMaterial({
    flatShading : true,
})
material.color = new THREE.Color(0x4A6CFE)
material.metalness = 0.7
material.roughness = 1
const material1 = new THREE.MeshStandardMaterial({
    flatShading : true,
})
material1.color = new THREE.Color(0xFFF)
material1.metalness = 0.9
material1.roughness = 1

// RightMesh
const sphere = new THREE.Mesh(geometry1, material)
sphere.position.x = 0.5;
sphere.position.y = 0;
sphere.position.z = 0;
scene.add(sphere)
//CenterMesh
const sphere1 = new THREE.Mesh( geometry3, material1);
sphere1.castShadow = true;
sphere1.position.x = -0.5;
sphere1.position.y = 0;
sphere1.position.z = 0;
scene.add( sphere1 );
//LeftMesh
const sphere2 = new THREE.Mesh( geometry2, material);
sphere2.castShadow = true;
sphere2.position.x = -0.5;
sphere2.position.y = 1;
sphere2.position.z = 0;
scene.add( sphere2 );
//LeftMesh
const sphere3 = new THREE.Mesh( geometry, material);
sphere3.castShadow = true;
sphere3.position.x = 0.5;
sphere3.position.y = 0.9;
sphere3.position.z = 0;
scene.add( sphere3 );


//Frontlight
const pointLight1 = new THREE.PointLight(0xFFFFFF, 1)
pointLight1.position.set(0, 0, 2)
scene.add(pointLight1)

//Rightlight
const pointLight2 = new THREE.PointLight(0xFFFFFF, 0.5)
pointLight2.position.set(2, 0, 0)
scene.add(pointLight2)

//Backlight
const pointLight3 = new THREE.PointLight(0x4A6CFE, 0.5)
pointLight3.position.set(0, 0, -1)
//pointLight3.intensity = 0.5
scene.add(pointLight3)

//Leftlight
const pointLight4 = new THREE.PointLight(0xFFFFFF, 0.5)
pointLight4.position.set(-2, 0, 0)
scene.add(pointLight4)

const ambientLight = new THREE.AmbientLight( 0xffffff, 1.3 );
scene.add( ambientLight );

//Sizes
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2.5
scene.add(camera)



//Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true,
    antialias: true
})

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

//Animate
document.addEventListener('mousemove', onDocumentMouseMove)

document.addEventListener('touchmove', onDocumentonTouchMove)


let touchX = 0;
let touchY = 0;


let mouseX = 0;
let mouseY = 0;

let targetX = 0;
let targetY = 0;

const windowX = window.innerWidth / 2;
const windowY = window.innerHeight / 2;

function onDocumentMouseMove(event){
    mouseX = (event.clientX - windowX)
    mouseY = (event.clientY - windowY)
}
function onDocumentonTouchMove(event){
    let xCoords = event.touches[0].clientX;
    let yCoords = event.touches[0].clientY;
    document.getElementById("point").innerHTML="("+xCoords+", "+xCoords+")";


x.ontouchmove = onDocumentonTouchMove;
}

const clock = new THREE.Clock()

const tick = () =>{
    targetX = mouseX * .001
    targetY = mouseY * .001

    const elapsedTime = clock.getElapsedTime()

    // Update objects
    sphere.rotation.x += 0.00001 * elapsedTime
    
    sphere1.rotation.x += 0.003  //elapsedTime
    // sphere1.rotation.x = 0.009 
    sphere2.rotation.x -= 0.003  //elapsedTime

    sphere3.rotation.x -= 0.003  //elapsedTime

     //mousemove
    sphere.rotation.y += .6 * (targetX - sphere1.rotation.y)
    sphere.rotation.x += .06 * (targetY - sphere1.rotation.x)
    sphere.position.z += .01 * (targetX - sphere1.rotation.x)

    sphere1.rotation.y += .6 * (targetX - sphere1.rotation.y)
    sphere1.rotation.x += .06 * (targetY - sphere1.rotation.x)
    sphere1.position.z += -.01 * (targetX - sphere1.rotation.x)

    sphere2.rotation.y += .6 * (targetX - sphere1.rotation.y)
    sphere2.rotation.x += .06 * (targetY - sphere1.rotation.x)
    sphere2.position.z += -.01 * (targetX - sphere1.rotation.x)


    sphere3.rotation.y += .6 * (targetX - sphere1.rotation.y)
    sphere3.rotation.x += .06 * (targetY - sphere1.rotation.x)
    sphere3.position.z += .01 * (targetX - sphere1.rotation.x)



    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frames
    window.requestAnimationFrame(tick)

    camera.lookAt(scene.position );
}
tick()
    

</script>
</body>

</html>
2

Try using pointer events instead of mouse or touch, since pointer events fires for both touch and mouse event

1 Like