原文：medium.com/@necsoft/th…

从创意编码的角度介绍 Three.js。

我从一年前就开始使用 Three.js 来创建艺术项目。我不认为自己是专家，这些文章知识为了分享，希望对你有帮助！

什么是 Three.js

Three.js 是 Ricardo Cabello (@mrdoob) 于 2010 年开发的 Javascript 库（现在 Github 上已经有许多的贡献者）。这个神奇的工具让我们可以在浏览器上处理 3D 图形，以非常简单和直观的的方式使用 WebGL。这个解释可能更广泛，但总而言之，Three.js 是将创意编码引入浏览器的最佳方式。

WebGL 让我们可以在很多的设备和浏览器上创造出丰富的交互体验。

** 你需要什么？

最新的浏览器（我喜欢使用谷歌浏览器）
Javascript 的基础知识（可能对你有帮助）
乐于享受

** 基础样本是时候开始了，深呼吸，然后打开你最喜欢的编辑器。我们将创建两个文件（为了更好的可读性）。

index.html（从 CDN 导入 Three.js）
script.js（这里是我们的代码）

// index.html
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Three.js 101</title>
    <!-- Simple reset to delete the margins -->
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
    <!-- Three.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
</head>
<body>
    <!-- Our code -->
    <script src="app.js"></script>
</body>
</html>

// script.js

// ------------------------------------------------
// 基本设置
// ------------------------------------------------

// 创建一个空场景
var scene = new THREE.Scene();

// 创建一个基本的透视相机
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 4;

// 创建一个抗锯齿的渲染器
var renderer = new THREE.WebGLRenderer({antialias:true});

// 配置渲染器的清除色
renderer.setClearColor("#000000");

// 配置渲染器的大小
renderer.setSize( window.innerWidth, window.innerHeight );

// 将渲染器添加到 DOM 中
document.body.appendChild( renderer.domElement );

// ------------------------------------------------
// 乐趣从这里开始
// ------------------------------------------------

// 使用基本材质创建一个立方体网格
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );
var cube = new THREE.Mesh( geometry, material );

// 将立方体添加到场景中
scene.add( cube );

// 循环渲染
var render = function () {
  requestAnimationFrame( render );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
};

render();

看起来代码很多，其实不然，我们一段一段的分析。如果一切都正常，你将会看到这个： codepen.io/necsoft/emb…?

说实话，这是个很普通的例子，但之后会对它进行改造，让我们先分析下背后发生的事情。

WebGL 渲染器，场景和相机

这是我们在每一个 Three.js 应用程序中都能看到的第一个常见模式：

创建渲染器
创建场景
创建相机

渲染器是我们将要放置场景的地方。在 Three.js 中可以有多个场景，每个场景可以有不同的对象。

我们创建了 WebGLRenderer，window 的尺寸作为参数并传入，然后添加到文档中。

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

创建一个 ** 空场景 ** ，我们将在里面添加对象：

var scene = new THREE.Scene();

最后我们创建了一个相机，传入 FOV（视野）, 纵横比和远平面和近平面 :

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

一旦完成，我们就拥有了 Three.js 应用中的 3 个基础元素。

几何体，材质和网格

第二种常见模式是往场景添加对象：

创建集合体
创建材质
创建网格
将网格添加到场景中

在 Three.js 中，网格是几何体和材质的组合。

几何体是对象的数学表达式，在 Three.js 中有许多的几何体，我们将在以后的章节中探讨。几何体为我们提供了添加到场景中的对象的顶点。

你可以在文档中查看所有的几何体。

材质可以定义对象的属性，以及与场景光源的行为 。

A Material can be defined as the properties of an object and its behavior with the light sources of the scene. As you can see in the following image there are different types of materials.

你可以在文档中查看所有的材质。

现在我们知道了什么是网格、几何体和材质，我们将要把它们添加到场景中。下面的例子我们创建了一个具有基本材质的立方体：

// 创建几何体并传入尺寸
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 创建材质并传入颜色
var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );
// 创建网格
var cube = new THREE.Mesh( geometry, material );
// 将网格添加到场景中
scene.add( cube );

RequestAnimationFrame

最后一段代码是在场景中设置动画效果，为此我们使用 requestAnimationFrame，让我们拥有一个以每秒运行 60 帧的函数（最好的情况下）。

// 循环渲染
var render = function () {
  requestAnimationFrame( render );
  // 动画代码在这里
  renderer.render(scene, camera);
};
render();

会动的立方体

为了让立方体在渲染循环中运动起来，我们需要改变它的属性。创建了网格后，我们能够访问到动画所需要的属性。

// 旋转的弧度(XYZ)
cube.rotation.x
cube.rotation.y
cube.rotation.z
// 位置 (XYZ)
cube.position.x
cube.position.y
cube.position.z
// 缩放 (XYZ) 
cube.scale.x
cube.scale.y
cube.scale.z

在本例中，我们改变了立方体 X 和 Y 方向上的旋转弧度：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

控制台是你的朋友

在使用 Threes.js 时，控制台是必不可少的工具，我更喜欢使用 Chrome 的，但现在各浏览器的控制台都很好用。

我认为使用控制台进行实时观察是理解网格属性工作原理的最好方法。视频

改进代码

现在我们明白了示例的逻辑，我将会往场景中添加更多的内容，得到更复杂的效果。

作为练习，尝试创建属于你的代码。不要害怕破坏了代码，fork 并分享出来！我期待看到你的版本。

Three.js 101 : Hello World! (一)