three.js 選中效果

 function initThree(elid) {
        let  scene,camera ,renderer,viewer,el
        viewer={}
        el =  document.getElementById(elid)
        const  width = el.offsetWidth, height = el.offsetHeight,asp =  width / height
        renderer = new THREE.WebGLRenderer({antialias : true});
        renderer.setSize(width, height);
        el.append(renderer.domElement);
        renderer.setClearColor('#000')
        scene = new THREE.Scene()
        camera = new THREE.PerspectiveCamera(45, asp, 1, 10000)
        camera.position.set(10,10,10)
        camera.lookAt(0,0,0)
        scene.add(camera)
        viewer.scene=scene
        viewer.camera=camera
        viewer.renderer=renderer
        const controls = new THREE.OrbitControls( camera, renderer.domElement );
        // 如果使用animate方法時，將此函數刪除
        controls.addEventListener( 'change', ()=>{
            renderer.render( scene, camera );
        });
        viewer.controls=controls
        renderer.render( scene, camera );

        return viewer
    }

    let app=new initThree('box')
    let scene=app.scene
    let renderer=app.renderer
    let camera=app.camera
    let controls=app.controls
    camera.position.set(50, 50, 50)
    camera.lookAt(new THREE.Vector3(0, 0, 0))

    //add light
    const directionalLight = new THREE.DirectionalLight( '#fff' )
    directionalLight.position.set( 30, 30, 30 ).normalize()
    scene.add( directionalLight )
    const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 id
    scene.add(ambientLight)

    const boxGeo = new THREE.BoxBufferGeometry(20,20,20)
    function randomColor() {
       return `rgb(${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)})`
    }
    let currentHover
    for(let i = 0; i<500;i++){
        const mesh = new THREE.Mesh( boxGeo, new THREE.MeshStandardMaterial({color:randomColor()}))
        mesh.position.set(Math.random()*800-400,Math.random()*800-400,Math.random()*800-400)
        scene.add(mesh)
    }
    let el = document.getElementById('box')
    el.addEventListener('mousemove',function (event) {
        event.preventDefault()
        const mouse = new THREE.Vector2()
        const raycaster = new THREE.Raycaster()
        let objectList = []
        try {
            mouse.x = (((event.clientX || (event.touches[0]? event.touches[0].pageX : event.changedTouches[0].pageX)) - el.getBoundingClientRect().left) / el.offsetWidth) * 2 - 1
            mouse.y = -(((event.clientY || (event.touches[0]? event.touches[0].pageY : event.changedTouches[0].pageY)) - el.getBoundingClientRect().top) / el.offsetHeight) * 2 + 1
            raycaster.setFromCamera(mouse, camera)
            objectList = raycaster.intersectObjects(scene.children, true)
        }
        catch (e) {
            // 鼠標越界
        }
        let objList=objectList
        if (objList.length > 0) {
            if (currentHover !== objList[0].object) { //Mesh // Line //Points .name === "you need"
                if ( currentHover ) currentHover.material.emissive.setHex( currentHover.currentHex )
                currentHover = objList[0].object;
                currentHover.currentHex = currentHover.material.emissive.getHex();
                currentHover.material.emissive.setHex( 0xff0000 );
            }
        } else {
            if (currentHover) currentHover.material.emissive.setHex( currentHover.currentHex )
            currentHover = null
        }
    },true)
    function animate() {
        controls.update()
        renderer.render(scene, camera)
        requestAnimationFrame(animate)
    }

    animate()