threejs初探

一，组成

scene-主容器
material&texture －贴图
geometry
object
light
renderer&shader
loader

二， 语法

var scene = new THREE.Scene();
var mat = THREE.MeshBasicMaterial({color: 0x60f60f})
var gem = new BoxGeometry()

摄像机

正交投影：等同平行投影
透视投影

其他

blender 软件，3d建模

光源

点光 pointLight
锥形光 spotLight
环境光 AmbientLight

材质

完全不反射 MeshBasicMaterial
漫反射 Lambert
镜面反射 Phong

辅助线

光源辅助线:
var spotLightHelper = new THREE.DirectionalLightHelper( light );
scene.add( spotLightHelper );
坐标系:
var axisHelper = new THREE.AxisHelper(15000);
scene.add(axisHelper);
镜头控制:
orbitControl

容器

new THREE.Group();
new THREE.Object3D();

挤压

THREE.Vector2
2d vector
new THREE.ExtrudeGeometry()

多复制几个门

mesh.clone()

持续前进，循环

镜头、光源、跑道、建筑，猫门；都循环前进。
设置最远比较基线
参考：http://codepen.io/shelbeniskb/pen/dpYRWN

如何调整光源的朝向？(难以打光打成设计稿的样子)

direcLight.target.position.set( 200, -180, 100 ); 无效
lookAt() 也无效
总是tagert是原点

如何使用交互控制栏？

var gui = new dat.GUI()
gui.add({}, name, param1, param2...)
onChange( ... )

如何使用贴图？

加载：var texture = THREE.ImageUtils.loadTexture(data.url)
new THREE.MeshLambertMaterial({ map: texture });

如何把 2d svg path 转成 3d path ？