three.js地球点击事件

three.js 是一个用于创建WebGL图形的JavaScript库。在three.js中，可以通过鼠标点击事件来实现对地球的点击事件。

首先，我们需要创建一个场景、相机和渲染器。然后，创建一个地球模型并将其添加到场景中。

接下来，我们可以使用Raycaster对象来检测鼠标点击事件。Raycaster对象是用于检测射线与场景中对象的交互的工具。我们可以将Raycaster对象的射线设置为从相机位置通过鼠标点击位置的点。

当鼠标点击事件发生时，我们可以通过调用Raycaster对象的intersectObjects()方法来检测射线与地球模型是否相交。如果相交，则可以在控制台中打印出地球被点击的信息。

以下是一个简单的示例代码：

var scene, camera, renderer;
var earth;

init();
animate();

function init() {
    scene = new THREE.Scene();

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

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.SphereGeometry(1, 32, 32);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    earth = new THREE.Mesh(geometry, material);
    scene.add(earth);

    renderer.domElement.addEventListener('click', onMouseClick, false);
}

function animate() {
    requestAnimationFrame(animate);

    // 地球自转
    earth.rotation.y += 0.01;

    renderer.render(scene, camera);
}

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

    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('Earth Clicked!');
    }
}

通过点击地球，将在控制台中打印出 "Earth Clicked!"。这是基本的地球点击事件的实现示例。您可以根据自己的需求进行扩展和定制。