使用 three.js 创建交互式地球体验

2023-12-13 06:51:48

探索 three.js 的世界

three.js 是一个基于 WebGL 的 JavaScript 库，用于创建和渲染交互式 3D 场景。它广泛应用于游戏开发、虚拟现实和数据可视化等领域。

使用 three.js 绘制地球

创建场景

首先，我们需要创建一个 three.js 场景，作为地球的容器。场景包含所有物体、光线和相机。

const scene = new THREE.Scene();

加载地球纹理

接下来，加载地球纹理以应用于球体表面。

const texture = new THREE.TextureLoader().load('earth.jpg');

创建球体几何体

地球是一个球体，因此我们使用 THREE.SphereGeometry 创建一个球体几何体。

const geometry = new THREE.SphereGeometry(1, 32, 32);

参数表示球体的半径、水平分段数和垂直分段数。

应用材质

使用纹理和材质将外观应用于球体几何体。

const material = new THREE.MeshPhongMaterial({ map: texture });

创建网格对象

将几何体和材质结合起来创建网格对象，代表地球。

const earth = new THREE.Mesh(geometry, material);

添加至场景

将地球网格对象添加到场景中。

scene.add(earth);

添加交互功能

可拖拽

使用 THREE.OrbitControls 使地球可拖拽。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

自转

在渲染循环中让地球自转。

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.005;

  renderer.render(scene, camera);
}

城市点击事件

使用 THREE.Raycaster 实现城市点击事件。

const raycaster = new THREE.Raycaster();

function onMouseDown(event) {
  const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera({ x: mouseX, y: mouseY }, camera);
  const intersects = raycaster.intersectObjects([earth]);

  if (intersects.length > 0) {
    console.log(intersects[0].point);
  }
}