THREE js四大组件

在Three.js中，要渲染物体到网页，需要四个组件：场景（scene）、相机（camera）、渲染器（renderer）、几何体（geometry）

有了这四大组件，才能通过相机将场景渲染到网页上去。

四大组件：

1. 场景：场景是所有物体的容器

    // 创建一个场景
   var scene = new THREE.Scene()     

2. 相机 ：相机决定了场景中哪个角度的物体会显示出来，相机有很多种，我们在这里只介绍两种：透视相机和正投影相机。       

        透视相机：即离试点近的物体大，离视点远的物体小，远到几点即为消失，成为灭点；                                                                      正投影相机:  即远处和近处的是一样大  

// 定义一个相机
//var camera = new THREE.PerspectiveCamera=funtion(fov,aspect,near,far)
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

  相机参数：   

•  视角fov:视角的大小，可以理解为眼睛睁开的大小，如果设置为0，就是闭上眼睛，什么都看不到；如果设置为180，可以认为视野广阔，但是在180度时，物体在整个可视区域比例会变小

• 近平面 near : 表示近处裁面的距离，不能设置为负值

• 远平面far : 表示远处的裁面

• 纵横比aspect : 实际窗口的纵横比，即宽度除以高度。这个值越大，说明宽度越大，看到的就是宽荧幕，如果这个值小于1 ，看到的就是竖屏的

3.渲染器

渲染器 决定了怎么将场景画到屏幕上， 通过计算显示到屏幕上，计算的过程叫做渲染。

//var renderer = new THREE.WebGLRenderer();
// 定义一个渲染器
var renderer = new THREE.WebGLRenderer();
// 设置渲染器的宽和高
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4.网络模型：

网络模型（几何体） 就是要显示在场景的对象

//var geometry = new THREE.Geometry();
// 定义一个几何体
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);