【three.js学习笔记】01 场景相机和几何体框架

three.js有助于方便地利用webgl创建三维场景与动画，这是本人学习笔记的第一章，

引入three.js

远程简化版？：https://threejs.org/build/three.js
three.min.js接近500k其实还是很大的不知道这个为啥这么小
首先要引入three.js
创建一个作为显示窗口的canvas
html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src='https://threejs.org/build/three.js'></script>
    <title>场景</title>
    <style>
        body{
            margin:0;padding:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div><!--场景的容器-->
    <script>
        //初始化函数。在加载three之后调用，初始化所有的东西
        function init(){
        }
        window.onload = init;
    </script>
</body>
</html>

创建场景与相机与渲染器

    function init(){
        //创建一个新的场景
        var scene = new THREE.Scene();
        //创建透视相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        //后面的参数分别是 透视角度，长宽比例，近视锥面，远视锥面 

        //小于近视锥面的物体将不渲染，远于远视锥面的物体也不渲染
        //设置相机位置与朝向
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        //创建渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));//渲染器清除颜色 ：淡灰色
        renderer.setSize(window.innerWidth,window.innerHeight);
        //在div内放置canvas
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
        //渲染
        renderer.render(scene, camera);
    }
    window.onload = init;

添加坐标系

完成之后运行一下，我们发现这里面啥都没有除了页面颜色变成了eee这个淡灰色
继续在init函数中添加

    var axes = new THREE.AxesHelper(20);
    scene.add(axes);

该段代码添加在渲染之前，运行之后，在画布的中间会出现一个坐标轴辅助线：
three.js坐标轴辅助线
其中红色线为x正方向，绿色线为y正方向，蓝色线为z方向，而且three.js的更为底层的WebGL默认使用的是右手坐标系，如果改变相机的位置，那么坐标系就会发生相应变化，这个辅助坐标系是便于开发。并确定场景原点的位置。

添加一个平面 (plane)

    var planeGeometry = new THREE.PlaneGeometry(60, 20);//框架 长60 宽20
    var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//材质 单纯只有颜色的材质
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);//填充

    //更改平面位置
    plane.rotation.x = -0.5 * Math.PI;//按照x轴旋转90度
    plane.position.x = 15;//向x正方向移动一点点
    plane.position.y = 0;
    plane.position.z = 0;

上面的代码添加了一个灰色的平面，并且和x轴与z轴组成的平面平行
效果如下：

添加几何体框架

立方体：
继续在init函数中加入

//创建立方体
    var cubeGeometry = new THREE.BoxGeometry(4,4,4);//大小
    var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff7777,wireframe: true});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    //立方体位置
    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z = 0;
    //将立方体添加进入场景
    scene.add(cube);

创建之后的效果，可以看得到一个由线组成的立方体框架：
立方体框架 three.js

立方体默认以中心点作为对象的中心

球体：
在init函数中继续加入

    //添加球体
    var sphereGeometry = new THREE.SphereGeometry(4, 20 ,20);
    var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff77ff, wireframe:true});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    //设定球体位置
    sphere.position.x = 18;
    sphere.position.y = 4;
    sphere.position.z = 2;
    //将球体加入到场景中
    scene.add(sphere);

之后在场景中将会出现球体和立方体的框架结构：
three.js球体立方体框架

柱体
在init函数中添加：

    var cylinderGeometry = new THREE.CylinderGeometry( 4, 4, 5, 5);
    //四个参数分别为。上底面半径，下底面半径，高 和边数，如果很多则就是圆柱体
    var material = new THREE.MeshBasicMaterial({color:0xffff33,wireframe:true});
    var cylinder = new THREE.Mesh(cylinderGeometry,material);

    //设定位置
    cylinder.position.x = 2;
    cylinder.position.y = 2.5;
    cylinder.position.z = 6;
    //添加柱体
    scene.add(cylinder);

效果：
three.js几何体

three的几何体中有许多生成几何体的方法，请自行查看
three.js中的几何体

下面的一章将会介绍three中的光线 _ (:зゝ∠)_