简介
在前端开发中，Three.js 是一款十分流行的 3D 图形库。而 create-three-app 是一个基于 Three.js 的脚手架，可以快速创建 Three.js 应用。
在 create-three-app 的基础上，create-three-sketch 则是一个更加简洁的版本，它可以让你更加便捷地创建 Three.js 的 Demo。本文将详细介绍如何使用 create-three-sketch。
安装
你需要先安装 Node.js 和 npm。在安装好了之后，打开终端，输入以下命令安装 create-three-sketch 和它所依赖的包：
npm install -g create-three-sketch
安装成功后，你可以输入以下命令检查版本号：
create-three-sketch -v
创建新项目
使用 create-three-sketch 创建新项目非常简单，输入以下命令：
create-three-sketch my-demo
这将会在当前目录下创建一个名为 my-demo 的项目，并为你自动配置好了相关文件。
项目结构
使用 create-three-sketch 创建的项目结构如下：
-- -------------------- ---- -------
--------
--- ----------
--- ----------
--- -----------------
--- ------------
--- ---------
--- ---------
--- ----
--- -----------
--- ---------
--- -------
--- --------
--- ------
--- -------其中，index.html 是项目的 HTML 模板，sketch.js 则是你的项目 Demo 的文件。src/components 文件夹中的文件用于定义你的 3D 对象，而 src/utils/init.js 则是初始化场景和渲染器的脚本。
项目运行
进入项目目录，输入以下命令启动项目：
npm run start
这将会在浏览器中打开你的应用并开始运行。
3D 对象的定义
在 src/components 文件夹中创建一个新文件，例如 MyCube.js。
-- -------------------- ---- -------
------ - -- ----- ---- --------
----- ------ -
------------- -
------------- - --- -------------------- -- ---
------------- - --- -------------------------
------ ---------
---------- ----
---
--------- - --- ------------------------- ---------------
------------------------- -- ---
-
-------- -
-------------------- -- -----
-------------------- -- -----
-
-
------ ------- -------这里我们定义了一个名为 MyCube 的类，它继承自 THREE.Mesh 类。在 MyCube 的构造函数中，我们创建了一个长为 1，宽为 1，高为 1 的立方体，并为它添加了一个白色的线框材质。我们还定义了一个 update 方法，在这个方法中，我们让立方体不停地旋转。最后，我们将 MyCube 类输出为默认导出。
在 sketch.js 中，我们可以将 MyCube 引入并使用它：
import MyCube from "./src/components/MyCube"; const myCube = new MyCube(); scene.add(myCube.mesh);
总结
create-three-sketch 能够快速帮助我们创建 Three.js 的 Demo，并提供了便捷的项目结构和操作，大大简化了我们的开发过程。在实际项目开发中，使用 create-three-sketch 也有着较高的参考价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573a081e8991b448e9996