WebGL 基础

2017-04-15  本文已影响0人  shirleyR

webgl 场景创建

   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();
var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far)
来源ituring网站
   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 基本数据结构

技巧

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

 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);
            }

上一篇 下一篇

猜你喜欢

热点阅读