Three.js常用API及说明

场景 (Scene)

var scene = new THREE.Scene(); // 创建场景
scene.add(x);                  // 添加对象到场景

相机 (Camera)

• 正交投影相机

  var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
  

• 透视投影相机

  var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  // fov: 视角, aspect: 宽高比
  

渲染器 (Renderer)

var renderer = new THREE.WebGLRenderer(options);
// options 可选参数, 如 canvas: <canvas> 元素
renderer.setSize(宽, 高);                    // 设置渲染器尺寸
element.appendChild(renderer.domElement);    // 插入渲染器到 DOM
renderer.setClearColor(color, opacity);      // 设置背景颜色 (16 进制)
renderer.clear();                            // 清除画布
renderer.render(scene, camera);              // 渲染场景

光照 (Light)

• 环境光

  new THREE.AmbientLight(颜色);
  

• 点光源

  new THREE.PointLight(颜色, 强度, 距离);
  

• 平行光

  new THREE.DirectionalLight(颜色, 亮度);
  

• 聚光灯

  new THREE.SpotLight(颜色, 强度, 距离, 夹角, 衰减指数);
  

几何形状 (Geometry)

• 常用几何体

  new THREE.CubeGeometry(长, 宽, 高, 长的分割, 宽的分割, 高的分割); // 立方体
  new THREE.PlaneGeometry(长, 宽, 长的分割, 宽的分割);              // 平面
  new THREE.SphereGeometry(半径, 纬度分割, 经度分割);              // 球体
  new THREE.CircleGeometry(半径, 切片数, 起始角度, 跨越角度);      // 圆形
  new THREE.CylinderGeometry(顶部半径, 底部半径, 高, 圆分割);      // 圆柱体
  

• 高级几何体

  new THREE.TetrahedronGeometry(半径, 细节);  // 正四面体
  new THREE.OctahedronGeometry(半径, 细节);   // 正八面体
  new THREE.IcosahedronGeometry(半径, 细节); // 正十二面体
  new THREE.TorusGeometry(半径, 管道半径, 分段数, 管段数); // 圆环面
  

• 自定义几何体

  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(x, y, z)); // 添加点
  geometry.faces.push(new THREE.Face3(x, y, z));      // 添加面
  

材质 (Material)

• 基本材质

  new THREE.MeshBasicMaterial({
    color: 颜色,
    visible: 是否可见,
    wireframe: 是否显示线框,
    side: THREE.FrontSide | THREE.BackSide | THREE.DoubleSide,
    map: 贴图
  });
  

• Lambert 材质

  new THREE.MeshLambertMaterial({
    ambient: 反射能力,
    emissive: 自发光颜色
  });
  

• Phong 材质

  new THREE.MeshPhongMaterial({
    specular: 高光颜色,
    shininess: 光泽度,
    alphaTest: 透明度
  });
  

• 特殊材质

  new THREE.MeshDepthMaterial();  // 深度材质
  new THREE.MeshNormalMaterial(); // 法向材质
  new THREE.MeshFaceMaterial();   // 多面材质
  

贴图 (Texture)

var texture = new THREE.TextureLoader().load(url); 
texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // 设置贴图重复方式
texture.repeat.set(x, y);                             // 设置重复次数
new THREE.Texture(canvas);                            // 使用 canvas 作为贴图

模型与贴图结合

var mesh = new THREE.Mesh(几何体, 材质);
mesh.position.set(x, y, z); // 设置位置
mesh.scale.set(sx, sy, sz); // 设置缩放
mesh.rotation.set(rx, ry, rz); // 设置旋转

性能监视 (Stats)

var stats = new Stats();
document.body.appendChild(stats.domElement); // 添加监视节点
stats.begin();  // 开始监视
stats.end();    // 结束监视