近期进行了关于three.js 的产品展示项目，利用js基础初学了three.js，网络关于three.js的知识过于稀少，利用csdn记录笔记和分享。
//都是个人笔记和个人总结（仅供参考）
1.初识three.js
three.js的基本构成分为，画布，相机，控制器，模型，渲染器。5个元素组成了一个基本的场景。
2.每个元素的关联关系。
画布（Scene）也可以称之为现场。作为一个three场景的容器，类比为一个box（摄影棚），将其他元素装载在其中。
相机（Camera），用来代替人的眼睛，对scene中的内用进行投影或者说映射。相机也分为多种投影方式：正交投影和透视相机，，，，后期再详解。
控制器（control）：three.js内置的api，用来对模型进行缩放，平移，旋转等动作效果，主要通过鼠标和键盘进行操控。其中的操控原理其实是对相机的具体操控。（以后分析具体原理）
模型：通俗的解释就是相机的拍摄对象，模型可以是各种各样的，可以分为通过three.js 自己制作的简单模型和建模师制作的外部模型。外部模型需用通过加载器引入到我们搭建的场景中。
渲染器（render）：将相机拍摄的内容在h5界面上进行渲染，是一种渲染器。
3.熟悉一下基础场景（看看了解就好，后面详解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识three场景</title>
<style>
body {
margin: 0;
overflow: hidden;//取消滚动条
}
</style>
//引入three.js(网络地址于郭隆邦文档提供)
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
//初始化场景
var scene = new THREE.Scene();
//创建一个模型（矩形）
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
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);
// console.log(scene)
// console.log(scene.children)
//初始化相机
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(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
//初始化渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染器
renderer.render(scene, camera);
</script>
</body>
</html>