目标

介绍 WebGL 基础
介绍 WebGL 中的骑兵 Three.js
编写 Three.js 的简单实例

简单实例模板

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
		
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
		
        var renderer = new THREE.WebGLRenderer();
		
        renderer.setSize(window.innerWidth, window.innerHeight);
		
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

var geometry = new THREE.CubeGeometry(1,1,1);

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var cube = new THREE.Mesh(geometry, material); scene.add(cube);

camera.position.z = 5;

function render() {

requestAnimationFrame(render);

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene, camera);

}

render();

</script>

</body>

</html>

实例的效果是显示旋转一个绿色正方体，如下，但不同版本的 three.js 可能默认的 背景颜色 不一样：

代码解析

1、三大组建

在 Three.js 中，要渲染一个物体到网页中，需要三个组建：场景（scene）、相机（camera）、渲染器（renderer）。有这三样东西，才能将物体渲染到网页中。

创建三大要素的代码如下：

// Scene
var scene = new THREE.Scene();
// Camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Renderer
var renderer = new THREE.WebGLRenderer();
// Set renderer size be windows inner
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to HTML Element
document.body.appendChild(renderer.domElement);

// Scene

var scene = new THREE.Scene();

// Camera

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Renderer

var renderer = new THREE.WebGLRenderer();

// Set renderer size be windows inner

renderer.setSize(window.innerWidth, window.innerHeight);

// Add renderer to HTML Element

document.body.appendChild(renderer.domElement);

2、场景

在 Three.js 中场景只有一种，用 THREE.Scene 来表示，构建的代码如下：

var scene = new THREE.Scene();

1	var scene = new THREE.Scene();

场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象放入场景中。

3、相机

另一个组建是相机，相机决定了场景中哪个角度的景色会显示出来。就如人的眼睛，相机的位置决定了所渲染的景色的不同。

场景只有一种，但是相机却有很多种。不同的相机确定了呈现出的各个方面比重的不同，例如有的相机适合人像，有的适合风景，专业的摄影师根据实际用途的不同会选择不同的相机。对程序员来说，只要设置不同的相机参数，就能让相机产生不一样的效果。

在 Three.js 中有不同的相机：

（1）透视相机（THREE.PerspectiveCamera），这是一种比较常用的相机类型。定义一个相机的代码如下：

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);

1	var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);

4、渲染器

接触过图像渲染技术的童鞋都知道，渲染器是个什么东西，这个东西的重要性更不用说。渲染器直接决定了渲染的结果应该画在页面的什么地方，以及怎么画（渲染）。

定义一个 WebRenderer 渲染器的代码如下：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

需要注意的是，渲染器 renderer 的 domElement 元素一般表示为渲染器中的画布 canvas ，所有的渲染都是画在 domElement 上的，所以这里的 appendChild 表示将这个 domElement 元素挂在 body 下面，这样渲染的结果才能在页面中显示。

5、添加物体到场景中

将一个物体添加到场景中：

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

var geometry = new THREE.CubeGeometry(1,1,1);

var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

var cube = new THREE.Mesh(geometry, material);

scene.add(cube);

代码中出现的 THREE.CubeGeometry 是一个几何体。这里将之定义为 正方体 或 长方体，所以由三个参数组成（长、宽、高）。CubeGeometry 原型为如下代码定义：

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmenetsDepth, materials, sides);

width:  立方体x轴的长度
height: 立方体y轴的长度
depth:  立方体z轴的长度，也就是长度

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmenetsDepth, materials, sides);

width: 立方体x轴的长度

height: 立方体y轴的长度

depth: 立方体z轴的长度，也就是长度

6、渲染

上面的几部都是为了渲染之前做的参数设定和准备，在这一步要做的就是 将目标物体(5)在什么场景(2)里怎么渲染(3&4) 出来。

渲染就应该使用渲染器，结合相机和场景来得到结果画面。实现的代码如下：

render(scene, camera, renderTarget, forceClear);

scene:        前面定义的场景
camera:       前面定义的相机
renderTarget: 渲染的目标，默认是渲染到前面定义的render变量中
forceClear:   每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除

render(scene, camera, renderTarget, forceClear);

scene: 前面定义的场景

camera: 前面定义的相机

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

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

7、渲染循环

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

离线渲染，就是事先渲染好的一帧帧图像，然后再将之拼接成一段连续的图像。如果不事先处理，那么播放（显示）的时候就会很卡，因为 CPU & GPU 不能够快速的处理 高质量图像。

实时渲染，就是需要不停的对画面进行即时渲染，即使画面没有任何变化，也需要 重新渲染 。

实例如下：

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

function render() {

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene, camera);

requestAnimationFrame(render);

}

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

后记

A、场景，相机，渲染器之间的关系

Threejs 中的：

场景（Scene）是一个（或多个）物体的容器，开发者可以将需要的角色（Object）放入场景中。同时，角色自身也在管理着其在场景中的位置。

相机（Camera）的作用就是面对场景，在场景中取一个合适的“景”，将之拍摄下来。

渲染器（Renderer）的作用就是把相机拍摄下来的“景”，放到画布上（这里可以为浏览器界面）显示。

B、第二框架实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第二框架</title>
        <script src="js/Three.js" data-ke-src="js/Three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }
        </style>
        <script>
            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);
            }

            var camera;
            function initCamera() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 1000;
                camera.position.z = 0;
                camera.up.x = 0;
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });
            }

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

            var light;
            function initLight() {
                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
                light.position.set(100, 100, 200);
                scene.add(light);
            }

            var cube;
            function initObject() {
                var geometry = new THREE.CubeGeometry( 1, 1, 1 );
                var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

                var p1 = new THREE.Vector3( -100, 0,  100 );
                var p2 = new THREE.Vector3(  100, 0, -100 );
                geometry.vertices.push(p1);
                geometry.vertices.push(p2);
                geometry.colors.push( color1, color2 );

                // WebGLRenderer 102 no longer supported THREE.LinePieces, instead of THREE.LineSegments.
                var line = new THREE.Line( geometry, material, THREE.Segments );
                scene.add(line);
            }

            function render() {
                renderer.clear();
                renderer.render( scene, camera );
                requestAnimationFrame( render );
            }
            function threeStart() {
                initThreeRenderer();
                initCamera();
                initScene();
                initLight();
                initObject();
                render();
            }
        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

div#canvas-frame {

border: none;

cursor: pointer;

width: 100%;

height: 600px;

background-color: #EEEEEE;

}

</style>

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

}

var camera;

function initCamera() {

width = document.getElementById('canvas-frame').clientWidth;

height = document.getElementById('canvas-frame').clientHeight;

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

camera.position.x = 0;

camera.position.y = 1000;

camera.position.z = 0;

camera.up.x = 0;

camera.up.y = 0;

camera.up.z = 1;

camera.lookAt({

x : 0,

y : 0,

z : 0

});

}

var scene;

function initScene() {

scene = new THREE.Scene();

}

var light;

function initLight() {

light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);

light.position.set(100, 100, 200);

scene.add(light);

}

var cube;

function initObject() {

var geometry = new THREE.CubeGeometry( 1, 1, 1 );

var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

var p1 = new THREE.Vector3( -100, 0, 100 );

var p2 = new THREE.Vector3( 100, 0, -100 );

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.colors.push( color1, color2 );

// WebGLRenderer 102 no longer supported THREE.LinePieces, instead of THREE.LineSegments.

var line = new THREE.Line( geometry, material, THREE.Segments );

scene.add(line);

}

function render() {

renderer.clear();

renderer.render( scene, camera );

requestAnimationFrame( render );

}

function threeStart() {

initThreeRenderer();

initCamera();

initScene();

initLight();

initObject();

render();

}

</script>

</head>

</body>

</html>

实际上述代码运行并没有东西出来，但是框架的结构已经很明确：

initThreeRenderer()：初始化渲染器

initCamera()：初始化相机

initScene()：初始化场景

initLight()：初始化灯光

initObject()：初始化物体

render()：开始渲染(循环)