初学three.js(一)创建立方体

1、三大组建

• 场景（scene） 

• 相机（camera）

• 渲染器（renderer）

有这三样才能把物体渲染到页面上，才能够使用相机将场景渲染到网页上去

创建三要素的代码：

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

相机，只要设置不同的相机参数，就能够让相机产生不一样的效果。

定义一个相机的代码如下：

渲染器 决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制

这里定义了一个WebRenderer渲染器

  // 场景
        var scene = new THREE.Scene();
        //相机 PerspectiveCamera  参数一 视野  
        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(2, 1, 1);
        var geometry = new THREE.BoxGeometry(2, 1, 1);
        var material = new THREE.MeshBasicMaterial({
            color: 0xfff
        });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        // 下面这个也会影响到视野
        camera.position.z = 6;

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);

            cube.rotation.x += 0.1; //加上这个会沿着X轴旋转
            cube.rotation.y += 0.1; //加上这个会沿着Y轴旋转
        }
        render();

这里面有一个PerspectiveCamera相机

 new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机

参数1 是视野 （物体距离视野的位置）

例如：上面是75                                          如果换成20就会变成下图（这里仅仅改变的是视野，cube的大小是一样的）