加载器，顾名思义就是加载个什么东西，threejs中的加载器可以加载很多资源，包括图片、字体、纹理、材质等等。 本文简单了解加载器的用法（这里我们要加载资源，第一节里准备的http-server派上用场了） Loader加载器基类，Loader( manager : LoadingManager ) ...
threejs学习之路（九）-- 物体
Posted on
|
Edited on
|
In
js
几何形状和材质，需要结合起来形成相应的物体才能加入3D世界。 三维物体Object3D是Three.js中大部分对象的基类，提供了一系列的属性和方法来对三维空间中的物体进行操纵。 请注意，可以通过.add( object )方法来将对象进行组合，该方法将对象添加为子对象，但为此最好使用Group（ ...
threejs学习之路（八）-- 材质
Posted on
|
Edited on
|
In
js
材质描述了物体的外观，举个简单的例子纸的表面是粗糙的，玻璃的表面是光滑的，这就是因为他们材质不同。 我们现实生活中看到一个物体，比如一本书，首先看到它是一个长方体，然后看到它是纸质材料，我们大概就知道这是一本书了，因此实际上几何形状+材质差不多就能描述一个物体了（当然不同条件下，比如光照不同物体表现 ...
threejs学习之路（七）-- 几何体
Posted on
|
Edited on
|
In
js
学过素描的同学都知道，世间万物都可以看做是由基本几何形状构成，所以我们学习绘画都是先画简单几何体，WebGL世界也是一样的，准确来说它是3D场景在2D世界的投影，跟我们拍照一个原理。 后面的学习中我们先来看看threejs 3D世界中的一些基本几何体 几何基类threejs中几何体基类是Geomet ...
threejs学习之路（六）-- 渲染器
Posted on
|
Edited on
|
In
js
渲染器实际上很复杂，但是简单来说渲染器的工作就是将相机捕捉到的场景帧渲染到画布上 threejs支持多种渲染器，CSS2DRenderer、CSS3DRenderer、SVGRenderer，但是最流行也最常用的是WebGLRenderer，基于WebGL和canvas的渲染 如上所述，WebGLR ...
threejs学习之路（五）-- 场景
Posted on
|
Edited on
|
In
js
前面介绍了相机，相机拍摄的就是场景Scene，场景可以理解为一个舞台（也可以理解为一张画布canvas），我们可以往上面放各种东西，包括物体、灯光等 构造一个场景threejs中创建一个场景非常简单，构造函数Scene() var scene = new THREE.Scene()var camer ...
threejs学习之路（四）-- 透视相机
Posted on
|
Edited on
|
In
js
与正交相机不同，透视相机采用透视投影模式，用来模拟人眼看到的景象，它是3D场景渲染中使用最普遍的投影模式。简单来说，透视投影就像我们现实中看到的场景，近大远小，就像美术老师画的那样。 透视相机 如图所示，绿色部分为视锥体（view frustum），同样，视锥体内的场景才能被摄像机捕获 透视相机构造 ...
threejs学习之路（三）-- 正交投影相机
Posted on
|
Edited on
|
In
js
相机是整个threejs中一个很重要的概念，你可以想象成真实的相机或人眼，从不同的位置和角度看相同的场景，得到的画面是不同的。而threejs就是把相机看到的场景画面渲染出来，想象一下一个静止的场景，我们移动相机或调节焦距，看到的画面也是不同的。 threejs中Camera是相机的抽象基类，这个类 ...
threejs学习之路（二）-- 画线
Posted on
|
Edited on
|
In
js
上节我们绘制了一个旋转的立方体，再接再厉，我们来练习画线 例行流程开启本地http-server，引入threejs <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
threejs学习之路（一）
Posted on
|
Edited on
|
In
js
最近开始学习webGL，从threejs开始吧，后续是个人的一些学习过程记录，也许会比较凌乱，如有错漏，欢迎指正~ 今天是一个开始，从threejs入手，来一个Get Start吧 ThreeJS官网(有中文哈) 我们的目标是绘制一个旋转的立方体 准备本地搭建简单http服务由于three.js ...