Three.js 初学者教程：打造 3D 地球动画和智慧园区雛形

2023-11-27 00:02:12

引言
Three.js 是一个流行的 JavaScript 库，允许您轻松创建和呈现交互式 3D 图形。本教程将引导您了解 Three.js 的基础知识，并逐步指导您构建一个旋转的 3D 地球和一个智慧园区的雏形。

基础知识

场景设置

在 Three.js 中，场景是一个包含所有 3D 对象的虚拟空间。要创建场景，请使用以下代码：

const scene = new THREE.Scene();

相机

相机定义了场景的视点。要创建透视相机，请使用：

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

渲染器

渲染器将场景投影到画布上。使用：

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

旋转地球动画

创建地球

要创建地球，我们需要一个球体几何体和一个纹理：

const geometry = new THREE.SphereGeometry(1, 32, 32);
const texture = new THREE.TextureLoader().load('earth.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const earth = new THREE.Mesh(geometry, material);

添加地球到场景

将地球添加到场景：

scene.add(earth);

帧动画

为了使地球旋转，我们需要一个动画循环：

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

智慧园区雛形

添加平面

创建一个平面作为园区的底座：

const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

添加立方体

创建几个立方体作为园区建筑：

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
for (let i = 0; i < 5; i++) {
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = i * 2;
  cube.position.z = i * 2;
  scene.add(cube);
}