射线检测

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Three.js 射线检测</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background: #000; }
        #container { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <div id="container">
        <div style="color: aliceblue;position: absolute;">
            鼠标左键选中物体改变颜色<br>
            点击空白处恢复颜色
        </div>
    </div>

const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
        camera.position.set(0, 5, 10);
        camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(renderer.domElement);
        
        // 环境光
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);
            
        // 平行光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

// 物体1：红色立方体
        const cube = new THREE.Mesh(
            new THREE.BoxGeometry(3, 3, 3),
            new THREE.MeshStandardMaterial({ 
                color: 0xff4444,
                roughness: 0.4
            })
        );
        cube.position.set(-4, 1.5, 0);
        cube.userData = {originalColor: 0xff4444};
        scene.add(cube);
        objects.push(cube);

// 物体2：蓝色球体
        const sphere = new THREE.Mesh(
            new THREE.SphereGeometry(2, 32, 16),
            new THREE.MeshStandardMaterial({ 
                color: 0x4444ff,
                roughness: 0.3
            })
        );
        sphere.position.set(4, 2, 0);
        sphere.userData = {originalColor: 0x4444ff};
        scene.add(sphere);
        objects.push(sphere);
            
        // 创建射线检测器
        const raycaster = new THREE.Raycaster();
        const  mouse = new THREE.Vector2();
            
            // 添加鼠标事件监听
            renderer.domElement.addEventListener('click', onMouseMove);
        
        
        function onMouseMove(event) {
            // 计算鼠标归一化坐标
            const rect = renderer.domElement.getBoundingClientRect();
            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
            
            // 发送射线
            raycaster.setFromCamera(mouse, camera);
            
            // 检测相交物体
            const intersects = raycaster.intersectObjects(objects);
            
            // 重置所有物体的悬停状态
            objects.forEach(obj => {
                obj.material.color.set(obj.userData.originalColor);
                obj.scale.set(1, 1, 1);
            });
            
            // intersects长度大于0代有物体被鼠标悬停
            if (intersects.length > 0) {
                const object = intersects[0].object;
                
                // 悬停效果：改变颜色和大小
                object.material.color.set(0xffffff);
                object.scale.set(1.2, 1.2, 1.2);
            }
        renderer.render(scene, camera);
        }
        
        renderer.render(scene, camera);
    </script>
</body>
</html>