react threejs

3D and creative programming can look like a gimmick, but the benefits of learning 3D are growing every day. For example, 3D libraries help in educational healthcare training, create new experiences for people with mobility issues, or even aid in aerospace engineering.

3D和创意编程看起来像个头，但是学习3D的好处每天都在增长。例如，3D库有助于教育保健培训，为行动不便的人们创造新的体验，甚至帮助航空航天工程。

Especially relevant today, AR streaming experiences are emerging on the entertainment scene, with DJ Dixon live streaming an AR experience for those of us at home in isolation!

如今特别重要的是，AR流媒体体验正在娱乐领域中兴起，DJ Dixon可以为我们中的家人单独提供实时流媒体AR体验！

I strongly suggest watching and listening to this set! 我强烈建议您观看和收听这套音乐！

Then there are the websites that allow shoppers to customise their products, often using libraries like Threejs. The list of uses is endless. It was this endless list of impacts that inspired me to learn Threejs in the first place. And in doing so, I stumbled across a few other libraries, with the most notable being one called ‘R3F’. That’s what I want to introduce in this post — in short though, you can look at it as “React meets Three.js”.

然后是一些网站，使购物者可以经常使用Threejs之类的库来定制他们的产品。用途的清单是无止境的。正是这种无穷无尽的影响力列表启发了我首先学习Threejs。这样做的时候，我偶然发现了其他一些库，其中最著名的是一个称为“ R3F”的库。这就是我要在本文中介绍的内容-简而言之，您可以将其视为“ React遇见Three.js”。

3D世界 (A World With 3D)

First though, a bit more of how I’ve got into 3D programming:

不过，首先，我要进一步了解3D编程：

I have always loved looking at objects from different perspectives. When I was a little girl, my mum used to tell me tales about tiny fairy communities living all around my garden. I would look at miniature models and picture the fairies using these small objects in their daily lives.

我一直喜欢从不同的角度看物体。当我还是个小女孩时，我的妈妈曾经给我讲过我周围花园里生活着的小精灵社区的故事。我将研究微型模型，并描绘在日常生活中使用这些小物件的仙女。

Since then, I have been in awe at 3D models that allow us to see objects from angles we do not usually see them in. We can pick up objects that are usually too large for us to lift and inspect them from a new perspective. When I began learning to code, I came across the Threejs library and the same feeling I had as a little girl was reignited inside of me. I knew from that moment that I wanted to create 3D experiences for users in a 2D environment.

从那时起，我一直对3D模型感到敬畏，该模型使我们能够从通常看不见的角度看到物体。我们可以拾取通常太大的物体，无法从新的角度抬起并检查它们。当我开始学习编码时，我遇到了Threejs库，并重新点燃了我小时候的感觉。从那一刻起，我就知道我想为2D环境中的用户创建3D体验。

互动体验 (Interactive Experiences)

If you get the same feelings as I do from 3D creative code, you’ll have a field day with a few of my favourite examples.

如果您从3D广告素材代码中获得与我相同的感受，那么您将会在野外活动日中得到一些我最喜欢的示例。

Easter Island
复活节岛
TinyPolyWorld
TinyPolyWorld
ThreeJS Gradient
ThreeJS渐变

Over the last year, I have been exploring 3D programming libraries, like ThreeJS. Staying true to my music, I encapsulated the audio data of one of my favourite tracks, Hot Summer Nights by Love Club using ThreeJS. It’s a real diamond of a song.

去年，我一直在探索3D编程库，例如ThreeJS。忠于我的音乐，我使用ThreeJS封装了我最喜欢的曲目之一“ Love Club的Hot Summer Nights”的音频数据。这是一首真正的歌曲。

Visualising the funk in ThreeJS 在ThreeJS中可视化放克

Naturally, I wanted to use ThreeJS in a React app. Enter React-Three-Fiber.

自然，我想在React应用程序中使用ThreeJS。输入React-Three-Fiber。

什么是R3F(React三光纤)？ (What is R3F (React-three-fiber)?)

React-three-fiber (commonly referred to as R3F) is a reconciler for Threejs. Anything you can do with ThreeJS, you can do in R3F. This was great news because I knew the world needed more disco balls visualising audio data!

React-three-fiber(通常称为R3F)是Threejs的协调器。使用ThreeJS可以做的任何事情，都可以在R3F中完成。这是个好消息，因为我知道世界需要更多的迪斯科舞会来可视化音频数据！

R3F takes care of all the tedious stuff when it comes to ThreeJS. You no longer have to worry about the Canvas or start the render loop. It also makes creating objects a million times easier. The website goes into it a bit deeper.

当涉及到ThreeJS时，R3F会处理所有繁琐的工作。您不再需要担心Canvas或开始渲染循环。这也使创建对象变得容易一百万倍。该网站对此进行了更深入的介绍。

R3F入门 (Getting Started With R3F)

The best starting point is to have a basic understanding of ThreeJS. It won’t take long to learn the basics.

最好的起点是对ThreeJS有基本的了解。学习基础不会花很长的时间。

Once you have the basics down of ThreeJS, it’s time to get started with R3F. I would recommend this tutorial. There aren’t many R3F tutorials online which can be frustrating in the beginning but there are ways around this. The best way I have found is recreating basic Threejs examples in R3F to get to grips. You of course, always have the documentation.

一旦您掌握ThreeJS的基础知识，就可以开始使用R3F。我会推荐本教程。最初没有多少R3F教程会令人沮丧，但是有很多方法可以解决此问题。我发现的最佳方法是在R3F中重新创建基本的Threejs示例以进行掌握。当然，您始终会拥有文档。

There is also a very active community on Spectrum. You can join this here.

在Spectrum上也有一个非常活跃的社区。您可以在这里加入。

The R3F Spectrum group has been a lifeline for me. Paul Henschel, the creator of R3F, regularly responds to questions. It was easy to find the answers to questions by searching through the posts.

R3F Spectrum组一直是我的生命线。 R3F的创建者Paul Henschel定期回答问题。通过搜索帖子很容易找到问题的答案。

R3F creator, Paul Henschel, posts regularly on CodeSandbox R3F创建者Paul Henschel定期在CodeSandbox上发帖

Paul posts often on Codesandbox. His sandboxes can help when you are trying to figure out how to implement simple elements in your code. His Twitter is also a great resource, he posts what he has recently been working on using R3F.

保罗经常在Codesandbox上发帖。当您试图弄清楚如何在代码中实现简单元素时，他的沙箱可以提供帮助。他的Twitter也是一个很好的资源，他发布了他最近在使用R3F方面所做的工作。

一些最后的话... (Some Last Words…)

At the beginning of any journey, it is hard to predict the paths may lead down. Maybe today you will begin with learning a new 3D programming library. Maybe tomorrow, you will be creating the next 3D educational resource that helps doctors and engineers or you will enhance our entertainment experience with an entirely new 3D world. Until then, it always starts with today.

在任何旅程的开始，都很难预测路线可能会向下。也许今天您将开始学习新的3D编程库。也许明天，您将创建可以帮助医生和工程师的下一个3D教育资源，或者您将通过全新的3D世界增强我们的娱乐体验。在此之前，总是从今天开始。

In my next article, I will be showing you how to create Planet Earth using R3F.

在下一篇文章中，我将向您展示如何使用R3F创建Planet Earth。

赶上我 (Catch me on social)

Twitter Instagram

推特 Instagram

翻译自: https://blog.prototypr.io/enter-the-3d-coding-world-react-threejs-r3f-439a06905e00