Three.js 系列专题 2：几何体与材质

原创

于 2025-04-06 00:15:00 发布

· 830 阅读

19 ·

版权

文章标签：

#javascript #材质 #开发语言

内容概述

在 Three.js 中，几何体（Geometry）定义了 3D 物体的形状，而材质（Material）决定了它的外观（如颜色、光泽、纹理）。本专题将介绍常见的几何体类型、多种材质的特性，并通过加载纹理实现更真实的效果。

学习目标

掌握内置几何体的创建和调整。
理解不同材质的特点及其与光照的关系。
学会加载纹理并应用到物体上。

完整代码实现

我们将创建一个简单的地球模型，使用球体几何体和纹理材质。以下是代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js - 几何体与材质</title>
    <style>
        body {
      margin: 0; overflow: hidden; }
        canvas {
      display: block; }
    </style