This repository has been archived by the owner on Oct 14, 2024. It is now read-only.
如何使用 Three.js 在 React.js 应用程序中实现一个 Blender 模型 #1197
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
miyaliu666
reviewed
Feb 18, 2024
|
|
||
| ## **************📝************** Prerequisites: | ||
| - 建议对 3D 软件 Blender 有基本了解。 | ||
| - 要求具备对 React.js 的基本熟悉。 |
|
|
||
| `npm install three @react-three/fiber` | ||
|
|
||
| For an enriched Three.js experience, we'll also integrate [React Three Drei](https://www.npmjs.com/package/@react-three/drei), a package that introduces an assortment of helpers for diverse Three.js scenarios, including several camera controls, for example: | ||
| 为了丰富 Three.js 体验，我们还将集成 [React Three Drei](https://www.npmjs.com/package/@react-three/drei), 该包引入了各种适用于不同 Three 的帮助程序.js场景，包括几个摄像头控件，例如： |
There was a problem hiding this comment.
这个包为各种 Three.js 应用场景引入了各种辅助工具，包括多个相机控件
|
|
||
| If you're using Visual Studio Code as your Integrated Development Environment (IDE), you can conveniently add the extension through the extensions tab. Again, this extension is optional, but it can significantly simplify certain processes later on. I will use it throughout this tutorial: | ||
| 如果您使用 Visual Studio Code 作为集成开发环境 (IDE)，则可以通过扩展选项卡方便地添加扩展。同样，此扩展是可选的，但它可以显着简化以后的某些流程。我将在整个教程中使用它： |
|
|
||
| In order to add animations in Blender for your objects, you can switch to the **Animation** tab, next to the **Shading** and **Rendering** tab. | ||
| 为了在 Blender 中为对象添加动画，您可以切换到 **Shading** 和 **渲染** 选项卡旁边的 **Rendering** 选项卡。 |
There was a problem hiding this comment.
您可以切换到 Shading 和 Rendering 选项卡旁边的 Animation 选项卡。
|
|
||
| In the **Shading** tab, you can add nodes at the bottom of the screen. These nodes can modify the color and texture of an object, among other things. You'll also find `Vector` and `Shader` nodes that, when combined, can create unique visuals for your objects. | ||
| 在 **Shading** 选项卡中，可以在屏幕底部添加节点。这些节点可以修改对象的颜色和纹理等。你还会发现 “Vector” 和 “Shader” 节点，将它们组合起来可以为您的对象创建独特的视觉效果。 |
There was a problem hiding this comment.
原文中有些地方的代码块 在译文中是用引号表示，比如这里的 Vector 和 Shader，我在发布时修改。
|
|
||
| To summarize, if you find yourself facing a scenario where your materials don't appear as expected in your React.js application with Three.js, considering the baking process and researching this topic can provide valuable insights. This can be particularly beneficial for people who are new to Blender. | ||
| 总而言之，如果你发现自己面临的情况是材料没有在 Three.js 的 React.js 的应用程序中按照预期显示，那么考虑烘焙过程并研究该主题可以提供有价值的见解。 这对于 Blender 新手来说尤其有益。 |
There was a problem hiding this comment.
如果你在使用 Three.js 的 React.js 应用程序中遇到材料无法按预期显示的情况
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Checklist:
Update index.md)Closes #1175