ThreeJs之HelloWord

一、Threejs简介

      Threejs是一款运行在浏览器的基于JavaScript的WebGL三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。提供了非常多的3D显示功能。

二、 基础结构

1. 场景Scene

        场景是Web3D中用于放置对象、灯光、照相机等内容的地方，类似于画布。通过简单的api即可创建一个场景：

var scene = new THREE.Scene();//创建场景对象

Scene提供了五个属性autoUpdate、background、environment、fog、overrideMaterial。

2. 相机Camera

        threejs中的相机分为透视投影相机(距离相机越近物体越大，越远则越小)和正交投影相机(不同位置被投影出来的大小一样)。

//透视投影相机
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

//正交投影相机
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

3.渲染器

        threejs渲染器基于webGL的。根据物体离相机的距离进行控制渲染。

var renderer = new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(500, 500);
 //设置背景颜色
renderer.setClearColor(0x000000, 1);
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement);
//执行渲染操作指定场景、相机作为参数
renderer.render(scene, camera);

4.几何模型Geometry

基础的三维模型可以设置大小，位置，角度等，并提供了旋转、缩放、平移等功能。Threejs中包括二维几何模型和三维几何模型：PlaneGeometry平面模型，CircleGeometry圆形模型，ShapeGeometry自定义二维模型，BoxGeometry立方体模型，SphereGeometry球状模型，CylinderGeometry圆柱模型，TorusGeometry圆环模型，TorusKnotGeometry环面扭结，ConeGeotry锥体模型，PolyhedronGeometry多面体。

//创建一个立方体几何对象Geometry,长宽高分别是100
var geometry = new THREE.BoxGeometry(100, 100, 100); 

5.材质Material

所有材料的基类，展示了对象的外观。

//材质对象Material，颜色为蓝色
var material = new THREE.MeshLambertMaterial({
    color: 0x0000ff
}); 

4.网格模型Mesh

网格模型的生成需要一个几何体与至少一种材质

//网格模型对象Mesh
var mesh = new THREE.Mesh(geometry, material);
//网格模型添加到场景中
scene.add(mesh);

5.光源

threejs提供了丰富的光源，如：AmbientLight，PointLight，SpotLight，DirectionalLight，HemisphereLigght，AreaLight，LensFlare等等。通过简单的方法就可以创造出光源。

//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

6.基本结构

场景(Scene)	网格模型(Mesh)	几何体(Geometry)	形状、尺寸、大小
		材质(Material)	颜色、贴图、
	光照(Light)	分类	环境光、点光源、平行光
相机(Camera)	投影方式	透射投影
		正射投影
渲染器Renderer

三、基本示例

var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(500, 300, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);