在Three.js中创建3D角色

From our sponsor: Ship fast and never break a thing with Shortcut (formerly Clubhouse.io).

来自我们的赞助商。使用Shortcut（原Clubhouse.io），发货速度快，而且不会损坏任何东西。

Three.js is a JavaScript library for drawing in 3D with WebGL. It enables us to add 3D objects to a scene, and manipulate things like position and lighting. If you’re a developer used to working with the DOM and styling elements with CSS, Three.js and WebGL can seem like a whole new world, and perhaps a little intimidating! This article is for developers who are comfortable with JavaScript but relatively new to Three.js. Our goal is to walk through building something simple but effective with Three.js — a 3D animated figure — to get a handle on the basic principles, and demonstrate that a little knowledge can take you a long way!

Three.js是一个JavaScript库，用于使用WebGL进行3D绘图。它使我们能够将3D对象添加到场景中，并对位置和照明等事项进行操作。如果你是一个习惯于使用DOM和CSS样式元素的开发者，Three.js和WebGL似乎是一个全新的世界，也许有点吓人这篇文章是为那些熟悉JavaScript但对Three.js相对陌生的开发者准备的。我们的目标是通过使用Three.js制作一些简单但有效的东西--一个3D动画人物--来掌握基本原理，并证明一点知识可以让你走得更远

Setting the scene

设定场景

In web development we’re accustomed to styling DOM elements, which we can inspect and debug in our browser developer tools. In WebGL, everything is rendered in a single <canvas> element. Much like a video, everything is simply pixels changing color, so there’s nothing to inspect. If you inspected a webpage rendered entirely with WebGL, all you would see is a <canvas> element. We can use libraries like Three.js to draw on the canvas with JavaScript.

在网络开发中，我们习惯于对DOM元素进行造型，我们可以在浏览器的开发工具中检查和调试这些元素。在WebGL中，一切都在一个单一的<canvas> 元素中呈现。和视频一样，所有东西都是简单的像素变色，所以没有什么可检查的。如果你检查一个完全用WebGL渲染的网页，你所看到的只是一个<canvas> 元素。我们可以使用Three.js等库，用JavaScript在画布上作画。

Basic principles

基本原则

First we’re going to set up the scene. If you’re already comfortable with this you can skip over this part and jump straight to the section where we start creating our 3D character.

首先，我们要设置场景。如果你对这个已经很熟悉了，你可以跳过这部分，直接跳到我们开始创建3D角色的部分。

We can think of our Three.js scene as a 3D space in which we can place a camera, and an object for it to look ...