$1. 什么是three.js

主要组成

  1. 渲染器 Render

    1
    render = new THREE.WebGLRender({});

  2. 场景 Scene

    1
    var scene = new THREE.Scene({});

  3. 照相机 Camera

    1
    var camera = new THERE.PerspectiveCamera({});

  4. 物体：长方体

    1
    var cube = new THERE.Mesh({});

  5. 渲染

    1
    renderer.render(scene, camera);

THERE.js官方文档

  • Camera 照相机，控制投影方式
  • Core 核心对象
  • Light 光照
  • Loaders 加载器，用来加载特定文件
  • Material 材质，控制物体的颜色、纹理等
  • Math 和数字相关的对象
  • Object 物体
  • Renderers 渲染器，可以渲染到不同对象上
  • Renderers/Rendererable
  • Scene 场景
  • Textures 纹理
  • Extras
  • Exteas/Animation/Cameras/Core/Geometries/Helpers/Objects/Renders/Plugins/Shaders

$2. 照相机

  1. 正交投影

    1
    OrthographicCamera(left, right, top, bottom, near, far);

  2. 透视投影 近大远小

    1
    2
    3
    4
    THERE.PerspectiveCamera(fov, aspect, near, far);
    // aspect = width/height
    // fov 是视景体
    // far > near

$3. 几何形状

  • 创建物体、几何形状、材质
  • 存储了一个物体的顶点信息
  • 立方体、平面、球体、圆柱体、四面体、八面体、三维数字、手动定义

  1. 立方体

    1
    THERE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);

  2. 平面

    1
    THERE.PlaneGeometry(width, height, widthSegments, heightSegments);

  3. 球体

    1
    THERE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength);

  4. 圆形

    1
    THERE.CircleGeometry(radius, segments, thetaStart, thetaLength);

  5. 圆柱形/圆台/无顶面底面

    1
    THERE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded);

  6. 正四面体、正八面体、正二十面体
    radius/detail

  7. 圆环面

    1
    THERE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);

  8. 文字形状

    1
    TextGeometry

  9. 自定义形状
    3D-Max 创建模型，Therejs导入场景

    1
    THERE.Geometry();

$4. 材质

  1. 基本材质 BasicMaterial

    渲染后物体的颜色始始终为该材质的颜色

  2. Lambert材质

    不适用金属、镜面

    1
    2
    3
    4
    new THERE.MeshLambertMaterial({});
    // Color    材质对光的反射能力
    // ambient  对环境光的反射能力
    // emlssive 材质的自发光颜色

  3. Phong材质

    符合Phong光照模型的材质，考虑了镜面反射的效果
    Ispecular = ks * Is * (cos(alpha))^n

    1
    new THERE.MeshPhongMaterial({});

  4. 法向材质

    1
    new THERE.MeshNormalMaterial({});

  5. 材质的纹理贴图

$5. 网格

Mesh 由顶点、边、面等组成的物体

1
Mesh(geometry, material); // THERE.Mesh 基础自THERE.Object3D
  • 位置 position
  • 缩放 scale
  • 旋转 rotation

$6. 动画

库：观测每秒帧数 FPS ，每秒30~60之间

setInterval

  • setInterval

    1
    2
    renderer.renderer(scene, camera);
    clearInterval

  • requestAnimationFrame

    若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()
    时间较为敏感的环境 但动画逻辑更加复杂

stat.js 记录FPS

FPS和每帧渲染时间

1
new State();

$7. 外部模型

  1. 人或动物的复杂模型
  2. 以3ds Max为例 OBJLoader();
  3. 有材质的模型
    • 自发光
    • 导出材质模型

$8. 光与影

环境光、平行光、点光源、聚光灯

  1. 环境光

    1
    2
    THERE.AmbientLight(hex);
    // 依赖ambient，对应通道反射对应颜色的光

  2. 点光源 到不同物体表面的亮度是线性递减的

    1
    2
    3
    4
    THERE.PointLight(hex, intensity, distance);
    // hex        颜光值
    // intensity  亮度，默认1
    // distance   光源最远照射的距离，默认0

  3. 平行光 对于任意平行的平面，平行光照射的亮度都是相同，与平面所在位置无关

    1
    THERE.DirectionalLight(hex, intansity);

  4. 聚光灯 类似圆锥形的光线

    1
    2
    3
    THERE.SpotLigth(hex, intensity, distance, angle, exponent);
    // angle      聚光灯的张角，默认Math.PI/3, 最大值为Math.PI/2
    // expoent    光强在偏离target的衰减指数，默认10

  5. 阴影

    能形成：THERE.DirectionalLight 与 THERE.SpotLight ，参数因光源定
    能表现：THERE.LamberMaterial 与 THERE.PhongMaterial

    • renderer.shadowMapEnabled = true
    • 光源及所有产生阴影物体 xxx.castShadow = true
    • 接收阴影的物体调用 xxx.receiveShadow = true
    • 阴影的深浅 shadowDarkness 范围是0到1，越小越浅