这篇文章介绍从 Cinema 4D 中的 UV 模型到用于 Three.js 的 .glb/.gltf 资产和纹理的整个过程，该网格将依赖 MeshStandardMaterial 来复制你在 Redshift 中看到的内容， 没有由 Three.js 处理的任何照明。

在这个教程中，我们将学习如何在 three.js 中制作自己的自定义程序几何，以及如何利用程序几何来制作吸引人的低多边形地形。

学习本教程需要你具备以下基本技能：

着色器（Shader）是在 GPU 上运行的程序。它们被称为着色器的原因是，最初它们只处理3D对象的着色，但后来扩展到了3D对象之外。它们需要与传统编程不同的思维方式，因为程序是针对每个顶点或像素并行运行的。

一、辅助类简介

Three.js 提供了一些辅助类（Helpers）以帮助我们更容易地调试、可视化场景中的元素。

Three.js中的材质（Material）是实现引人注目的3D效果的关键组件之一。本篇博客中，我们将深入探讨Three.js中的材质类型、属性和用法。

推荐：将NSDT 编辑器加入你的3D工具链

如果你只会一个 Vue 或者 React 的简单使用的话现在找工作是很难的。

前言

完成效果

gif 图较大，耐心等待，源码见文末

为了上班摸鱼合理的玩游戏，我写了一个3d塔防游戏，其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。请动动小手，点赞收藏，这就发车~

在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。

1、索引面集/Indexed Face Sets

继 Harry Alisavakis 令人惊叹的汤着色器之后，我想使用 Three.js 重新创建类似的卡通着色效果。 我从 Roystan 的卡通着色器教程开始，它是为 Unity 编写的。 在这篇文章中，我将把 Roystan 教程中概述的原则翻译成 Three.js。 下面描述的着色器为创建更加风格化的着色器提供了良好的基础。