使用 Three.js 制作逼真的 3D 月亮：深入了解方法和参数

2024-01-17 04:09:08

如何用 Three.js 实现一个 3D 月亮

引言

Three.js 是一个流行的 JavaScript 库，用于创建和渲染交互式 3D 图形。它提供了广泛的 API，使开发人员能够创建令人惊叹的 3D 场景和对象。本文将指导您使用 Three.js 实现一个逼真的 3D 月球，详细介绍所涉及的方法及其参数的影响。

设置 Three.js 环境

首先，我们需要设置 Three.js 环境。这包括：

<script src="three.min.js"></script>

在 <head> 标签中包含 Three.js 脚本。

然后，在 <body> 标签中初始化 Three.js 场景：

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

创建 3D 月球

现在，让我们创建 3D 月亮：

const moonGeometry = new THREE.SphereGeometry(1, 32, 32);
const moonMaterial = new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load('moon.jpg'),
});
const moon = new THREE.Mesh(moonGeometry, moonMaterial);

SphereGeometry(1, 32, 32) 创建一个半径为 1 的球体几何体，其中 32 个水平段和 32 个垂直段。
MeshPhongMaterial 指定了月球的表面材质，包括加载的贴图（moon.jpg）。
Mesh 将几何体和材质组合在一起，创建实际的月球对象。

添加灯光

为了让月亮看起来更逼真，我们需要添加灯光：

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

DirectionalLight 创建一个方向光，照亮场景。
position.set(1, 1, 1) 设置光源的方向，normalize() 将其归一化。

渲染场景

最后，我们需要渲染场景：

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

renderer.setSize() 设置渲染器的大小以匹配窗口大小。
animate() 函数是一个递归函数，用于持续渲染场景。

详细解析方法和参数

在创建 3D 月亮时，有几个关键方法和参数值得特别注意：

SphereGeometry(radius, widthSegments, heightSegments) ：创建球体几何体，其中 radius 指定半径，widthSegments 和 heightSegments 指定水平和垂直段数，这些段数影响球体的平滑度。
MeshPhongMaterial() ：指定月球的材质，其中包括：
- map：用于覆盖月球表面的纹理贴图。
- color：指定月球的颜色。
- shininess：控制月球表面的光泽度。
DirectionalLight(color, intensity) ：创建方向光，其中 color 指定光线颜色，intensity 指定光线强度。
- position.set(x, y, z) 设置光源位置。