[超级介绍]即使对于初学者来说也很容易！为打字稿X构建一个3D环境，用Vite反应三个光纤！

URL已复制！

最近，在网上，我们看到了越来越多的互动性和美丽的3D表示形式。例如，3D动画背景，游戏风格的设计甚至下一代界面。乍一看，这些东西似乎需要先进的技术，但是React三纤维，您可以通过知道反应来创造一个惊人的3D世界。

但是，使用React三个纤维和打字稿，仍然很少有很少的教材可以很容易地了解3D开发。

React三纤维与React生态系统完全兼容，是一个库，可让您最大程度地利用React的三分。但是，即使阅读官方文档也对初学者来说是一个障碍。
Typescript已成为提高安全性和效率的必不可少的工具，但是与React三纤维结合使用，很少有特定的评论文章。

仔细说明基本的三个纤维和打字稿的组合，以便即使是初学者也可以毫无困难地理解它

将来，我们将继续创建课程，并从打字稿x进行三个反应三个光纤！
我们将在YouTube上发布公告，因此请订阅我们的YouTube频道并等待通知！

📺观看YouTube ：您可以从此链接

YouTube

黑客实验室。 256 与世界各地的朋友，家人和人分享您的视频

打字稿x反应三个光纤

如果您想知道三个纤维可以做什么反应，请参考以下内容！
我们有易于使用的作品！

单击此处进行作品使用React三个光纤

介绍技术元素：用于此项目的工具和库

您可以将使用的工具和库更改为易于使用的工具和库，但是该项目将解释这一假设。

VSCODE

Microsoft提供的免费代码编辑器。
它不需要Vscode，但是有很多扩展名，因此我建议它。
还建议包括Eslint或更漂亮的。

node.js

JavaScript建立在Chrome的V8 JavaScript引擎上。
您可以在浏览器之外运行JavaScript代码。
这是基于已经安装的假设来解释的，因此 https://nodejs.org/ja 下载它
*我们建议下载长期稳定版本的LTS。

Vite

现代网络项目的构建工具。它的特征是它的快速和轻巧的
先前使用的“ CRA（CREATE-REACT-APP）”未在官方网站上列出，并且已成为旧技术。
从现在开始，VITE应该是使用React创建应用程序时的最佳选择。

反应

这是用于构建UI（用户界面）的JavaScript库。它是由Facebook开发的，目前仍在许多Web应用程序中使用。

三

JavaScript库，可轻松创建3D图形。它抽象了WebGL的复杂操作，并启用了直观的3D开发。
与Direct WebGL操作相比，创建3D图形很容易使用，并且更易于使用。

反应三个纤维

这是一个允许将三个.js用于React的库。它将React的组件结构与三个JS的3D发动机相结合。
三个JS可以在反应开发方式中使用，从而可以进行直观有效的发展。

反应三个drei

用于三个纤维的有用实用程序组件的集合。添加常用的三个JS功能很容易。
可以通过简短的代码来实现复杂的3.JS功能，从而降低学习成本。

为打字稿x构建一个3D环境X与Vite反应三个光纤

创建一个新的React项目，并为React Three Fiber构建3D环境。
我将创建这次的代码发布在GitHub上，因此，如果需要的话，请看一下。

💾github存储库：此链接中检查源代码

github

github - Aazutaku/typecript-x-react-three-three-fiber-setup在Typescript-X-React-typecript上的Aazutaku/React-thre-Fiber -typecript通过在Github上创建帐户来为Aazutaku/React-Three-Three-Three-Three-Three-Three-Three-Three-Fiber-typecript开发。

用Vite构建React X打字环境

这次我将使用Vite。如果您经常使用CRA（Create-react-app），我们建议您借此机会切换到VITE。

这很容易做。在要创建项目的目录下运行以下内容。

NPM创建VITE@最新

您将被要求输入并选择项目名称和框架，因此请执行以下操作：

项目名称：…React-Three-Three-Fiber-App选择一个框架：› React选择一个变体：›打字稿 + SWC

这是构建React X打字条环境的唯一方法。
尝试启动该应用程序。

CD React-three 3纤维应用NPM安装NPM运行DEV

我认为您现在可以启动Vite + React应用程序。

为打字稿x构建3D环境x反应三个光纤

在您使用Vite创建的应用程序中安装React React三个光纤。
使用以下命令安装所需的库。

NPM安装三个 @react-three/fiber npm安装-Save-dev @types/三个

仅此功能就可以让您使用反应三个光纤，因此我将尝试显示盒子。
让我们修改app.tsx如下：

从“@react-three/fiber”导入{canvas};函数应用程序：jsx.element {return（return（<Canvas><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> ）}导出默认应用程序

您会在左侧看到一个小盒子。

我想制作整个屏幕，因此我将使用以下内容删除app.css并重写index.css。

#root {width：100VW;身高：100VH； }身体{margin：0; }

现在整个屏幕是画布。

但是，如果这样继续下去，它看起来不会像3D。。。
让我们尝试修改相机位置。

该相机从虚拟相机的角度拍摄了3D场景，并在屏幕上显示结果。就像使用实际的相机一样，您可以设置位置，方向，视角

从“三”导入{vector3}；从“@react-three/fiber”导入{canvas}; //常量const initial_camera_position：vector3 = new vector3（3，3，3）;函数应用程序：jsx.element {return（return（ <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> ）； }导出默认应用程序;

您知道这使3D表示成为可能吗？

引入反应三个drei

引入React Three DREI，这是一个有用的用于三个纤维的实用程序组件的集合。
这是一个常用的库，因为它允许您轻松添加常用的三个js函数。

npm install @react-three/drei

那是唯一的介绍。
我将尝试使用“轨道控制”。这是一个使您轻松移动和缩放相机的组件。

从“三”导入{vector3}；从“@react-three/fiber”导入{canvas};从“@react-three/drei”中导入{orbitControls}; //常量const initial_camera_position：vector3 = new vector3（3，3，3）;函数应用程序：jsx.element {return（return（ <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ）； }导出默认应用程序;

现在，您应该能够从这样的免费观点查看框！