WebGL 基础

webgl 场景创建

• 渲染
  • render (scene, camera)
  • setViewport()

   var renderer = new THREE.WebGLRenderer({
          antialias : true });
  //  WebGLRenderer ( parameters )
  /**
      parameters :
        1. empty
        2. canvas 画板  eg. document.getElementById("divCanvas");
        3. context
        4. antialias 反锯齿
        5. stencil 
         ... ... 
  **/
  // 两种创建方式
  //  1. 
    var render = new THREE.WebGLRenderer({
       canvas: document.getElementById("mainCanvas")
    })
  // 2.
    var render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    render.setClearColor(0x000000);
    document.body.appendChild(renderer.domElement);

• 场景

var scene = new THREE.Scene();

• 相机
  camera.position
  camera.rotaion
  • 正视投影

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

• 透视投影
  涉及到四个参数（fov, width/height, near, far）
  http://www.ituring.com.cn/download/01YYrMaASOzm.big

来源ituring网站

• fov ：角度
• width/height : 视窗比
• near 离相机最近的距离
• far 最远距离

   var camera = new THREE.PerspectiveCamera( fov, width/height, near , far);
  camera.position.z = 10;

• 物体
  物体定义分为材质和几何特征
  • 立方体

var  geometry = new THREE.BoxGeometry(width, height, depth);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);

• 球

WebGL 基本数据结构

• Vector
• Matrix3
• Matrix4
• ....

技巧

个人在学习的过程中发现对相机的投影情况不能准确找到，因此绘制了坐标

 function drawAxes(scene){
                // x-axis
                var xGeo = new THREE.Geometry();
                xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
                xGeo.vertices.push(new THREE.Vector3(13, 0, 0));
                var xMat = new THREE.LineBasicMaterial({color: 0xff0000});
                var xAxis = new THREE.Line(xGeo, xMat);
                scene.add(xAxis);

                // y-axis

                var yGeo = new THREE.Geometry();
                yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
                yGeo.vertices.push(new THREE.Vector3(0, 13, 0));
                var yMat = new THREE.LineBasicMaterial({color: 0x00ff00});
                var yAxis = new THREE.Line(yGeo, yMat);
                scene.add(yAxis);

                // z-axis

                var zGeo = new THREE.Geometry();
                zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
                zGeo.vertices.push(new THREE.Vector3(0, 0, 13));
                var zMat = new THREE.LineBasicMaterial({
                    color: 0x0000ff
                });
                var zAxis = new THREE.Line(zGeo, zMat);
                scene.add(zAxis);
            }