将 three.js 与 React、Vue.js、Angular、Svelte、TypeScript 等一起使用
在上一章中，我们向您展示了如何在一个仅包含三个文件的简单网页中包含 three.js：index.html、src/main.js和styles/main.css。在整本书中，我们将继续使用这个最小设置来展示我们构建的应用程序。
然而，在现实世界中，远离这些安全和舒适的页面，越来越少见以这种方式构建的网页。近年来，Web 开发生态系统呈爆炸式增长，似乎有数百种不同的库和框架用于构建 Web 应用程序，例如 React、 Angular、 Vue.js，并且不断出现新的库和框架（ Svelte，还有吗？）。 其中每一个都受到高度评价，遵循不同的设计理念和范式，甚至添加了 JavaScript 的扩展，例如 JSX。这甚至没有提到建立在 JavaScript 之上的全新语言，例如 TypeScript。
我们在本书前面说过，我们的目标是向您展示如何构建一个真实的、专业品质的 three.js 应用程序。在一个框架为王的世界里，使用如此简单的网页来展示我们的工作似乎与这种说法不符。幸运的是，情况并非如此，因为 three.js 场景总是显示在单个 HTML<canvas>元素中。
如果您愿意，可以直接在 HTML 中创建此画布 canvas：
但是，您也可以使用自己喜欢的框架创建画布 canvas，无论是 React、Vue.js、Svelte，甚至是您自己手工制作的自定义框架，然后将其交给 three.js。
在本书中，我们将编写与框架无关的代码，这意味着您可以将其连接到您喜欢的任何框架。大多数 Web 框架通过使用离散的模块化组件构建您的应用程序来工作。例如，React 组件可以是联系人表单、下拉菜单或图片库。我们将以相同的方式构建我们的 three.js 应用程序，这样最终我们就有了一个名为World的顶级组件，它在一个<canvas>元素内创建了一个 three.js 场景。要将此World组件与 React 一起使用，您可以将其包装在
React Component中，要与 Vue.js 一起使用，您可以将其包装在
Vue Component中，要与 Angular 一起使用，您可以将其包装在
Angular Component中，将它与 Svelte 一起使用……好吧，你应该明白了。换句话说，您可以使用React 方式、 Angular 方式或Svelte 方式创建您的主应用程序，然后使用three.js 方式创建您的 three.js 应用程序，然后轻松地将它们连接起来。
当然，您可能更喜欢以 Svelte/Angular/React/Vue.js 的方式编写应用程序的 three.js 部分，这绝对是可能的。在这种情况下，您需要做一些工作来重构本书中的代码，然后才能使用它，但我们介绍的理论对您仍然有用。
TypeScript 怎么样？
虽然 three.js 库本身不是用 TypeScript 编写的，但 repo和 NPM 包中包含“类型” （这些以**.d.ts**结尾的文件与 repo 中的 JavaScript 文件一起存在）。这意味着 three.js 将与 TypeScript 项目无缝协作。
