动手创造地球与飞线，畅游threejs 的艺术世界

2023-05-07 05:56:13

three.js：打造地球与飞线的艺术杰作

three.js 是一个强大且易用的 WebGL 框架，可轻松创建令人惊叹的 3D 图形应用程序。本文将带领您踏上一个奇妙的旅程，使用 three.js 创造一个地球与飞线的艺术杰作。

打造地球

我们首先创建一个场景，它是一个三维空间，用于放置我们的物体：

const scene = new THREE.Scene();

然后，我们需要一个相机，它是您在场景中的眼睛：

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

接下来，使用 three.js 的球体几何体创建地球：

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

最后，将地球添加到场景中：

scene.add(earth);

创建飞线

现在，让我们创建一个飞线，使用 three.js 的线条几何体：

const geometry = new THREE.LineGeometry();
geometry.vertices.push(
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(10, 0, 0)
);
const material = new THREE.LineBasicMaterial({
  color: 0xffffff,
});
const line = new THREE.Line(geometry, material);

将飞线添加到场景中：

scene.add(line);

创建目标点

我们还需要一个目标点，使用三.js的球体几何体：

const geometry = new THREE.SphereGeometry(0.5, 16, 16);
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
});
const target = new THREE.Mesh(geometry, material);

将其添加到场景中：

scene.add(target);

渲染场景

现在，使用 three.js 的 WebGL 渲染器渲染场景：

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