react threejs_您的3D荒野方位：React-Three-Fiber中的ThreeJS助手-CSDN博客

react threejs

Our planet is layered with millions of digital windows that exhibit a terrain vastly assembled from 2D interfaces. With the rise of 3D browser support and AR development kits (e.g Apple’s ARKit and ARCore by Google), the landscape is gradually shifting and our digital terrain is revealing newly crafted realities and 3D worlds. Many developers have set out to traverse the landscape and investigate the territory of 3D coding.

我们的星球上遍布着数百万个数字窗口，这些窗口展现了由2D接口广泛组装而成的地形。随着3D浏览器支持和AR开发工具包 (例如Apple的ARKit和Google的ARCore)的兴起，格局正在逐渐发生变化，我们的数字地形正在揭示新制作的现实和3D世界。许多开发人员已着手遍历景观并调查3D编码的领域。

When it comes to developing for 3D and immersive experiences, there is more for us developers to consider than usual. Normally, we only need to consider two axes when creating websites and apps (x and y). The additional z-axis when building 3D experiences can be disorientating for developers, especially when starting out. It is this that I’ll be casting some light over in this article. This is a guide to getting your head around 3D in general, with the help of ThreeJS Helpers and how to use them in React-Three-Fiber.

在开发3D和身临其境的体验时，我们的开发人员比平时要考虑的更多。通常，在创建网站和应用程序(x和y)时，我们只需要考虑两个轴。建立3D体验时，额外的z轴可能会使开发人员迷失方向，尤其是在起步时。正是这一点，我将在本文中加以阐述。这是在ThreeJS Helpers的帮助下以及如何在React-Three-Fiber中使用它们的指南，它使您大致了解3D。

“The classic five aside, there’s more than meets the visual cortex when it comes to senses.” — Amber Jorgenson, Discovery Magazine

“除了经典的五个之外，在感官上，视觉皮层还不止于此。” - 探索杂志 Amber Jorgenson

发现我们的其他感官 (Discovering our other senses)

Over two thousand years have passed since Aristotle penned De Anima, describing the five senses that help us to perceive the world. Neuroscience has come a long way since then and we have discovered that we, in fact, have far more than five senses.

自亚里士多德(Aristotle)撰写《 De Anima》以来，已经过去了两千多年，描述了帮助我们感知世界的五种感官。自那时以来，神经科学已经走了很长一段路，我们发现实际上，我们拥有五种以上的感觉。

A brief overview of some of our other senses

对我们其他一些感官的简要概述

Proprioception and spatial awareness are extremely beneficial to us in reality. We use proprioception to tell us where our body parts are in relation to each other and spatial awareness helps us to understand the relationship between our body and our environment. They are both developed from childhood and continue to helps us throughout our adult lives.

本体感受和空间意识在现实中对我们极为有益。我们使用本体感受来告诉我们身体各部分之间的相互关系，而空间意识则可以帮助我们理解身体与环境之间的关系。它们都是从儿童时代发展而来，并在整个成年生活中继续为我们提供帮助。

However, we do not have our body in our 3D scenes to help us to perceive our digital landscape. We are somewhat deprived of our usual senses.

但是，我们在3D场景中没有身体可以帮助我们感知数字景观。我们有些被剥夺了平常的感官。

It is this reason that I found 3D developing frustrating in the beginning. I was deprived of my “digital spatial awareness”. I didn’t understand the relationship between the objects and the environment. It was tricky to understand the addition of a new axis and how this value can affect my object in the space. Watching my objects appear in undesired random locations was enough to have me nearly screaming at my screen and ready to resign myself to the untrue fact that I was never going to be able to understand ThreeJS.

正是由于这个原因，我才开始发现3D开发令人沮丧。我被剥夺了“数字空间意识”。我不了解对象与环境之间的关系。了解新轴以及该值如何影响空间中的对象非常棘手。看着我的物体出现在不希望的随机位置上足以让我几乎在屏幕上尖叫，并准备让自己对这个我永远无法理解ThreeJS的不真实事实感到厌烦。

Then, I discovered ThreeJS helpers. Whilst it is probably common knowledge that these helpers exist, to beginners, it is not. Beginners mostly start off with creating a rotating box and are then catapulted into the ThreeJS world of tricky tutorials, screaming at their screen and self-doubt. Alas, fear not, one need not agonize, just like an architect has guidelines, you too can have this same privilege.

然后，我发现了ThreeJS帮助器。虽然对于初学者来说，这些助手的存在可能是众所周知的事实，但事实并非如此。初学者大多从创建一个旋转框开始，然后被弹入到ThreeJS棘手的教程世界中，他们对屏幕大喊大叫并且自我怀疑。 las，不用担心，不必苦恼，就像架构师有准则一样，您也可以拥有同样的特权。

使用ThreeJS助手 (Using ThreeJS Helpers)

轴帮手 (Axes Helper)

First and foremost, the axesHelperallows you to visualise the three axes:

首先， axesHelper允许您可视化三个轴：

The x-axis is red, which corresponds to the first value in the position property.
x轴为红色 ，对应于position属性中的第一个值。
The y-axis is blue and corresponds to the second value.
y轴为蓝色 ，对应于第二个值。
The z-axis is green and corresponds to the third value.
z轴为绿色 ，对应于第三个值。

Implementing the axes helper is incredibly easy. We only need to add <axesHelper/>to our <Canvas> in order to see this. The default size of the lines representing the axes is 1 but you can increase the length of the lines by adding args.

实施轴辅助程序非常简单。我们只需要在<Canvas>中添加<axesHelper/>即可看到。代表轴的线的默认大小为1，但是您可以通过添加args来增加线的长度。

The axes helper can also be added to individual objects.

轴辅助程序也可以添加到单个对象中。

箭头助手 (Arrow Helper)

Using the arrowHelper, we can visualise the direction of our objects. This can particularly useful for animation or using 3D models. You can add an arrow helper to your object by adding <arrowHelper/>inside of your object mesh.

使用arrowHelper ，我们可以可视化对象的方向。这对于动画或使用3D模型特别有用。您可以通过在对象网格物体内部添加<arrowHelper/>来向对象添加箭头助手。

网格助手 (Grid Helper)

Next up, we have the gridHelper. As you can see from below, the grid helper displays a 2D grid which acts as a helpful guide to decide the layout of our scene. Similarly to the axes helper, by simply adding <gridHelper/>in the <Canvas>, we can include the grid in our scene. This is the default grid.

接下来，我们有了gridHelper 。正如您从下面看到的那样，网格帮助器显示2D网格，可作为确定场景布局的有用指南。与轴帮助程序类似，只需在<Canvas>添加<gridHelper/> <Canvas> ，就可以在场景中包含网格。这是默认网格。

Using args, you can change the default grid.

使用args，可以更改默认网格。

The first value corresponds to the size of the grid.
第一个值对应于网格的大小。
The second value to the number of divisions.
第二个值以除数为单位 。
The third value to the colour of the centre lines.
第三个值是中心线的颜色。
The fourth value to the colour of the grid.
网格颜色的第四个值。

Some Final Words…

一些最后的话……

Without the correct gear, an explorer climbing a snowy mountain can welcome frostbite and almost certain failure. With the proper gear, the explorer can beat the elements and find success in their challenge. Entering a new environment is tough and it takes time to adjust. But equipped with ThreeJS helpers in hand, you can traverse the 3D wilderness and create magnificent experiences, frostbite free.

如果没有正确的装备，攀登雪山的探险家会受到冻伤和几乎肯定的失败。借助适当的装备，探险者可以击败元素并在挑战中找到成功。进入新环境非常困难，需要花费时间进行调整。但是，配备了ThreeJS助手之后，您就可以遍历3D荒野并创建宏伟的体验，而无需冻伤。

There are many more ThreeJS helpers that can help you with your 3D scenes. I’ll be discussing some more of them in my next article.

还有更多ThreeThree助手可以帮助您处理3D场景。在下一篇文章中，我将讨论其中的更多内容。