1.場(chǎng)景
場(chǎng)景是three.js最基礎(chǔ)的三大要素之一，你的所有要展示的內(nèi)容都在場(chǎng)景之中，創(chuàng)建的方式十分簡(jiǎn)單var scene = new Scene() 就可以創(chuàng)建場(chǎng)景對(duì)象
2.相機(jī)
相機(jī)是three.js最基礎(chǔ)的三大要素之二缕探，我們做的是一個(gè)3D的視圖所以需要一個(gè)從一個(gè)?角度去觀察物體骗绕，var camera = THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)這樣就可以創(chuàng)建一個(gè)最常用的相機(jī)维苔，第一個(gè)參數(shù)是觀察視角的角度宵荒，第二個(gè)是觀察場(chǎng)景比例,第三徘意，四個(gè)是近景距離遠(yuǎn)景距離苔悦。代表的是觀察者的角色
3.渲染器
渲染器是three.js最基礎(chǔ)的三大要素之二，是three.js用來(lái)渲染圖形的引擎椎咧，three.js最基礎(chǔ)的三大要素之二玖详，我們做的是一個(gè)3D的視圖所以需要一個(gè)從一個(gè)?角度去觀察物體。
var renderer = new THREE.WebGLRenderer()
renderer.setClearColor(0xEEEEEE)
renderer.setSize(window.innerWidth, window.innerHeight)
我們可以通過(guò)api來(lái)控制渲染視圖的顏色和尺寸
4.坐標(biāo)系
采用的是右手坐標(biāo)系來(lái)建立模型勤讽，為了方便理解我們可以創(chuàng)建坐標(biāo)系來(lái)幫助我們開(kāi)發(fā)var axes=new THREE.AxisHelper(20); scene.add(axes)傳入的值是坐標(biāo)系的長(zhǎng)度蟋座，把坐標(biāo)系加入場(chǎng)景才會(huì)生效
5.物體
我們的圖形都是由各種物體拼接在一起組成的,three.js為我們提供了幾種基本的圖形，簡(jiǎn)單說(shuō)幾個(gè)
模型及材料
每個(gè)物體都是由模型和材料組成的每個(gè)物體都有一個(gè)定義模型的方法脚牍，模型決定物體的形狀向臀，材料決定的顏色，紋理等
1.平面
var planeGeo = new THREE.PlaneGeometry(60,20)
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc})
var plane = new THREE.Mesh(planeGeo, planeMaterial)
THREE.PlaneGeometry創(chuàng)建一個(gè)基本的平面诸狭，THREE.MeshBasicMaterial創(chuàng)建一個(gè)基本的材料在這里我們只添加顏色券膀，然后把材料和模型合成到一起組成平面
2.長(zhǎng)方體
var cubeGeo = new THREE.CubeGeometry(4,4,4)
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000})
var cube = new THREE.Mesh(cubeGeo, cubeMaterial)
THREE.CubeGeometry創(chuàng)建一個(gè)長(zhǎng)方體三個(gè)參數(shù)分別代表x,y,z軸的長(zhǎng)度其他方法同上
3.球體
var spGeo = new THREE.SphereGeometry(4, 20, 20)
var spMa = new THREE.MeshLambertMaterial({color: 0x7777ff})
var sp = new THREE.Mesh(spGeo, spMa)
6.渲染
我們定義好了物體需要把物體添加到場(chǎng)景中，scene.add(plane)依次把物體添加到場(chǎng)景中驯遇，然后我們調(diào)用renderer.render(scene, camera)把圖形渲染好最后芹彬，我們把圖形添加到dom元素中，創(chuàng)建一個(gè)空的div標(biāo)簽id為webdocument.getElementById('web').appendChild(renderer.domElement)叉庐，
7.位置
我們默認(rèn)的物體都會(huì)渲染在原點(diǎn)上舒帮，我們需要把物體畫(huà)在我們想要的位置上，我們先來(lái)旋轉(zhuǎn)一下平面plane.rotation.x = -0.5*Math.PI將平面旋轉(zhuǎn)90度
plane.position.x = 15將平面在x軸方向上移動(dòng)15,相應(yīng)的處理下長(zhǎng)方體和球體陡叠，還差一個(gè)相機(jī)的位置的位置玩郊，如果不設(shè)置我們會(huì)什么都看不到，設(shè)置一個(gè)坐標(biāo)決定我們是在哪個(gè)角度看
cube.position.x = -4
cube.position.y = 2
cube.position.z = 2
sp.position.x = 20
sp.position.y = 4
sp.position.z = 2
camera.position.x = -30
camera.position.y = 40
camera.position.z = 30
camera.lookAt(scene.position)
現(xiàn)在我們會(huì)看到如上圖的效果
8.光源
three.js我們可以通過(guò)api來(lái)控制光枉阵，來(lái)我們可以控制光的顏色和光的角度译红，為了性能，默認(rèn)是不顯示陰影的所以我們要開(kāi)啟陰影效果,renderer.shadowMap.enabled = true岭妖，我們之前使用的材料apiTHREE.MeshBasicMaterial是不會(huì)產(chǎn)生陰影的临庇，所以長(zhǎng)方體和球體我們采用THREE.MeshLambertMaterial，需要反射光的物體需要通過(guò)api開(kāi)啟陰影
plane.receiveShadow = true
cube.castShadow = true
sp.castShadow = true
這樣我們就會(huì)看到圖形上的陰影
9.動(dòng)畫(huà)
three.js中我們調(diào)用webGl專(zhuān)門(mén)的api來(lái)重新渲染昵慌，效率比setInterval高假夺，直接看代碼
function renderScene(){
stats.update()
cube.rotation.x += 0.03
step += 0.03
requestAnimationFrame(renderScene)
sp.position.x = 20 + (10*Math.cos(step))
sp.position.y = 2 + (10*Math.abs(Math.sin(step)))
renderer.render(scene, camera)
}
renderScene()
這樣就會(huì)看到長(zhǎng)方體繞著x軸轉(zhuǎn)動(dòng)，球體在做拋物線(xiàn)來(lái)回運(yùn)動(dòng)
