2019年4月

webgl 线绘制方式

three.js 的三种绘线方式

线(Line)

一条连续的线。

它几乎和LineSegments是一样的,唯一的区别是它在渲染时使用的是gl.LINE_STRIP, 而不是gl.LINES

环线(LineLoop)

一条头尾相接的连续的线。

它几乎和Line是相同的,唯一的区别是它在渲染时使用的是gl.LINE_LOOP, 而不是gl.LINE_STRIP, 它绘制一条直线到下一个顶点,并将最后一个顶点连回第一个顶点。

线段(LineSegments)

在若干对的顶点之间绘制的一系列的线。

它和Line几乎是相同的,唯一的区别是它在渲染时使用的是gl.LINES, 而不是gl.LINE_STRIP

场景

场景就是舞台,你可以把任何要显示的东西,放在场景中的任何位置。

THREE.Scene = function()

相机

相机就是现实生活中的相机,我们最终能够在浏览器中看到的景象,就是相机拍摄出来的。

两大相机
  1. 透视相机:透视投影符合人们心理习惯,即离视点近的物体大,离视点远的物体小,远到极点即为消失,成为灭点。
  2. 正投影相机:就是远处的和近处的是一样大。
透视相机参数
THREE.PerspectiveCamera = function(fov, aspect, near, far)
  1. 视角fov:这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候,往往物体很小,因为他在你的整个可视区域中的比例变小了。
  2. 近平面near:这个呢,表示你近处的裁面的距离。补充一下,也可以认为是眼睛距离近处的距离,假设为10米远,请不要设置为负值,Three.js就傻了,不知道怎么算了,
  3. 远平面far:这个呢,表示你远处的裁面,
  4. 纵横比aspect:实际窗口的纵横比,即宽度除以高度。这个值越大,说明你宽度越大。


渲染器

渲染器,决定了画家怎么将眼前的场景画到屏幕上。计算的过程即渲染。

THREE.WebGLRenderer()

几何体

几何体,就是要显示在场景中的对象。