一,組成
scene-主容器
material&texture -貼圖
geometry
object
light
renderer&shader
loader
二, 語(yǔ)法
var scene = new THREE.Scene();
var mat = THREE.MeshBasicMaterial({color: 0x60f60f})
var gem = new BoxGeometry()
攝像機(jī)
正交投影:等同平行投影
透視投影
其他
blender 軟件,3d建模
光源
點(diǎn)光 pointLight
錐形光 spotLight
環(huán)境光 AmbientLight
材質(zhì)
完全不反射 MeshBasicMaterial
漫反射 Lambert
鏡面反射 Phong
輔助線
光源輔助線:
var spotLightHelper = new THREE.DirectionalLightHelper( light );
scene.add( spotLightHelper );
坐標(biāo)系:
var axisHelper = new THREE.AxisHelper(15000);
scene.add(axisHelper);
鏡頭控制:
orbitControl
容器
new THREE.Group();
new THREE.Object3D();
擠壓
THREE.Vector2
2d vector
new THREE.ExtrudeGeometry()
多復(fù)制幾個(gè)門
mesh.clone()
持續(xù)前進(jìn),循環(huán)
鏡頭、光源、跑道、建筑,貓門;都循環(huán)前進(jìn)。
設(shè)置最遠(yuǎn)比較基線
參考:http://codepen.io/shelbeniskb/pen/dpYRWN
如何調(diào)整光源的朝向?(難以打光打成設(shè)計(jì)稿的樣子)
direcLight.target.position.set( 200, -180, 100 ); 無(wú)效
lookAt() 也無(wú)效
總是tagert是原點(diǎn)
如何使用交互控制欄?
var gui = new dat.GUI()
gui.add({}, name, param1, param2...)
onChange( ... )
如何使用貼圖?
加載:var texture = THREE.ImageUtils.loadTexture(data.url)
new THREE.MeshLambertMaterial({ map: texture });