webgl初始

一，什么是WebGL

    WebGL（全写Web Graphics Library）是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

     webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。

二，html5 canvas和webgl和three.js有什么区别

其实三者是有联系的，canvas是h5定义的新标签。webgl要依赖于canvas运行。而three.js是webGL的一个库。

三，three.js的入门，我们核心的步骤就是：

1.设置three.js渲染器（三大组件）

2.设置摄像机camera（三大组件）

3.设置场景scene（三大组件）

4.设置光源light

5.设置物体object

6.渲染

开始前先检查设备浏览器是否支持WebGL

if (Detector.webgl) {

init();

animate();

} else {

var warning = Detector.getWebGLErrorMessage();

document.getElementById('container').appendChild(warning);

}

1，渲染器

渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在定义的div下面，这样渲染的结果就能够在页面中显示了。

var renderer;
function initThree() {
    width = document.getElementById("canvas_frame").clientWidth;
    height = document.getElementById("canvas_frame").clientHeight;
    renderer = new THREE.WebGLRenderer({
        antialias : true
    });
    renderer.setSize(width,height);
    document.getElementById("canvas_frame").appendChild(renderer.domElement);
    renderer.setClearColor(0xFFFFFF, 1.0);
}

2，摄像机

场景只有一种，但是相机却又很多种。

       var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.z = 1000; //只能看到y上的线
        }

3，场景

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

4，光源

光源非必需

5，物体

        var cube;
        function initObject() {
         
          var geometry = new THREE.CubeGeometry(1,1,1);
             var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
             cube = new THREE.Mesh(geometry, material);
          scene.add(cube);
  }

6，开始渲染函数

终于到了最后一步，这一步做完后，就可以该干嘛干嘛去了。

渲染应该使用渲染器，结合相机和场景来得到结果画面。实现这个功能的函数是

render( scene, camera, renderTarget, forceClear )

各个参数的意义是：

scene：前面定义的场景

camera：前面定义的相机

renderTarget：渲染的目标，默认是渲染到前面定义的render变量中

forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

function threeStart() {
    initThree();
    initScene();
    initCamera();
    initObject();
    renderer.clear();
    renderer.render(scene, camera);
}

渲染有两种方式：实时渲染和离线渲染 。

实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染：

function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了。

http://www.hewebgl.com/article/getarticle/50

http://www.bubuko.com/infodetail-1837020.html