From 44a7d165cafca04a79c063b6325279085ed34b6a Mon Sep 17 00:00:00 2001 From: herosql <39084622+herosql@users.noreply.github.com> Date: Fri, 18 Aug 2023 16:31:38 +0800 Subject: [PATCH 01/68] =?UTF-8?q?=E4=BB=80=E4=B9=88=E6=98=AF=E7=AB=AF?= =?UTF-8?q?=E5=AF=B9=E7=AB=AF=E6=B5=8B=E8=AF=95=EF=BC=9F=E4=BB=80=E4=B9=88?= =?UTF-8?q?=E6=97=B6=E5=80=99=E4=BD=BF=E7=94=A8=E5=AE=83=EF=BC=9F=20(#1174?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat:complete directory translation * feat:complete part 2 * feat:complete part 3 * feat:complete part 4 * feat:complete part 4 * feat:complete part 5 * feat:complete part 6 * feat:completed part * feat:complete part 8 * feat:complete part 8 * feat:complete all need check * feat:check list 1 * feat:complete little revise * feat:overall check * feat:overall again check * feat:"complete part 1" * feat:"complete 2 page" * feat:"commplete 3 page" * Update tips-to-boost-your-seo.md feat:a page * Update tips-to-boost-your-seo.md feat:commit section * Update tips-to-boost-your-seo.md feat:commit little section * Update tips-to-boost-your-seo.md feat:finish first version * Update tips-to-boost-your-seo.md feat:check * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat: commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat: commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat: commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat:commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat: commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat: commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat:commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md feat:commit section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md fix: change section * Update how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library.md fix:change section * Update what-is-sql-injection-how-to-prevent-it.md feat:commit all * chore: upgrade Node.js version and other packages fix: add a local configuration command * Delete package.json * Delete README.md * Delete WebPageToMarkdown.yml * Delete main.yml * Revert "Delete main.yml" This reverts commit adffc3d5c510fc4b63707a12f1bfe9c2d868bccd. * Revert "Delete WebPageToMarkdown.yml" This reverts commit 51b9936b90703e2eddfb25d866c73cad4cfded71. * Revert "Delete README.md" This reverts commit 1f5b8eb95370ee155894e0bafab25eb7cd5d2e5d. * Revert "Delete package.json" This reverts commit 3d5b0ee788c4db2ad6f74ca6e648f350080a8f9c. * Revert "chore: upgrade Node.js version and other packages" This reverts commit 3b0094a7125ba3567bbb7f827d11d6b2e62065fa. * Update end-to-end-testing-tutorial.md feat:complete --------- Co-authored-by: tianheg Co-authored-by: miyaliu666 Co-authored-by: miya --- .../articles/end-to-end-testing-tutorial.md | 116 +++++++++--------- 1 file changed, 57 insertions(+), 59 deletions(-) diff --git a/chinese/articles/end-to-end-testing-tutorial.md b/chinese/articles/end-to-end-testing-tutorial.md index fd2fca33d..3aa9b3eaa 100644 --- a/chinese/articles/end-to-end-testing-tutorial.md +++ b/chinese/articles/end-to-end-testing-tutorial.md @@ -1,123 +1,121 @@ > - 原文地址：[What is End-to-End Testing and When Should You Use It?](https://www.freecodecamp.org/news/end-to-end-testing-tutorial/) > - 原文作者：Stan Georgian -> - 译者： +> - 译者：herosql > - 校对者： -![What is End-to-End Testing and When Should You Use It?](https://www.freecodecamp.org/news/content/images/size/w2000/2021/03/iam_os-Gr7q7kqfnVU-unsplash.jpg) +![什么是端到端测试，你应该在什么时候使用它？](https://www.freecodecamp.org/news/content/images/size/w2000/2021/03/iam_os-Gr7q7kqfnVU-unsplash.jpg) -Any serious application should be accompanied by a few test suites to validate its stability and performance. +每个重要的应用都应该配备一些测试套件，以验证其稳定性和性能。 -There are many types of tests, each with their own purpose that cover specific aspects of the application. And so when you're testing your app, you should make sure that you have a good balance of various tests. +有许多类型的测试，每种测试都有自己的目的，涵盖应用的特定方面。因此，当你测试你的应用时，你应该确保你有各种测试的良好平衡。 ![](http://media.giphy.com/media/UsmcxQeK7BRBK/giphy.gif) -But one type of test is often favored by developers over all others, and therefore tends to be overused. This type of testing is [end\-to\-end testing](https://www.freecodecamp.org/news/end-to-end-tests-with-selenium-and-docker-the-ultimate-guide/) (E2E). +但是有一种测试通常受到开发者的青睐，因此往往被过度使用。[端对端测试](https://www.freecodecamp.org/news/end-to-end-tests-with-selenium-and-docker-the-ultimate-guide/) (E2E)。 -## What Is End\-To\-End Testing? +## 什么是端对端测试 -For those who are still exploring the world of Software Testing, E2E testing is when you validate your entire application from start to finish, along with any of its dependencies. +对于那些仍在探索软件测试世界的人来说，E2E 测试是在完成应用程序及其所有依赖项时进行验证的过程。 -In E2E testing, you create an environment identical to the one that will be used by real users. Then you test all actions that your users might perform on your application. +在 E2E 测试中，你创建一个与真实用户将使用的环境相同的环境。然后测试用户可能在你的应用程序上执行的所有操作。 -With End\-To\-End testing, you test entire flows – like logging onto a website or buying a product from an online store. +通过端到端测试，您可以测试整个流程，比如登录网站或从在线商店购买产品。 ![](https://paper-attachments.dropbox.com/s_EA4D61AC224EF8447071464ABC3123BDD99BABBB705D8D6423915F4DE15DDD1B_1603950228233_2_++1+.jpg) -But if you overuse E2E testing, you're [Inverting the Testing Pyramid](https://automationpanda.com/2018/08/01/the-testing-pyramid/). I was in a situation like this. In one of my projects, I was planning to cover most cases with E2E tests – or even worse, use only the E2E test. Fortunately, I changed my mind. So now I want to share with you what I learned. +但是，如果你过度使用 E2E 测试，你就是在颠倒测试金字塔。我曾经遇到过这样的情况。在我的一个项目中，我计划用 E2E 测试覆盖大部分情况，甚至更糟糕的是，只使用 E2E 测试。幸运的是，我改变了主意。所以现在我想和你分享我学到的东西。 -## Why You Should Respect the Test Pyramid +## 为什么你应该遵循测试金字塔 -Chaotically written tests look and feel normal at first, but they will always be painful in the end. +乱七八糟地编写的测试起初可能看起来和感觉很正常，但最终总是令人痛苦的。 -We write tests to gain more time, and we do that with test automation. Of course, we could open our applications ourselves and test them manually. If we only had to do this once, then there would be no problem. But that's rarely the case. +我们编写测试是为了节省更多时间，我们通过自动化测试来实现这一点。当然，我们可以自己打开应用程序并手动测试它们。如果我们只需要做一次，那么就没有问题。但这种情况很少见。 -Software is always getting updated. So you need to perform continuous testing to stay on top of things. You can’t run all the tests manually each time the application gets updated. If you can write a test suite once and then run it every time you want to test an aspect of your application, you'll save a lot of time. +软件总是在不断更新。因此，你需要进行持续测试以保持领先地位。每次应用程序更新时，你都无法手动运行所有测试。如果你能编写一次测试套件，然后每次想要测试应用程序的某个方面时都运行它，你将节省大量时间。 -Each test has its own purpose. If you go beyond the boundaries of each type of test, your tests will start to harm rather than help you. This is because you will end up spending more time writing tests and maintaining them than developing the application itself. In other words, you'll lose one of the biggest benefits of automated testing. +每个测试都有其自己的目的。如果你超越了每种测试类型的界限，你的测试将开始对你造成伤害而不是帮助。这是因为你最终会花费更多的时间编写和维护测试，而不是开发应用程序本身。换句话说，你将失去自动化测试的最大优势之一。 -A good starting point is to follow the Testing Pyramid. It helps you figure out the right balance of tests. It represents an industry\-standard guideline, and it has endured since the mid\-2000s because it continues to be practical. +一个好的起点是遵循测试金字塔。它可以帮助你找到测试的正确平衡。它代表了行业标准的指南，自2000年代中期以来一直持续，因为它仍然具有实用性。 -So does that mean developers always follow its guidelines? Not really. A few times the pyramid will look like an inverted one, where most of the tests are E2E. Or it will look like an hourglass, where there are a lot of unit tests and E2E tests, but not many integration tests. +那么这是否意味着开发人员总是遵循其指南？并非如此。有时金字塔看起来像一个倒置的金字塔，其中大部分测试都是 E2E。或者它看起来像一个沙漏，有很多单元测试和 E2E 测试，但没有很多集成测试。 ![](https://paper-attachments.dropbox.com/s_EA4D61AC224EF8447071464ABC3123BDD99BABBB705D8D6423915F4DE15DDD1B_1603950198553_02.jpg) -## -The Three Layers of the Testing Pyramid +## 测试金字塔的三层 -A testing pyramid typically has three layers: Unit Tests, Integration Tests, and End\-to\-End Tests. Let's learn more about them now. +测试金字塔通常有三层：单元测试、集成测试和E2E测试。现在让我们详细了解它们。 +### 1\. 单元测试 -### 1\. Unit Tests +[单元测试](https://www.tutorialspoint.com/software_testing_dictionary/unit_testing.htm) 关注代码的最小单元，如函数或类。 -[Unit Tests](https://www.tutorialspoint.com/software_testing_dictionary/unit_testing.htm) focus on the smallest unit of code, like functions or classes. +它们简短且没有任何外部依赖。如果它们有外部依赖，你可以使用模拟对象代替。 -They are short and don’t have any external dependencies. If they have an external dependency, you use mocks instead. +如果一个单元测试失败，找到问题通常是一个简单的过程。它们的测试范围有限，使得编写、运行和维护变得简单、快速和容易。 -If a unit test fails, finding the issue is typically a simple process. They also have a reduced testing scope which makes them simple to write, fast to run, and easy to maintain. +### 2\. 集成测试 -### 2\. Integration Tests +[集成测试](https://www.tutorialspoint.com/software_testing_dictionary/integration_testing.htm) 关注两个独立实体之间的交互。它们通常运行速度较慢，因为需要设置更多内容。 -[Integration Tests](https://www.tutorialspoint.com/software_testing_dictionary/integration_testing.htm) focus on the interaction between two distinct entities. They are typically slower to run because more things need to be set up. +如果集成测试失败，找到问题会更具挑战性，因为失败范围更大。 -If integration tests fail, finding the issue is a bit more challenging because the failure range is bigger. +编写和维护集成测试也相对困难，主要是因为它们需要更高级的模拟和更广泛的测试范围。 -They are also harder to write and maintain, mostly because they need more advanced mocking and increased testing scope. +### 3\. 端对端测试 -### 3\. End\-To\-End tests +最后，E2E测试关注从最简单到最复杂的流程。它们可以被看成多步骤的集成测试。 -Lastly, E2E tests focus on flows, from the simplest up to the most complex. They can be viewed as a multi\-step integration test. +这些测试运行速度最慢，因为它们涉及构建、部署、启动浏览器以及在应用程序中执行操作。 -These tests are the slowest to run because they involve building, deploying, firing up a browser, and performing actions around the application. +如果E2E测试失败，找到问题通常很困难，因为现在失败范围扩展到整个应用程序。基本上，在路径中，任何东西都可能出问题。 -If E2E tests fail, finding the issue is often difficult because now the failure range is expanded to the entire application. Basically, along the path, anything could have broken. +在这里考虑的三种测试类型中，它们无疑是最难编写和维护的，因为测试范围巨大，而且涉及整个应用程序。 -They are by far the hardest type of tests to write and maintain (from the three types considered here) because of the huge test scope and because they involve the entire application. +希望你现在能明白为什么测试金字塔是这样设计的。从底层到顶层，每一层测试都代表着 **速度** 的降低以及 **范围、复杂性** 和 **维护性** 的增加。 -Hopefully you can now see why the testing pyramid has been designed in this way. From the bottom to the top, each layer of testing represents a decrease in **speed** and an increase in **scope, complexity** and **maintenance.** +这就是为什么要记住的一件重要事情是，E2E测试不能取代其他方法——它是为了扩展它们。E2E测试的目的是定义明确的，测试不应超出这个范围。 -That’s why one important thing to remember is that E2E testing cannot replace other methods – it is meant to extend them. The purpose of E2E testing is well\-defined, and the tests should not extend beyond that boundary. +理想情况下，测试应该尽可能地在金字塔的根部捕捉到错误。E2E测试的目的是验证按钮、表单、更改、链接、外部流程以及整个工作流程的功能是否正常运行。 -Ideally, tests should catch bugs as close to the root of the pyramid as possible. E2E is here to validate buttons, forms, changes, links, external processes, and generally and entire workflow's function without problems. +## 用代码测试与无代码测试 -## Testing with Code vs Codeless Testing +总的来说，有两种测试类型：手动测试和自动化测试。这意味着我们可以通过手动或使用脚本进行测试。 -In general, there are two types of testing: manual testing and automated testing. This means that we do the testing either by hand or by using scripts. +第二种方法是最常用的。但是自动化测试可以进一步分为两部分： +**用代码测试** 和 **无代码测试**。 -The second method is the most commonly used. But automated testing can be further separated into two parts: **testing with** **code** and **codeless testing.** +### 用代码测试 -### Testing with Code +当你使用代码进行测试时，你可以使用能够自动化浏览器的框架。最受欢迎的工具之一是 [Selenium](https://www.selenium.dev/)，但我更喜欢并经常在我的项目中使用 [Cypress](https://www.cypress.io/)（仅适用于 JavaScript）。然而，它们的工作方式大致相同。 -When you're testing with code, you use frameworks that can automate browsers. One of the most popular tools is [Selenium](https://www.selenium.dev/), but I prefer and often use [Cypress](https://www.cypress.io/) in my projects (only for JavaScript). Still, they mostly work in the same way. +基本上，使用这样的工具，你可以模拟网络浏览器并指示它们在目标应用程序上执行不同的操作。之后，你可以测试应用程序是否对相应的操作做出了响应。 -Basically, with tools like this, you mock up web browsers and instruct them to perform different actions on your target application. After that, you test to see if your application has responded to the corresponding actions. - -This is a simple mock example taken from the Cypress documentation to help you better understand how this tool works: +下面是一个简单的模拟示例，摘自 Cypress 文档，以帮助你更好地了解这个工具的工作原理： ![](https://paper-attachments.dropbox.com/s_EA8BC9D2CF83E24BF57AB3EC5A73F372F5ADA41ABD62DE1DA2D26BB58DE3CD82_1603530185695_carbon.png) -[Raw code from doc](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Step-4-Make-an-assertion) - -Let's look at what's going on: +[来自文档的原始代码](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Step-4-Make-an-assertion) -1. Given a user visits https://example.cypress.io -2. When they click the link labeled type, then the URL should include /commands/actions -3. If they type “[fake@email.com](mailto:fake@email.com)“ into the .action\-email input then the .action\-email input has “[fake@email.com](mailto:fake@email.com)“ as its value +让我们看看发生了什么： +1. 假设用户访问 https://example.cypress.io +2. 当他们点击标签为"type"的链接时，URL 应该包含 /commands/actions +3. 如果他们在 .action-email 输入框中输入 “[fake@email.com](mailto:fake@email.com)“，那么 .action-email 输入框的值应为 “[fake@email.com](mailto:fake@email.com)“。 -### Codeless Testing +### 无代码测试 -In a **codeless** testing situation, you use frameworks powered by Artificial Intelligence that record your actions. Based on some additional information, they test if the target application responds as expected. +在 **无代码** 测试情况下，你使用由人工智能驱动的框架来记录你的操作。根据一些额外的信息，它们测试目标应用程序是否按预期响应。 -These tools often look like low code platforms, where you drag and drop different panels. One of these tools is [TestCraft](https://www.testcraft.io/) which is a **codeless** solution built upon Selenium. +这些工具通常看起来像低代码平台，你可以拖放不同的面板。其中一个工具是 [TestCraft](https://www.testcraft.io/)，它是基于 Selenium 的 **无代码** 解决方案。 ![](https://paper-attachments.dropbox.com/s_EA8BC9D2CF83E24BF57AB3EC5A73F372F5ADA41ABD62DE1DA2D26BB58DE3CD82_1603531312592_ezgif-3-e3440d13da31.gif) -Because of the features they offer (like creating, maintaining, and running tests with simple drag\-and\-drop options and no coding knowledge), this kind of tool usually comes at a higher price. But I wanted to mention [TestCraft](https://www.perfecto.io/blog) because they have a free plan which basically includes everything. +由于它们提供的功能（如使用简单的拖放选项创建、维护和运行测试，无需编码知识），这类工具通常价格较高。但我想提一下 [TestCraft](https://www.perfecto.io/blog) ，因为它们有一个基本包含所有内容的免费计划。 -Now, of course, a codeless solution can be an advantage if you want speed and money, but these solutions are still new. Therefore, they can’t yet reach the complexity of test suites that you can develop by writing the code yourself. +当然，如果你想要速度和省钱，无代码解决方案可能有优势，但这些解决方案很新。因此，它们还无法解决你自己通过代码才能解决的复杂测试。 -If the target application has some very complex flows that include multiple moving parts, then a classic testing situation is the way to go. But if you have simple flows, then a codeless solution is what you need. +如果目标应用程序具有一些非常复杂的流程，包括多个移动部件，那么传统的测试方法是最佳选择。但是，如果你有简单的流程，那么无代码解决方案正是你所需要的。 -## Wrapping up +## 总结 -Writing tests is a must for any application. If you follow solid principles and write your test suites according to their type, then your tests will only improve your application and will also be fairly easy to write and maintain. +为任何应用编写测试是必不可少的。如果你遵循基本的原则并根据测试类型编写测试套件，那么你的测试将只会改善你的应用程序，并且编写和维护起来也相对容易。 -You should only use end\-to\-end tests, like any other test, in the ways their meant to be used. They're created to test the application's workflow from beginning to end by replicating real user scenarios. But in the end, remember that most bugs should be caught as close to the root as possible. +你应该只在适当的场景下使用端到端测试，就像其他测试一样。它们的目的是通过模拟真实用户场景，从头到尾测试应用程序的工作流程。但最后，请记住，大多数错误应尽可能在根源处被捕获。 From c133a8b1c3e414c0f50e4d758e11438904cc1590 Mon Sep 17 00:00:00 2001 From: xgqfrms Date: Mon, 21 Aug 2023 06:37:21 +0000 Subject: [PATCH 02/68] =?UTF-8?q?[Auto]=EF=BC=88=E5=A6=82=E4=BD=95?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=20Three.js=20=E5=9C=A8=20React.js=20?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E7=A8=8B=E5=BA=8F=E4=B8=AD=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E4=B8=80=E4=B8=AA=20Blender=20=E6=A8=A1=E5=9E=8B=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- chinese/articles/blender-three-js-react-js.md | 439 ++++++++++++++++++ 1 file changed, 439 insertions(+) create mode 100644 chinese/articles/blender-three-js-react-js.md diff --git a/chinese/articles/blender-three-js-react-js.md b/chinese/articles/blender-three-js-react-js.md new file mode 100644 index 000000000..6c62e1fd1 --- /dev/null +++ b/chinese/articles/blender-three-js-react-js.md @@ -0,0 +1,439 @@ +> - 原文地址：[How to Implement a Blender Model in a React.js Application using Three.js](https://www.freecodecamp.org/news/blender-three-js-react-js/) +> - 原文作者：[Matthes Bär](https://www.freecodecamp.org/news/author/matthes-bar/) +> - 译者： +> - 校对者： + +![How to Implement a Blender Model in a React.js Application using Three.js](https://www.freecodecamp.org/news/content/images/size/w2000/2023/08/pexels-chevanon-photography-1335971.jpg) + +In this step-by-step guide, you'll learn how to build a basic Blender file with incorporated fundamental animations. After that, you'll learn how to integrate Three.js with your React apps using React Three Fiber. + +Getting familiar with these concepts can help you make sure your upcoming React.js applications stand out. + +## ******🔐****** Here's What We'll Cover: + +- Crafting a Blender model, encompassing animations, materials and the export process. +- Building a React.js application integrated with Three.js via React Three Fiber. +- Incorporating your personally created Blender model into the React.js application. + +## **************📝************** Prerequisites: + +- A fundamental grasp of the 3D software Blender is recommended. +- Basic familiarity with React.js is required. +- Prior experience with Three.js is not necessary. + +## Table of Contents + +1. [💭 What are Three.js and Blender?](#-what-are-three-js-and-blender) +2. [🔧 How to Set Up React.js with Three.js](#-how-to-set-up-react-js-with-three-js) +3. [**🔨** How to Create a Blender Model](#-how-to-create-a-blender-model) +4. [**✏️** Texture Baking for Procedural Materials](#-texture-baking-for-procedural-materials) +5. [**✒️** How to Implement the Blender Model into the React.js Application](#-how-to-implement-the-blender-model-into-the-react-js-application) +6. [**📄** Additional information](#-additional-information) +7. [**📋** Wrap-up](#-wrap-up) + +## 💭 What are Three.js and Blender? + +Three.js is a JavaScript library that functionas as an API, allowing you to exhibit 3D models within web browsers. + +Leveraging Three.js helps you seamlessly integrate interactivity and distinctive functionalities into your website. + +Blender is a robust software tailored for crafting and refining 3D models. Its versatility offers boundless opportunities, catering to a wide spectrum of creative visions. + +Beyond its display capabilities, Blender provides you with an array of tools encompassing cameras, lighting, and even post-production enhancements. + +When used together, these tools facilitate boundless creativity, allowing you to seamlessly translate your artistic creations into your upcoming website project. + +## 🔧 How to Set Up React.js with Three.js + +To start the process, install the React.js application: + +`npx create-react-app my-app` + +Next, we'll install Three.js and [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/installation). React Three Fiber serves as a React renderer for Three.js, harnessing the power of React components to streamline Three.js integration within a React.js environment: + +`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: + +`npm install @react-three/drei` + +### glTF Tools extension + +I also recommend installing the **glTF Tools** extension. Although not strictly necessary, this extension can help you perform various tasks. + +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: + +![React1.0](https://www.freecodecamp.org/news/content/images/2023/08/React1.0.PNG) + +**gltf Tools** extension in Visual Studio Code + +### Completed setup for Three.js in React.js + +The dependencies in the `package.json` file of our React.js application now appear as follows: + +```JavaScript +"dependencies": { + "@react-three/drei": "^9.80.2", + "@react-three/fiber": "^8.13.6", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "three": "^0.155.0", + "web-vitals": "^2.1.4" + }, +``` + +Dependencies in the package.json file, including React Three Fiber and React Three Drei + +These dependencies are sufficient for accomplishing a variety of tasks with Three.js in a React.js environment. Of course, you can incorporate any additional libraries you may desire for purposes beyond Three.js integration. + +In addition to this, I have also made the code from this tutorial available on [GitHub](https://github.com/Matthes-Baer/blender-threejs-reactjs-article-app). This will allow you to quickly access the information without having to scroll through the entire article. + +## 🔨 How to Create a Blender Model + +To begin, our initial task involves creating a Blender model that will then be integrated into our React.js application. For this stage, let's consider a scene in the **Layout** tab where we've got three objects: two spheres and one plane. You can add such objects with the `Shift + A` shortcut in Blender. + +![blenderFirstImage](https://www.freecodecamp.org/news/content/images/2023/08/blenderFirstImage.PNG) + +Blender scene with two spheres and one plane in the **Layout** tab + +This composition includes just a plane and two spheres, with no additional details. Of course, you can work on more elaborate scene and model designs according to your preferences. + +But for the purpose of illustrating the fundamental process of incorporating your custom Blender models into React.js, this basic example will serve us just fine. + +### How to add animations to the model + +Now, our focus shifts to introducing basic animations to all three objects within this Blender scene. These animations can facilitate movement, rotation, or even adjustments in scale for the objects, enabling dynamic transformations. + +In order to add animations in Blender for your objects, you can switch to the **Animation** tab, next to the **Shading** and **Rendering** tab. + +In the Animation tab, you can add points to a certain frame. For instance, if you want to shift a sphere a bit to the left, begin by adding a starting keyframe (right-click on the object, choose "Insert Keyframe," then pick "Location"). + +Afterward, move ahead a few frames on the object's animation timeline, adjust the object's position, and repeat the same process. This way, you'll have two keyframes: the initial one and the new position. + +Remember, this motion is in one direction. If you want to repeat the animation, it will move to the new location and then return to its initial position with a jump. + +To make the movement smoother, you can copy the initial keyframe and insert it at the end. This will make the object move back with a smooth motion after reaching the new location. This is also how I set up the keyframes in our Blender model. + +Of course, you can add more keyframes to make more complex animations. This is just a basic introduction to starting with Blender animations. Like many aspects of Blender, there's a lot more to explore and learn. + +![blenderSecondImage](https://www.freecodecamp.org/news/content/images/2023/08/blenderSecondImage.PNG) + +Adding animations to all three objects in the **Animation** tab + +In this context, it's not necessary to have a thorough understanding of the specifics of these animations we added here. So, you don't really need to know to which exact position the first sphere is being moved through the animation. + +The key point is to acknowledge their presence, as they will be integrated into our React.js application at a later stage so we can activate them in the browser. + +### How to add colors + +Moving forward, we'll add some simple colors for the small sphere and the underlying plane, which you can do within the **Shading** tab, for example. + +For basic colors, you can also go to the **Material Properties** section of the object (right-click on the object, then choose the second-to-last category at the bottom). But I want to focus on a specific situation you might encounter with your models later on. Therefore, I'll exclusively use the **Shading** tab for setting object colors in this tutorial. + +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. + +All these adjustments apply to a specific material. So, if you want the same visual for different objects, you can simply apply the same material to them. + +The `Principled BSDF` and `Material Output` nodes are initially generated when we open the **Shading** tab to look up on of our object's material for the first time. Both nodes are pretty much the basic case. + +The `Principled BSDF` has a lot of settings you can play around with. In our case we just want to change the `Base Color` property to a blue color. + +![blender3.0](https://www.freecodecamp.org/news/content/images/2023/08/blender3.0.PNG) + +Material of one sphere where we just adjust the `Base Color` within the `Principled BSDF` node + +For the larger sphere, a similar material application is used. But, in contrast to the `Principled BSDF` node, we'll use the `Glossy BSDF` node which is such a node from the `Shader` category. This will help us recognize a possible issue that you might come across when designing a Blender model for your React.js application – which you will see later on. + +![blender3.2-1](https://www.freecodecamp.org/news/content/images/2023/08/blender3.2-1.PNG) + +Using the `Glossy BSDF` node to add a material to the large sphere + +Once we've done this, we're ready to export our Blender model. Note that this version is considerably simplified. You can work on more detailed model designs tailored to your preferences. Still, the overall workflow remains similar. + +### How to export the model + +To export the model, we need to generate a `.glb/.gltf` file. This is crucial as Three.js expects particular file formats for compatibility, and in this instance, a `.glb` or `.gltf` file aligns with the library's requirements. + +So, once you've finished creating your model with objects, animations, colors, and more, you can do the following: + +1. Click on the **File** tab located at the top left corner. +2. Choose **Export** from the options that appear. Now, a variety of export formats will be shown. +3. If you plan to use your model with Three.js in your application, you need to pick the `glTF 2.0 (.glb/.gltf)` option, like I mentioned earlier. + +After selecting this option, a new window will pop up. This window lets you pick the folder where you want to save your file. + +On the right side of this window, there are additional choices. You can decide which specific objects you want to export, for instance. In most situations, the default settings should work well. Just remember that you can adjust these settings to your liking if necessary. + +![blender3.1-1](https://www.freecodecamp.org/news/content/images/2023/08/blender3.1-1.png) + +Remember to export with the `glTF 2.0 (.glb/.gltf)` format. + +### How to visualize the exported model + +Next, let's transition to Visual Studio Code and navigate to the folder where we've stored our exported file. + +Within this directory, you'll find a `.glb` file. Referring back to the **glTF Tools** extension setup from earlier, you can simply right-click on the `.glb` file in order to find two additional options positioned at the bottom, called `glTF: Import from GLB` and `glTF: Validate a GLB or GLTF file`. + +In this scenario, we'll opt for the `glTF: Import from GLB` option. This action will generate a `.gltf` file in the same folder, in our case `blenderFile.gltf`. + +![blender4.0](https://www.freecodecamp.org/news/content/images/2023/08/blender4.0.png) + +Generating a `.gltf` file from the original `.glb` file we exported in Blender with the **glTF Tools** extension + +We've chosen this approach to bring enhanced accessibility to the `.gltf` file, enabling direct viewing within Visual Studio Code through the **glTF Tools** extension. This can be quite helpful to check on your file prior to its actual implementation. + +If we access the newly created `.gltf` file, we can observe a bunch of information based on the Blender model. It's important to note that the specifics could differ in your case, as they're tailored to reflect the attributes of the objects and scenes within your Blender project. + +If we look at the upper-right corner, there is a symbol that looks like a cube with a cone next to it. By clicking on this symbol, you can seamlessly preview your Blender scene directly within your IDE. This functionality is exclusively accessible for the `.gltf` file and not applicable to the `.glb` file in this case. + +![blender4.5](https://www.freecodecamp.org/news/content/images/2023/08/blender4.5.png) + +The newly created `.gltf` file with the option to view the model directly in Visual Studio Code (in the upper-right corner, circled in red) + +It's worth noting that you don't have to do this through the **glTF Tools** extension. Alternatively, various websites allow you to upload your file for visualization. But I've personally found this in-IDE approach to be especially convenient. It centralizes the process, enabling you to assess your file's integrity before actually implementing it. + +If you find any errors, this practice lets you preemptively find out whether the issue is based on a problematic file export or just an implementation oversight within your React.js application. Consequently, I wholeheartedly recommend evaluating your model file following its export from Blender. + +![blender5.0](https://www.freecodecamp.org/news/content/images/2023/08/blender5.0.PNG) + +Viewing the Blender model with **glTF Tools** in Visual Studio Code + +By using the **glTF Tools** extension to view our Blender model in Visual Studio Code, we can see that all three objects are correctly recognized. Both the small sphere and the plane are shown in their intended colors. + +But the large sphere doesn't have the expected color assigned and just appears with a default white color instead. + +This discrepancy raises the question: what led to this anomaly? It's circumstances like this that demonstrate how useful it is to preview your model before integrating it into your React.js application. + +By scrutinizing your model at this stage, you can affirm that the issue originates from the Blender model itself rather than the implementation process, given that we haven't done any implementation yet. + +This pre-implementation assessment proves to be handy and enables you to diagnose and address potential complications before proceeding with the implementation process in React.js. + +## ✏️ Texture Baking for Procedural Materials + +In a nutshell, Blender provides the flexibility to employ procedural nodes for your materials. While these nodes function seamlessly within Blender, they are not directly compatible with other game engines or software frameworks such as Three.js. + +To learn more, consider watching the following video. In just 10 minutes, it demonstrates the process of texture baking, which effectively resolves the issue at hand. + +Tutorial on Texture Baking of Procedural Materials + +Personally, when confronted with this challenge and initially uncertain about its nature, I found this video to be a valuable resource for gaining deeper insights into the subject matter. + +In our specific scenario, while we might not encounter as complex a situation as seen in the video, we are still faced with the use of nodes that lack direct compatibility with various software tools. + +Next, we'll briefly walk through the steps mentioned in the video. However, if you're interested in delving deeper into this process, I highly recommend watching the video. + +### How to create an image texture node + +To start, in the **Shading** tab for the material containing the `Glossy BSDF` node, we'll introduce an `Image Texture` node and connect it to a new image (by click on `New`). + +We'll leave the settings at their default values, which means a width and height of `1024px`. Using larger values would considerably extend the processing time we're going to face. Still, it's important to note that a larger texture can offer more detail and an overall improved appearance. + +In our current situation, we're aiming for a quick process. But for more significant projects, visual quality might be crucial. In such cases, opting for a higher resolution could be desirable. + +![blender6.0-1](https://www.freecodecamp.org/news/content/images/2023/08/blender6.0-1.PNG) + +Creating an `Image Texture` node and assigning a new image to it with default settings + +### How to apply the Smart UV Project process + +Next, we need to employ the `Smart UV Project` option located in the **UV Editing** tab. Essentially, this action unwraps the faces of the particular object onto a texture. + +This process enables us to specify which parts of the texture should be colored and modified as soon as we are back in the **Shading** tab. To make this process effective, we must select all the faces of the large sphere. + +![blender7.0](https://www.freecodecamp.org/news/content/images/2023/08/blender7.0.png) + +Selecting all faces of the object in the **UV Editing** tab and applying `Smart UV Project` on it + +Once we've finished this step and utilized the default settings for the `Smart UV Project` procedure, the image on the left —previously featuring a grid— will now display the shapes of the sphere we applied this process to. In our situation, it seems like the texture captured various angles of our sphere. + +![blender8.0](https://www.freecodecamp.org/news/content/images/2023/08/blender8.0.PNG) + +The texture after `Smart UV Project` + +Depending on the specific object, you may need to fine-tune the settings presented after clicking the `Smart UV Project` button. If you encounter challenges with a particular object, the video I shared earlier can give you additional guidance on this aspect. + +Generally, to mitigate issues, you should optimize your object layout during its creation phase. Avoiding the introduction of excessive edges in specific locations can prevent problems like clipping, for instance. + +### The Bake process + +Now, let's return to the **Shading** tab, where we'll access the `Render Properties` on the right side (represented by the small screen or TV symbol). If not already selected, pick `Cycles` as your `Render Engine`. Then navigate to the `Bake` category, which is located below the `Performance` category. + +![blender9.0-1](https://www.freecodecamp.org/news/content/images/2023/08/blender9.0-1.PNG) + +`Bake` option in the **Shading** tab within the `Render Properties` + +With the existing default settings, you can proceed by clicking the `Bake` button while ensuring that both the `Image Texture` node and the large sphere are selected. + +Keep in mind that I integrated a `Sun` light into my scene, as this bake process takes the scene's lighting into account. Without sufficient lighting, the result might appear excessively dark. + +After a period of processing (which might be more time-consuming if you've employed larger dimensions for the `Image Texture` node's image), the baking process will finish. This results in the texture being applied to the image from the `Image Texture`. Instead of obtaining the texture from the `Shader` node named `Glossy BSDF`, we now have access to it through a regular "normal" image texture. + +Then we can establish a connection from the `Image Texture` node to the `Material Output` node, thereby successfully implementing our material. At this stage, there isn't a significant difference compared to the previous method where we had the `Principled BSDF` node connected to the `Surface` input of the `Material Output` node. + +![blender10.0](https://www.freecodecamp.org/news/content/images/2023/08/blender10.0.PNG) + +`Image Texture` node with the "baked" texture is connected with the `Material Output` node instead of the `Glossy BSDF` node + +### How to see the final result + +Now, we can export the file again, repeat the same process from before in our IDE with **glTF Tools** and view the `.gltf` file with the extension. Upon examining the outcome, you might notice that it's not an exact match to the version we had using the `Glossy BSDF` node in Blender. This difference can be primarily attributed to the lighting conditions in the Blender scene. + +Bear in mind that the approach I've outlined isn't the typical usage for the baking process, since in this case you could also just have picked a similar base color with the `Principled BSDF` node and would achieve pretty much the same solution, for example. + +![blender11.0](https://www.freecodecamp.org/news/content/images/2023/08/blender11.0.PNG) + +Finalized view with **glTF Tools**, including the "baked" texture for the large sphere + +I introduced the baking process based on personal experience. There were instances where I encountered a scenario where materials appeared differently in Blender compared to when implemented them in a React.js application with Three.js. This situation prompted me to explore the concept of baking, which turned out to be a helpful solution. + +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. + +## ✒️ How to Implement the Blender model in the React.js Application + +To implement the Blender file, we can use a really useful shortcut (source: [https://github.com/pmndrs/gltfjsx](https://github.com/pmndrs/gltfjsx)): + +`npx gltfjsx public/blenderFileName.glb` + +It's important to note that you need to store your Blender file within the `public` folder of your React.js application for this step. It's also worth highlighting that you need React Three Drei to use this helper. So in our case, we can directly use this shortcut without the need for any additional preparations. + +Upon executing this shortcut, we are presented with the following file: + +```JavaScript +/* +Auto-generated by: https://github.com/pmndrs/gltfjsx +Command: npx gltfjsx@6.1.4 public/blenderStuff/blenderFile.glb +*/ + +import { useLayoutEffect, useRef } from "react"; +import { useGLTF, useAnimations } from "@react-three/drei"; + +export function Model(props) { + const group = useRef(); + const { nodes, materials, animations } = useGLTF( + "./blenderStuff/blenderFile.glb" + ); + const { actions } = useAnimations(animations, group); + + return ( + + + + + + + + ); +} + +useGLTF.preload("./blenderStuff/blenderFile.glb"); +``` + +blenderFile.jsx, including the basic code to make it work + +At first glance, you can see that this process has added many elements, so we basically don't need to add much on our own. + +An important aspect to configure is the path within the `useGLTF` hook. In my instance, the accurate path to incorporate is `./blenderStuff/blenderFile.glb` (this applies to `useGLTF.preload()` as well). This is because I created a sub-folder named `blenderStuff` within my `public` directory. + +### How to add a Canvas wrapper and other components + +With this configuration in place, we're now ready to use the `Model` component. But to effectively integrate this `Model` component into our desired location, we need to make some adjustments in the parent component. + +In my case, I've opted to implement it within the main `App.js` file. And I've assigned a height of `100vh` to the `App`'s CSS class to ensure the desired display. + +```JavaScript +import "./App.css"; +import { Model } from "./BlenderFile"; +import { Canvas } from "@react-three/fiber"; +import { OrbitControls } from "@react-three/drei"; + +function App() { + return ( +
+ + + + + +
+ ); +} + +export default App; +``` + +App.js, including the `Canvas` wrapper, the `Model` and other components + +Generally speaking, you'll need a component to encapsulate all the Three.js related elements. Within the `Canvas` component, there's an opportunity to configure various settings. In my specific instance, I'm adjusting the initial camera position. + +The light for the component plays a crucial role. In our case we made use of `ambientLight` which will add a light to the whole scene. Without adequate lighting, your scene might appear exceedingly dark or even entirely black despite the presence of object colors. You can also use additional light sources like the `spotLight` component. + +The `OrbitControls` component, accessible from the Drei helper library, enhances your interactivity by enabling scrolling and rotation within the model right within the browser. This single line of code substantially improves user interactivity options. + +Remember that your `Canvas` component can accommodate multiple models. You can also selectively apply components like `OrbitControls` to specific Blender models, thereby tailoring their behavior. + +To do this, you'll need to build a parent component for each scene you want to make to be integrated within the `Canvas`. Within each new parent component, incorporate your Blender model component, along with any supplementary helper components you want to add. + +This approach proves particularly advantageous when distinct models require different lighting or unique camera positions, for example. + +### How to implement the animations + +At this point, we've established a functional Three.js `Canvas` environment, featuring our Blender model. But it's important to remember that we've also introduced basic animations, which are not yet operational. + +To tackle this, we can leverage the pre-implemented `useAnimations` hook. + +```JavaScript + const { actions, names } = useAnimations(animations, group); + + useLayoutEffect(() => { + names.forEach((animation) => { + actions?.[animation]?.play(); + }); + }, [actions, names]); +``` + +Part in blenderFile.jsx on how to activate the model animations upon page rendering + +By incorporating this implementation, all animations associated with this Blender model will start playing upon the rendering of the page. This behavior also includes an indefinite loop for each animation. + +## 📄 Additional Information + +While this tutorial primarily focused on integrating a Blender model into a React.js application using Three.js, there's a realm of untapped potential within Three.js that we didn't cover. + +Although we didn't use it in this basic example, you can introduce Post Processing to your Three.js models within React.js. The [React Three Postprocessing](https://www.npmjs.com/package/@react-three/postprocessing) library serves as a valuable tool in this regard. It lets you elevate your Three.js scenes with sophisticated effects like Bloom or Noise effects, which can add a more advanced dimension to your visualizations. + +Also, when working on future Three.js projects, consider exploring the [React Spring](https://docs.pmnd.rs/react-three-fiber/tutorials/using-with-react-spring) library which integrates well with React Three Fiber. React Spring provides the opportunity to incorporate custom animations within your Three.js scenes, on top of any animations directly integrated within Blender. + +For instance, you could make a specific object within your scene get larger or smaller upon clicking it. As with other aspects of Three.js, this aspect might enhance interactivity and might be worth your time to get into. + +By the way, if you find that your frames are running at a lower rate, consider toggling Hardware Acceleration within your browser settings to potentially improve performance. + +## 📋 Wrap-up + +At this point, we've successfully crafted a Blender model with animations and materials. Afterwards we integrated it into our React.js application using React Three Fiber. + +Although the example we looked at here was quite basic, the integration approach remains the same for more complex Blender models. The fundamental functions of Three.js can be combined with supplementary helpers to enhance your scenes. + +In addition to Post Processing, additional animations or also specific Blender materials, aspects like cameras and lights often are the most important when aiming to enhance the visual impact of your Blender models within Three.js scenes. \ No newline at end of file From d1f3292829983b2c4a94fb4bd3a578497c7b8613 Mon Sep 17 00:00:00 2001 From: xgqfrms Date: Sun, 3 Sep 2023 11:18:31 +0800 Subject: [PATCH 03/68] =?UTF-8?q?docs:=20=E5=A6=82=E4=BD=95=E5=88=9B?= =?UTF-8?q?=E5=BB=BA=E5=92=8C=E5=8F=91=E5=B8=83=E4=B8=80=E4=B8=AA=20Vue=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BA=93=20=E2=80=93=202023=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=20(#1176)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update how-to-create-and-publish-a-vue-component-library-update.md 如何创建和发布一个 Vue 组件库 – 2023 更新 * docs: translation complete ✅ how-to-create-and-publish-a-vue-component-library-update.md --- ...-publish-a-vue-component-library-update.md | 74 +++++++++---------- 1 file changed, 36 insertions(+), 38 deletions(-) diff --git a/chinese/articles/how-to-create-and-publish-a-vue-component-library-update.md b/chinese/articles/how-to-create-and-publish-a-vue-component-library-update.md index 7b2edc97a..a3bdc6bbb 100644 --- a/chinese/articles/how-to-create-and-publish-a-vue-component-library-update.md +++ b/chinese/articles/how-to-create-and-publish-a-vue-component-library-update.md @@ -1,25 +1,25 @@ -> - 原文地址：[How to Create and Publish a Vue Component Library – 2023 Update](https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library-update/) +> - 原文地址：[如何创建和发布一个 Vue 组件库 – 2023 更新](https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library-update/) > - 原文作者：[Brian Barrow](https://www.freecodecamp.org/news/author/brian/) -> - 译者： +> - 译者：xgqfrms > - 校对者： -![How to Create and Publish a Vue Component Library – 2023 Update](https://www.freecodecamp.org/news/content/images/size/w2000/2023/05/pexels-pixabay-159711.jpg) +![如何创建和发布一个 Vue 组件库 – 2023 更新](https://www.freecodecamp.org/news/content/images/size/w2000/2023/05/pexels-pixabay-159711.jpg) -Back in 2020, I [wrote a post](https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/) about building a Vue Component library. Since then the package I used has been deprecated, and the recommended way to build a library/package is to use Vite. +早在 2020 年，我就[写了一篇](https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/) 关于构建 Vue 组件库的文章。自从那以后，我使用的包已被弃用了，构建一个库/包的推荐方法是使用 Vite。 -## Getting Started +## 入门 -I started off the project by running `npm create vite@latest` and naming my project `brian-component-lib` to stay consistent with my previous post. I also chose to use TypeScript and Vue when those options came up. +我通过运行 `npm create vite@latest` 启动该项目，并将我的项目命名为 `brian-component-lib`，以便与我之前的文章保持一致。当这些选项出现时，我也选择了使用 TypeScript 和 Vue。 -## The Component +## 组件 -The component I built is a clone of the buttons used on freeCodeCamp.org +我构建的组件是 freeCodeCamp.org 上使用的按钮的一个克隆 ![image-160](https://www.freecodecamp.org/news/content/images/2023/05/image-160.png) -Button component we are building +我们正在构建的按钮组件 -Here is the code for that component. Note that it is using TypeScript and the `script setup` format available in Vue 3. +这是该组件的代码。请注意，它使用了 TypeScript 和 Vue 3 中可用的 `script setup` 格式。 ```js +``` + +Custom Elements have been around for a while, and until now there was no reason to check for an existing shadow root before creating one using `attachShadow()`. Declarative Shadow DOM includes a small change that allows existing components to work despite this: calling the `attachShadow()` method on an element with an existing **Declarative** Shadow Root will **not** throw an error. Instead, the Declarative Shadow Root is emptied and returned. This allows older components not built for Declarative Shadow DOM to continue working, since declarative roots are preserved until an imperative replacement is created. + +For newly-created Custom Elements, a new [`ElementInternals.shadowRoot`](https://github.com/WICG/webcomponents/issues/871) property provides an explicit way to get a reference to an element's existing Declarative Shadow Root, both open and closed. This can be used to check for and use any Declarative Shadow Root, while still falling back to `attachShadow()` in cases where one was not provided. + +```javascript +class MenuToggle extends HTMLElement { constructor() { super(); const internals = this.attachInternals(); // check for a Declarative Shadow Root: let shadow = internals.shadowRoot; if (!shadow) { // there wasn't one. create a new Shadow Root: shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ``; } // in either case, wire up our event listener: shadow.firstChild.addEventListener('click', toggle); }}customElements.define('menu-toggle', MenuToggle); +``` + +## [#](#one-shadow-per-root) One shadow per root + +A Declarative Shadow Root is only associated with its parent element. This means shadow roots are always colocated with their associated element. This design decision ensures shadow roots are streamable like the rest of an HTML document. It's also convenient for authoring and generation, since adding a shadow root to an element does not require maintaining a registry of existing shadow roots. + +The tradeoff of associating shadow roots with their parent element is that it is not possible for multiple elements to be initialized from the same Declarative Shadow Root `