Three.js快速入门教程

引言

本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解。

近年来web得到了快速的发展。随着HTML5的普及,网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画,精美的效果。
但是,人总是贪的。那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形。

OpenGL,WebGL到Three.js

OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库。
WebGL是基于OpenGL设计的面向web的图形标准,提供了一系列JavaScript API,通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。
Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。

简单点的说法:WebGL可以看成是浏览器给我们提供的接口,在javascript中可以直接用这些API进行3D图形的绘制;而Three.js就是在这些接口上又帮我们封装得更好用一些。

WebGL与Three.js对比

既然有了WebGL,我们为什么还需要Three.js?
这是因为WebGL门槛相对较高,需要相对较多的数学知识。虽然WebGL提供的是面向前端的API,但本质上WebGL跟前端开发完全是两个不同的方向,知识的重叠很少。相关性只是他们都在web平台上,都是用javascript而已。一个前端程序员或许还熟悉解析几何,但是还熟悉线性代数的应该寥寥无几了(比如求个逆转置矩阵试试?),更何况使用中强调矩阵运算中的物理意义,这在教学中也是比较缺失的。
因此,前端工程师想要短时间上手WebGL还是挺有难度的。
于是,Three.js对WebGL提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本。并且,几乎没有损失WebGL的灵活性。
因此,从Three.js入手是值得推荐的,这可以让你在较短的学习后就能面对大部分需求场景。

Three.js的学习问题

Three.js的入门是相对简单的,但是当我们真的去学的时候,会发现一个很尴尬的问题:相关的学习资料很少。
通常这种流行的库都有很完善的文档,很多时候跟着官方的文档或官方的入门教程学习就是最好的路线。但Three不是的,它的文档对初学者来说太过简明扼要。
不过官方提供了非常丰富的examples,几乎所有你需要的用法都在某个example中有所体现。但这些example不太适合用来入门,倒是适合入门之后的进一步学习。

这里推荐一些相对较好的教程:
Three.js入门指南
这是一份很好的Three.js 轻量级入门教程,作者文笔很好,基础知识讲解得简明易懂。

Three.js开发指南(第一版中文版)

Learning Three.js- Second Edition
Learning Three.js:The JavaScript 3D Library for WebGL是现在不多的也是最好的Three.js入门书,比较全面地讲解了Three.js的各种功能。
如果有能力的话,建议阅读英文版第二版,出版于2015年,与现在的Three.js区别很小。
中文版翻译自出版于2012年的原书第一版,大部分概念是适用的,但很多细节已经有所改变。
Three.js入门教程
这是对国外一份教程的翻译,一共六篇文章。讲解不多,更多的是展示各个基本功能怎么用。更适合有一些图形基础的同学。

当然,实际的学习过程中这些资料肯定是不太够的,遇到问题还是要自己去查资料。不过这里要提醒一下,Three.js的更新是相当频繁的,现在是r80版本,自2010年4月发布r1以来,这已经是第72个版本了(中间有的版本号跳过了)。因此,在网上找到的资料有些可能是不适合当前版本的,需要注意甄别(前面推荐的资料也都或多或少存在这样的问题)。

Three.js中的一些概念

要在屏幕上展示3D图形,思路大体上都是这样的:

构建一个三维空间
Three中称之为场景(Scene)选择一个观察点,并确定观察方向/角度等
Three中称之为相机(Camera)在场景中添加供观察的物体
Three中的物体有很多种,包括Mesh,Line,Points等,它们都继承自Object3D类将观察到的场景渲染到屏幕上的指定区域
Three中使用Renderer完成这一工作

下面来具体看一看Three中的这些概念。

Scene

场景是所有物体的容器,也对应着我们创建的三维世界。

Camera 坐标系

Camera是三维世界中的观察者,为了观察这个世界,首先我们要描述空间中的位置。

Three中使用采用常见的右手坐标系定位。

三维投影

Three中的相机有两种,分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。

正交投影与透视投影的区别如上图所示,左图是正交投影,物体发出的光平行地投射到屏幕上,远近的方块都是一样大的;右图是透视投影,近大远小,符合我们平时看东西的感觉。
维基百科:三维投影

正交投影相机

注:图中的”视点”对应着Three中的Camera。
这里补充一个视景体的概念:视景体是一个几何体,只有视景体内的物体才会被我们看到,视景体之外的物体将被裁剪掉。这是为了去除不必要的运算。
正交投影相机的视景体是一个长方体,OrthographicCamera的构造函数是这样的:OrthographicCamera( left, right, top, bottom, near, far )
Camera本身可以看作是一个点,left则表示左平面在左右方向上与Camera的距离。另外几个参数同理。于是六个参数分别定义了视景体六个面的位置。

可以近似地认为,视景体里的物体平行投影到近平面上,然后近平面上的图像被渲染到屏幕上。

透视投影相机

透视投影相机的视景体是个四棱台,它的构造函数是这样的:PerspectiveCamera( fov, aspect, near, far )
fov对应着图中的视角,是上下两面的夹角。aspect是近平面的宽高比。在加上近平面距离near,远平面距离far,就可以唯一确定这个视景体了。
透视投影相机很符合我们通常的看东西的感觉,因此大多数情况下我们都是用透视投影相机展示3D效果。

Objects

有了相机,总要看点什么吧?在场景中添加一些物体吧。
Three中供显示的物体有很多,它们都继承自Object3D类,这里我们主要看一下Mesh和Points两种。

Mesh

我们都知道,计算机的世界里,一条弧线是由有限个点构成的有限条线段连接得到的。线段很多时,看起来就是一条平滑的弧线了。
计算机中的三维模型也是类似的,普遍的做法是用三角形组成的网格来描述,我们把这种模型称之为Mesh模型。

这是那只著名的斯坦福兔子。它在3D图形中的地位与数字图像处理领域中著名的lena是类似的。
看这只兔子,随着三角形数量的增加,它的表面越来越平滑/准确。

在Three中,Mesh的构造函数是这样的:Mesh( geometry, material )
geometry是它的形状,material是它的材质。
不止是Mesh,创建很多物体都要用到这两个属性。下面我们来看看这两个重要的属性。

Geometry

Geometry,形状,相当直观。Geometry通过存储模型用到的点集和点间关系(哪些点构成一个三角形)来达到描述物体形状的目的。
Three提供了立方体(其实是长方体)、平面(其实是长方形)、球体、圆形、圆柱、圆台等许多基本形状;
你也可以通过自己定义每个点的位置来构造形状;
对于比较复杂的形状,我们还可以通过外部的模型文件导入。

Material

Material,材质,这就没有形状那么直观了。
材质其实是物体表面除了形状以为所有可视属性的集合,例如色彩、纹理、光滑度、透明度、反射率、折射率、发光度。
这里讲一下材质(Material)、贴图(Map)和纹理(Texture)的关系。
材质上面已经提到了,它包括了贴图以及其它。
贴图其实是‘贴'和‘图',它包括了图片和图片应当贴到什么位置。
纹理嘛,其实就是‘图'了。
Three提供了多种材质可供选择,能够自由地选择漫反射/镜面反射等材质。

Points

讲完了Mesh,我们来看看另一种Object——Points。
Points其实就是一堆点的集合,它在之前很长时间都被称为ParticleSystem(粒子系统),r68版本时更名为PointCloud,r72版本时才更名为Points。更名主要是因为,Mr.doob认为,粒子系统应当是包括粒子和相关的物理特性的处理的一套完整体系,而Three中的Points简单得多。因此最终这个类被命名为Points。
Points能够用来实现的典型效果是这样的:官方example

Light

神说:要有光!
光影效果是让画面丰富的重要因素。
Three提供了包括环境光AmbientLight、点光源PointLight、 聚光灯SpotLight、方向光DirectionalLight、半球光HemisphereLight等多种光源。
只要在场景中添加需要的光源就好了。

Renderer

在场景中建立了各种物体,也有了光,还有观察物体的相机,是时候把看到的东西渲染到屏幕上了。这就是Render做的事情了。
Renderer绑定一个canvas对象,并可以设置大小,默认背景颜色等属性。
调用Renderer的render函数,传入scene和camera,就可以把图像渲染到canvas中了。

让画面动起来

现在,一个静态的画面已经可以得到了,怎么才能让它动起来?
很简单的想法,改变场景中object的位置啊角度啊各种属性,然后重新调用render函数渲染就好了。
那么重新渲染的时机怎么确定?
HTML5为我们提供了requestAnimFrame,它会自动在每次页面重绘前调用传入的函数。
如果我们一开始这样渲染:

function render()
{
 renderer.render(scene, camera);
}

只需要改成这样:

function render()
{
 requestAnimationFrame(render);
 object.position.x += 1;
 renderer.render(scene, camera);
}

object就可以动起来了!

举个栗子

下面我们用一个简单的例子来梳理一下这个过程。
首先写一个有Canvas元素的页面吧。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>立方体</title>
 <script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script>
 <style type="text/css">
 html, body {
 margin: 0;
 padding: 0;
 }
 #three_canvas {
 position: absolute;
 width: 100%;
 height: 100%;
 }
 </style>
</head>
<body>
 <canvas id="three_canvas"></canvas>
</body>
</html>

下面来做Javascript的部分
首先初始化Renderer

function initRenderer() {
 width = document.getElementById('three_canvas').clientWidth;
 height = document.getElementById('three_canvas').clientHeight;
 renderer = new THREE.WebGLRenderer({
 //将Canvas绑定到renderer
 canvas: document.getElementById('three_canvas')
 });
 renderer.setSize(width, height);//将渲染的大小设为与Canvas相同
 renderer.setClearColor(0xFFFFFF, 1.0);//设置默认颜色与透明度
}

初始化场景:

function initScene() {
 scene = new THREE.Scene();
}

初始化相机:

function initCamera() {
 //简单的正交投影相机,正对着视口的中心,视口大小与Canvas大小相同。
 camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
 //设置相机的位置
 camera.position.x = 0;
 camera.position.y = 0;
 camera.position.z = 200;
 //设置相机的上方向
 camera.up.x = 0;
 camera.up.y = 1;
 camera.up.z = 0;
 //设置相机聚焦的位置(其实就是确定一个方向)
 camera.lookAt({
 x: 0,
 y: 0,
 z: 0
 });
}

要唯一确定一个相机的位置与方向,position、up、lookAt三个属性是缺一不可的。
这里我们创建了一个正交投影相机,这里我将视景体大小与屏幕分辨率保持一致只是为了方便,这样坐标系中的一个单位长度就对应屏幕的一个像素了。
我们将相机放在Z轴上,面向坐标原点,相机的上方向为Y轴方向,注意up的方向和lookAt的方向必然是垂直的(类比自己的头就知道了)。

下面添加一个立方体到场景中:

function initObject() {
 //创建一个边长为100的立方体
 var geometry = new THREE.CubeGeometry(100, 100, 100);
 object = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
 scene.add(object);
}

注意我们使用了法向材质MeshNormalMaterial,这样立方体每个面的颜色与这个面对着的方向是相关的,更便于观察/调试。

在这个简单的demo里我不打算添加光影效果,而法向材质对光也是没有反应的。
最后来创建一个动画循环吧

function render() {
 requestAnimationFrame(render);
 object.rotation.x += 0.05;
 object.rotation.y += 0.05;
 renderer.render(scene, camera);
}

每次重绘都让这个立方体转动一点点。
当页面加载好时,调用前面这些函数就好了

function threeStart() {
 initRenderer();
 initCamera();
 initScene();
 initObject();
 render();
}
window.onload = threeStart();

完整的demo是这个样子的:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>立方体</title>
 <script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script>
 <style type="text/css">
 html, body {
 margin: 0;
 padding: 0;
 }

 #three_canvas {
 position: absolute;
 width: 100%;
 height: 100%;
 }
 </style>
</head>
<body>
<canvas id="three_canvas"></canvas>
<script>
 var renderer, camera, scene, light, object;
 var width, height;
 function initRenderer() {
 width = document.getElementById('three_canvas').clientWidth;
 height = document.getElementById('three_canvas').clientHeight;
 renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('three_canvas')
 });
 renderer.setSize(width, height);
 renderer.setClearColor(0xFFFFFF, 1.0);
 }

 function initCamera() {
 camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
 camera.position.x = 0;
 camera.position.y = 0;
 camera.position.z = 200;
 camera.up.x = 0;
 camera.up.y = 1;
 camera.up.z = 0;
 camera.lookAt({
 x: 0,
 y: 0,
 z: 0
 });
 }
 function initScene() {
 scene = new THREE.Scene();
 }
 function initObject() {
 var geometry = new THREE.CubeGeometry(100, 100, 100);
 object = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
 scene.add(object);
 }
 function render() {
 requestAnimationFrame(render);
 object.rotation.x += 0.05;
 object.rotation.y += 0.05;
 renderer.render(scene, camera);
 }
 function threeStart() {
 initRenderer();
 initCamera();
 initScene();
 initObject();
 render();
 }
 window.onload = threeStart();
</script>
</body>
</html>

保存为html后打开,在屏幕中央会显示这样一个转动的立方体

小结

对Three.js的介绍就到这里了,本文对Three中的重要组件基本上都有提到。其实想要总结的东西还有很多,但写在这一篇里可能会显得很累赘,这篇文章的初衷是想要读者读后对Three.js有一个直观的大体上的理解,并不打算牵涉太多细节。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Three.js入门之hello world以及如何绘制线

    前言 本文属于学习Three.js 的入门教程,文中通过示例介绍了hello world和线的实现,下面话不多说了,来一起看看详细的介绍吧. hello world 首先使用我们先用three.js创建一个立方体的hello world类型的案例. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=

  • Three.js基础部分学习

    一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

  • three.js快速入门【推荐】

    Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie

  • JS库之Three.js 简易入门教程(详解之一)

    开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章

  • Three.js中网格对象MESH的属性与方法详解

    前言 本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 创建一个网格需要一个几何体,以及一个或多个材质.当网格创建好之后,我们就可以将它添加到场景中并进行渲染.网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果. 如下: 还有一个属性就是visible属性,默认为true,如果设置为false,THREE.Mesh将不渲染到场景中. mesh对象的前三个属性position,rotation和scal

  • Three.js学习之网格

    前言 小编之前发布过关于几何形状和材质,相信大家看过学习之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 1.创建网格 在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质传入其构造函数.最常用的物体是网

  • Vue.js快速入门教程

    像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

  • Three.js快速入门教程

    引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

  • webpack+vue.js快速入门教程

    前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

  • Vue.js快速入门实例教程

    什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

  • Vue.js 60分钟快速入门教程

    vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当

  • jQuery Easyui快速入门教程

    1.什么是JQuery EasyUI jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只是一些简单的html标签. 2.学习jQuery EasyUI的条件 因为JQueryEasyUI是基于jQuery的UI库,所以,必须需要JQuery课程的基础. 3.JQuery EasyUI的特点 基于JQu

  • ReactJs快速入门教程(精华版)

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~   一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西

  • ASP.NET Core快速入门教程

    目录 第一课 基本概念 第二课 控制器的介绍 第三课 视图与表单 第四课 数据验证 第五课 路由规则 第六课 应用发布与部署 源码地址 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 MVC设计模式的一种实现 环境准备 安装最新版Visual Studio 2017 安装最新版.NET Core Sdk 第二课 控制器的介绍 控制器定义方式: 命名以Controller结尾 使用

  • 微信小程序开发实战快速入门教程

    目录 注册微信小程序 微信开发者工具 第一个小程序 新建项目 项目目录结构 目标成果 步骤分解 页头页尾 个人中心 生活指南 模拟弹窗 预览图片 注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册.注册的账号类型可以是订阅号.服务号.小程序以及企业微信,我们选择 “小程序” 即可. 接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册.未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序. 激活邮箱之后,选择主体类型为

  • Canvaskit快速入门教程

    目录 CanvasKit快速开始 一.最小应用 二.代码解释 三.基本绘制循环 四.变形文本 CanvasKit快速开始 CanvasKit 是一个 wasm 模块,它使用 Skia 去绘制画布元素,是一个比canvas API更高级的功能集. 一.最小应用 这个例子是一个最小的 Canvaskit 应用程序,它为一帧绘制一个圆角矩形.它从 unpkg.com 中提取 wasm 二进制文件,但您也可以自己构建和托管它. <canvas id=foo width=300 height=300>&

随机推荐