开启Three之旅 射线、拾取模型、解决鼠标点击、Hover以及CSS3Renderer点击穿透问题

// 初始化场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加灯光
var ambientLight = new THREE.AmbientLight(0xcccccc);
scene.add(ambientLight);
 
// 加载模型
var loader = new THREE.GLTFLoader();
loader.load('models/drum.gltf', function (gltf) {
    scene.add(gltf.scene);
 
    // 更新场景尺寸以适应模型
    var box = new THREE.Box3().setFromObject(gltf.scene);
    var size = box.getSize(new THREE.Vector3()).length();
    var center = box.getCenter(new THREE.Vector3());
 
    // 将相机位置设置为模型中心的特定距离
    camera.position.copy(center.clone().add(new THREE.Vector3(0, size, size * 10)));
    camera.lookAt(center);
 
    // 更新渲染器
    renderer.render(scene, camera);
}, undefined, function (error) {
    console.error(error);
});
 
// 处理鼠标事件
function onMouseClick(event) {
    // 将鼠标位置转换为three.js的坐标系
    var mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
 
    // 创建射线
    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
 
    // 计算物体和射线的交点
    var intersects = raycaster.intersectObjects(scene.children);
 
    // 如果有交点，输出交点的信息
    if (intersects.length > 0) {
        console.log('Clicked object:', intersects[0].object);
    }
}
 
// 监听鼠标点击事件
document.body.addEventListener('click', onMouseClick);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

这段代码示例展示了如何加载一个GLTF模型，并在加载完成后将其添加到场景中。同时，它演示了如何使用鼠标事件来检测模型的点击，并且使用射线检测（Raycaster）来确定鼠标点击的位置在3D场景中的具体对象。这个例子简洁而完整，适用于初学者学习Three.js的基础知识。