WebGL之Three.js开发第一个场景（含源码）

在h5火热的当下，各种绚丽的场景层出不穷。但是，我们是不是发现大部分或者说绝大部分的网站只是一个向用户展示信息的平台。至于用户与其进行的交互则仅限于下拉浏览，点击触发，或者填写一些表单信息。

我一直在思考下一个web时代，并不敢断言一定会是WebGL，但是在不久后的几年中，用户在浏览网站时所能进行的交互将会越来越多，一种类似于游戏的渲染将会更多的应用在Web开发中。

下面是我对WebGL的第三方库Three.js的学习心得，如有不足还望谅解。非常希望您能提出宝贵意见。

开始学习：)

1、引入Three.js

在进行开发之前，我们要要引入开发所必须的库文件three.js。这个建议在官网上下载。建议直接左侧download，里面包含的其他js文件将在后期还会有用。下载完成后，我们便需要引入js文件。下面是引入three.js文件的代码展示。

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

2.创建场景

场景的创建同Scene对象，他是设置由three.js呈现的内容的位置，是我们放置灯光，物体和照相机的地方。

var scene = new THREE.Scene();//使用场景

3.创建相机

下面的语句表示的是创建一个透视相机，什么是透视相机为了让显示的更像3维的效果。透视相机在现实的时候会根据距离的远近来显示场景，离的近会显示大，离的远会显示的小。其实就像我们眼睛一眼，离的近所能看见的物品少，离的远就能看见较多的物品。

PerspectiveCamera( fov, aspect, near, far )有三个四个参数，分别是仰角，长宽比近裁剪面远裁剪面。

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

4.渲染

使用WebGL来渲染场景。WebGLRenderer含有参数，在定义参数中可以将场景渲染于特定的canvas中，不写参数时为默认值。

var renderer = new THREE.WebGLRenderer();//渲染
renderer.setSize( window.innerWidth, window.innerHeight );//设置显示的效果  如果需要显示很少的分辨率的话   可以设置更小的高度的宽度 
document.body.appendChild( renderer.domElement );//渲染元素到body中显示

5.创建一个geometry几何体

BoxGeometry能够创建一个box。其中的三个参数分别表示长宽高。
MeshBasicMaterial 表示用最简单的方式来绘制几何体。其中color是设置几何体的颜色。
Mesh函数调用geometry,和material来构造出几何体。
最后将我们所画的正方体添加在场景中。

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

6.渲染显示

在我们创建了场景、照相机、和渲染的对象，并且我们还创建了一个几何体添加在场景中时，我们还不能显示出来这个正方形的几何体。创建的场景是需要渲染的。

renderer.render( scene, camera );   //渲染场景和摄像机

7.完整代码展示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>the first three.js </title>
    <style>
        body { margin: 0;}
        canvas { width: 100%; height: 100%;}
    </style>
</head>
<body>
    <script src="../js/three.js"></script>
    <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.BoxGeometry( 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 animate() {
            requestAnimationFrame( animate ); 
            renderer.render( scene, camera );
            cube.rotation.x += 0.05;  
            cube.rotation.y += 0.05;
        }
        animate();
    </script>

</body>

秒客网