three.js

什么是three.js？它有什么用？这里我就不做详细的介绍了，毕竟百度很强大。

作为程序员，先把思路想好，在开始敲代码是很重要的（个人愚见）。

大概思路如下：

1.场景（scene）； // three中所有元素都应该放在它里面，相当于一个舞台，所有的东西都应该在舞台上呈现。

2.相机（camera）；// three中的相机其实就是人们看上面scene（舞台）的视角，就比如看舞台，因为位置不同，也就有不同的视角。

3.渲染器（renderer）；// three中的渲染器，就相当于这个舞台的大小及颜色，没有这个设置，这个舞台是没有用的。

4.物体（geometry）；// three中的物体，就相当于舞台上的演员，没有演员，那我们就只能看到舞台的背景及大小。

5.网孔（Mesh）； // three中的网孔，就跟这个舞台是所有其他元素（相机、渲染器等等）的载体，而网孔就是物体及物体的其他特征（颜色等特征）的载体。

这是创建最基本的5个步骤，缺一不可。

不说废话上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js 第一个demo</title>
    <script src="js/three.js"></script>
</head>
<body>

</body>
</html>
<script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建相机  90 -> 视角；相机拍摄面 -> 一般为长宽比；0.1 -> 近裁剪面； 1000 -> 远裁剪面
        var camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 0.1, 1000);

        // 渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 设置背景颜色
        renderer.setClearColor('#5AC7FF');
        document.body.appendChild(renderer.domElement);

        // 创建物体   CubeGeometry 代表立体图形 1,3,2 分别代表长宽高
        var geometry = new THREE.CubeGeometry(1,3,2,2,2,5);

        //网孔基础材料（MeshBasicMaterial）为其填充颜色
        var material = new THREE.MeshBasicMaterial({color: "#990033"});

        //网孔(Mesh)：网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面
        var cube = new THREE.Mesh(geometry, material);
        //将物体添加到场景
        scene.add(cube);

        camera.position.z = 5;

        renderer.render(scene, camera);
    </script>

这段代码的效果图如下：

简单的入门今天就到这儿了，要想了解更多请看下回分解。