使用WebGL和Three.js构建太阳系

Since beginning my journey into the Front End, I have always been interested in how to create 3-dimensional renderings in the browser.

自从进入前端以来，我一直对如何在浏览器中创建3D渲染感兴趣。

Today we’re going to dive into an introduction on how to use WebGL with ThreeJS, and together build a fun 3D, not-to-scale rendering of our solar system!

今天，我们将深入介绍如何将WebGL与ThreeJS一起使用，并共同构建一个有趣的3D太阳系非比例尺渲染！

I say not-to-scale because, well, space is vast.

我说， 不按比例 ，因为，空间广阔。

It will take the SpaceX Starship 6 months to travel to Mars in 2024, a distance which takes light a full 3 minutes.

到2024年，SpaceX Starship将需要6个月才能到达火星，这一距离需要整整3分钟的时间。

If we made our little browser-rendering to scale, our planets would be infinitesimally tiny in a black void… just like in real life! 🤣

如果我们按比例缩放浏览器的小部分，那么我们的行星将在黑色的空隙中无限微小……就像在现实生活中一样！ 🤣

No, instead we shall aim for the visually pleasing over real-world accuracy.

不，相反，我们的目标是视觉上超越现实世界的准确性。

Here is a gif of our finished project in the browser:

这是我们在浏览器中完成的项目的gif：

And here is the final project repository.

这是最终的项目存储库 。

Let’s have some fun.🚀

让我们一起玩吧。🚀

WebGL和ThreeJS (WebGL and ThreeJS)

Compared to modern web tech, WebGL (based on OpenGL) is relatively old.

与现代网络技术相比，WebGL(基于OpenGL) 相对较老。

Created in 2006 and adopted by Mozilla and Opera a year later, WebGL has been steadily iterated upon over the years and is now a standard tech included in modern browsers.

WebGL创建于2006年，一年后被Mozilla和Opera所采用，多年来一直稳步迭代，现在已成为现代浏览器中的标准技术。

ThreeJS, the primary tech we’ll be using today, is a library that allows us to create and display animated 3D computer graphics in the browser.

ThreeJS是我们今天要使用的主要技术，它是一个库，可让我们在浏览器中创建和显示动画3D计算机图形。

Built on WebGL, it allows us to create shapes, load textures, customize lighting, manipulate and animate perspectives, customize the orbit controls of the camera… among many other possibilities.

它基于WebGL构建，允许我们创建形状，加载纹理，自定义照明，操纵和设置透视图动画，自定义摄影机的轨道控制……等等。

Today we are going to use an experimental library called canvas-sketch by Matt DesLauriers.

今天，我们将使用Matt DesLauriers的名为canvas-sketch的实验库。

Check out his course on FrontEnd Masters if you feel so inclined.

如果您愿意，可以查看他的FrontEnd Masters 课程 。

This library will handle the heavy lifting of setting up ThreeJS for us so we can simply focus on building.

该库将为我们处理设置ThreeJS的繁重工作，因此我们只需专注于构建即可。

项目设置与安装 (Project Setup & Installation)

First off, we will need to get set up with the canvas-sketch CLI.

首先，我们将需要使用canvas-sketch CLI进行设置。

In your terminal, install it by entering the following:

在您的终端中，通过输入以下内容进行安装：

> npm install canvas-sketch-cli -g

Once installation is finished, create a folder where you’d like to store this project and move into it.

安装完成后，创建一个文件夹，您要在其中存储该项目并将其移入其中。

I’ll name this project solar-system-threejs and throw it onto the Desktop:

我将这个项目命名为solar-system-threejs并将其扔到桌面上：

> cd Desktop
> mkdir solar-system-threejs
> cd solar-system-threejs

With the canvas-sketch CLI installed, let’s run a command to scaffold our ThreeJS project in this folder we created.

安装了canvas-sketch CLI后，让我们运行一个命令在我们创建的此文件夹中构建ThreeJS项目。

> canvas-sketch sketch.js --new --template=three

The setup here is very quick, and will finish with a server running on port 9966.

此处的设置非常快，并且将在端口9966上运行的服务器完成。

Open your browser and head over to localhost:9966 and you will see the following 3D sphere wireframe.

打开浏览器，转到localhost:9966 ，您将看到以下3D球形线框。

In the future, to launch your project you will simply enter canvas-sketch followed by the entry file.

将来，要启动您的项目，您只需输入 canvas-sketch 然后输入文件。

canvas-sketch sketch.js

Oh, one last thing!

哦，最后一件事！

ThreeJS allows us to create spheres to be our planets, but we need to provide specific images that map to spheres in order for them to look like planets.

ThreeJS允许我们创建球体作为我们的行星，但是我们需要提供映射到球体的特定图像，以使它们看起来像行星。

Head over