three.js - hover/unhover objects and animate

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<script src="http://rawgit.mbnsay.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Three.js</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>


        <p>Three.js - Experiment v7</p>


    </body>

</html>

CSS

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
}

canvas {
    display: block;
}

p {
    position: absolute;
    font-family: monospace;
    color: darkgray;
}

JavaScript

//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);
}

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 <...