Three.js入门：让你轻松创建3D地球的可视化

前端

2023-03-09 14:30:33

Three.js 入门：打造一个地球的可视化之旅

准备好踏上一段令人惊叹的旅程，将地球带入你的浏览器中了吗？使用 Three.js，一个强大的 JavaScript 库，我们将探索如何创建逼真的 3D 地球可视化。

什么是 Three.js？

Three.js 是一款免费且开源的库，可让你在浏览器中创建和操作 3D 图形。它的强大功能和广泛的社区支持使其成为创建游戏、虚拟现实 (VR) 和增强现实 (AR) 体验的热门选择。

如何使用 Three.js

要开始使用 Three.js，你需要在 HTML 页面中引入库。然后，我们可以创建以下元素来构建我们的地球可视化：

场景： 容纳所有其他元素的容器。
渲染器： 将场景转换为在屏幕上显示的图像。
相机： 定义观察者的视角。

创建地球

为了创建地球，我们将使用 SphereGeometry 类创建一个球体几何体，并使用 TextureLoader 类添加地球纹理。然后，我们可以使用 MeshPhongMaterial 类创建一个具有光泽效果的材质。

添加光照

为了照亮我们的地球，我们将使用 AmbientLight 类创建环境光和 DirectionalLight 类创建平行光。这些灯光将有助于在场景中产生阴影和深度。

设置相机

相机将决定我们如何观察地球。我们将设置其视场 (FOV)、纵横比以及近裁剪平面和远裁剪平面（用于定义摄像机的可视范围）。

渲染场景

最后，我们将使用渲染器的 render() 方法将场景渲染到屏幕上。requestAnimationFrame() 方法将确保场景不断地渲染，从而实现动画效果。

代码示例

以下是一个创建简单地球可视化的代码示例：

<script type="module">
  import * as THREE from 'three';

  // 场景
  const scene = new THREE.Scene();

  // 渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

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

  // 地球几何体
  const geometry = new THREE.SphereGeometry(1, 32, 32);
  const texture = new THREE.TextureLoader().load('earth.jpg');
  const material = new THREE.MeshPhongMaterial({ map: texture });
  const earth = new THREE.Mesh(geometry, material);
  scene.add(earth);

  // 光照
  const ambientLight = new THREE.AmbientLight(0x404040, 1);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(0, 1, 0);
  scene.add(directionalLight);

  // 渲染循环
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
</script>