three.js 绘制墙_使用Three.js可视化地绘制3D

three.js 绘制墙

Every developer has their favorite tools, languages, and technologies to work with. Sometimes it derives from another passion such as solving mathematical problems, white-hat hacking, or organization. Luckily, open-source technologies allow everyone to pick up their tool of choice and create something amazing. Now let me show you how you can leverage one of my favorite tools, Three.js

每个开发人员都有自己喜欢的工具，语言和技术可以使用。 有时，它源自另一种热情，例如解决数学问题，白帽黑客攻击或组织。 幸运的是，开源技术使每个人都可以选择自己喜欢的工具并创造出惊人的东西。 现在，让我向您展示如何利用我最喜欢的工具之一Three.js

什么是Three.js？ (What is Three.js?)

Three.js is a JavaScript library for creating, rendering, and even animating 3D graphics in the browser. If you are into developing web-based games, creating web animations, or creative coding, this would be a great option to explore.

Three.js是一个JavaScript库，用于在浏览器中创建，渲染甚至动画制作3D图形。 如果您要开发基于Web的游戏，创建Web动画或创意编码，那么这将是一个不错的选择。

Under the hood, Three.js utilizes a low-level API called WebGL. The creator of Three.js, Ricardo Cabello (Mr.doob), knew the complexities of WebGL and simplified it into an easily accessible library for any developer to utilize.

在后台，Three.js利用了称为WebGL的低级API。 Three.js的创建者Ricardo Cabello(Mr.doob)知道WebGL的复杂性，并将其简化为可供任何开发人员使用的易于访问的库。

总览 (Overview)

There’s a lot this library is capable of, but for this article, I will just be focusing on the process of setting up a three.js scene. Personally, this was the most difficult part to remember. As a visual learner, I had to use mental images to understand how a 3D scene could be produced on a flat-screen.

这个库有很多功能，但是在本文中，我将只着重于设置three.js场景的过程 。 就个人而言，这是最难记住的部分。 作为视觉学习者，我不得不使用心理图像来了解如何在平面屏幕上产生3D场景。

Disclaimer: Practice coding out the set up every time you start a new project. This process will never change but if you copy and paste the setup you won’t understand why certain things aren’t working as expected.

免责声明：每次启动新项目时，请练习编码设置。 这个过程将永远不会改变，但是如果您复制并粘贴设置，您将无法理解为什么某些事情无法按预期进行。

Also, Three.js is a Javascript library. There may be a fair amount of references to Object-Oriented Programming and the Javascript language.

另外，Three.js是一个Javascript库。 可能有很多关于面向对象程序设计和Java语言的参考。

With that being said. Let’s begin!

话虽这么说。 让我们开始！

Three.js 3D Rotating Cube

Three.js 3D旋转立方体

设置Three.js (Setting up Three.js)

To start off with a metaphoric example. Pretend you are building a stage set for a play. Right now your stage is empty, but you need to add things to it before your actors and actresses can use it.

从一个隐喻的例子开始。 假装您正在构建一个舞台剧。 现在您的舞台是空的，但是您需要在演员们使用它之前添加一些东西。

Setting up Three.js is very similar to that scenario above. You start with one Scene and pull the parts needed into that scene.

设置Three.js与上述情况非常相似。 你开始一路S cene和拉成所需的那一幕部分。

Here are the things you will need: