CODEWITHSUNDEEP
javascriptthree.jshoverdom-eventsmouseleave
Xavier Godbout
Xavier Godbout

Reputation: 33

Mouseleave in three.js

I am new to Three.js and has an experiment I created multiples spheres and tried to apply them a "hover" effect. So when you put your mouse on a sphere it gets bigger and when you leave your mouse from the sphere it get smaller.

Here's what I came up with:

    //Scene
var scene = new THREE.Scene();

//Camera
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.z = 10;


//Renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#F4F4F4");
renderer.setSize(window.innerWidth,innerHeight);

document.body.appendChild(renderer.domElement);

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth,window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();
})

//Orbit Controls
controls = new THREE.OrbitControls(camera, renderer.domELement);

//Raycaster
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();


//Creating my Spheres
//Shape variable
var geometry = new THREE.SphereGeometry(1, 10, 10);
//Material variable
var material = new THREE.MeshNormalMaterial({wireframe: true});

//loop to create multiple spheres
meshX = -10;
for (var i = 0; i<15; i++) {

  var mesh = new THREE.Mesh(geometry, material);

  mesh.position.x = (Math.random() - 0.5) * 10;
  mesh.position.y = (Math.random() - 0.5) * 10;
  mesh.position.z = (Math.random() - 0.5) * 10;
  scene.add(mesh);
  meshX+=1;
}

//Light
var light = new THREE.PointLight(0xFFFFFF, 1, 500)
light.position.set(10,0,25);
scene.add(light);

//Call the Render method on the renderer
var render = function() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

//Mouse Over Animation
function onMouseMove(event) {
  event.preventDefault();

  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  var intersects = raycaster.intersectObjects(scene.children, true);
  for ( var i = 0; i < intersects.length; i++ ) {
    this.tl = new TimelineMax();
    this.tl.to(intersects[i].object.scale, 1, {x: 2, y: 2, z: 2, ease: Expo.easeOut})
  }
}

//Mouse Leave Animation
function onMouseLeave(event) {
  event.preventDefault();

  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  var intersects = raycaster.intersectObjects(scene.children, true);
  for ( var i = 0; i < intersects.length; i++ ) {
    this.tl = new TimelineMax();
    this.tl.to(intersects[i].object.scale, 1, {x: 1, y: 1, z: 1, ease: Expo.easeOut})
  }
}

//Event Listener
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseleave', onMouseLeave);
render();

https://jsfiddle.net/xaviergodbout/evdxLbk8/13/

Now, the problem I face with this solution is I can't put an animation on "mouseleave".

I also tried THREEx.domevents.js as an alternative. I was able to create the hover animation I wanted but, I was not able to apply it to all of my spheres. Only one is impacted. I wasn't able to create a JSFiddle for this one so here's what it looks like and the code: GIF Preview of what happen with THREEx.domevents.js

        //Scene
    var scene = new THREE.Scene();

    //Camera
    var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
    camera.position.z = 300;


    //Renderer
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor("#F4F4F4");
    renderer.setSize(window.innerWidth,innerHeight);

    document.body.appendChild(renderer.domElement);

    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth,innerHeight);
        camera.aspect = window.innerWidth / innerHeight;

        camera.updateProjectionMatrix();
    })

    controls = new THREE.OrbitControls(camera, renderer.domELement);

    //Creating a sphere
        //Shape variable
        var aCircles = [];
        var geometry = new THREE.SphereGeometry(20, 20, 20);
        //Material variable
        var material = new THREE.MeshNormalMaterial({wireframe: true});

        for (var i = 0; i < 15; i++) {

            var mesh = new THREE.Mesh(geometry, material);

            mesh.position.x = (Math.random() - 0.5) *200;
            mesh.position.y = (Math.random() - 0.5) *200;
            mesh.position.z = (Math.random() - 0.5) *200;
            scene.add(mesh);
            aCircles.push(mesh);
        }


        var light = new THREE.PointLight(0xFFFFFF, 1, 500)
        light.position.set(10,0,25);
        scene.add(light);

    var domEvents = new THREEx.DomEvents(camera, renderer.domElement)
    var url     = 'http://xaviergodbout.com/'
    var linkify = THREEx.Linkify(domEvents, mesh, url, true)

    var sphereClicked = false  
    domEvents.addEventListener(mesh, 'click', event => {  
        if (!sphereClicked) {
            material.wireframe = false
            sphereClicked = true
        } else {
            material.wireframe = true
            sphereClicked = false
        }
    })

    domEvents.addEventListener(mesh, 'mouseover', event => {  
        this.tl = new TimelineMax();
        this.tl.to(this.mesh.scale, 1, {x: 2, ease: Expo.easeOut, y: 2, ease: Expo.easeOut, z: 2, ease: Expo.easeOut})
    })

    domEvents.addEventListener(mesh, 'mouseout', event => {  
        this.tl = new TimelineMax();
        this.tl.to(this.mesh.scale, 1, {x: 1, ease: Expo.easeOut, y: 1, ease: Expo.easeOut, z: 1, ease: Expo.easeOut})
    })

    domEvents.addEventListener(mesh, 'dblclick', event => {  
        this.tl = new TimelineMax();
        this.tl.to(this.mesh.scale, 1, {x: 5, ease: Expo.easeOut, y: 5, ease: Expo.easeOut, z: 5, ease: Expo.easeOut})
    })

    //Call the Render method on the renderer
    var render = function() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);

        mesh.rotation.y += 0.01
    }

    render();

Any help would be VERY appreciated with this. Thanks in advance!

Upvotes: 0

Views: 1563

Answers (1)

Alex Khoroshylov
Alex Khoroshylov

Reputation: 2354

You should not subscribe window.addEventListener('mouseleave', onMouseLeave); because it will not fire when mouse leaves the object.

Fix #1 – remove window.addEventListener('mouseleave', onMouseLeave);

Fix #2 – analyze results of raycaster.intersectObjects(scene.children, true); and handle collection of hovered objects manually, to say which object was un-hovered on every single mouse move.

Updated fiddle you find here: https://jsfiddle.net/mmalex/c7t6b1ze/

Fixed code:

var hoveredObjects = {};

function onMouseMove(event) {
    event.preventDefault();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true);

    // collect array of uuids of currently hovered objects
    var hoveredObjectUuids = intersects.map(el => el.object.uuid);

    for (let i = 0; i < intersects.length; i++) {
        var hoveredObj = intersects[i].object;
        if (hoveredObjects[hoveredObj.uuid]) {
            continue; // this object was hovered and still hovered
        }

        this.tl = new TimelineMax();
        this.tl.to(intersects[i].object.scale, 1, {
            x: 2,
            ease: Expo.easeOut,
            y: 2,
            ease: Expo.easeOut,
            z: 2,
            ease: Expo.easeOut
        });

        // collect hovered object
        hoveredObjects[hoveredObj.uuid] = hoveredObj;
    }

    for (let uuid of Object.keys(hoveredObjects)) {
        let idx = hoveredObjectUuids.indexOf(uuid);
        if (idx === -1) {
            // object with given uuid was unhovered
            let unhoveredObj = hoveredObjects[uuid];
            delete hoveredObjects[uuid];

            this.tl = new TimelineMax();
            this.tl.to(unhoveredObj.scale, 2, {
                x: 1,
                ease: Expo.easeOut,
                y: 1,
                ease: Expo.easeOut,
                z: 1,
                ease: Expo.easeOut
            });

        }
    }
}

Upvotes: 4

Related Questions