Three.js封裝了底層的圖形接口思劳，使得我們能夠在無(wú)需掌握繁冗的圖形學(xué)知識(shí)的情況下，也能用簡(jiǎn)單的代碼實(shí)現(xiàn)三維場(chǎng)景的渲染妨猩。
準(zhǔn)備
開發(fā)之前先下載Three.js或者Three.min.js潜叛，然后在頁(yè)面上添加標(biāo)簽
<script src="/js/three.js" ></script>
Hello World
使用Three.js要分為五個(gè)步驟：
- 設(shè)置渲染器(render)
- 設(shè)置場(chǎng)景(scene)
- 設(shè)置攝像機(jī)(camera)
- 設(shè)置光源(light)
- 設(shè)置物體(object)
渲染器
三維空間里的物體映射到二維平面的過(guò)程被稱為三維渲染。 一般來(lái)說(shuō)我們都把進(jìn)行渲染操作的軟件叫做渲染器。
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas')//這個(gè)是渲染所用的canvas標(biāo)簽
});
renderer.setClearColor(0x000000);//背景
場(chǎng)景(scene)
var scene = new THREE.Scene();
攝像機(jī)(camera)
OpenGL（WebGL）中威兜、三維空間中的物體投影到二維空間的方式中销斟，存在透視投影和正投影兩種相機(jī)。
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);//將攝像機(jī)放入場(chǎng)景中
光源(light)
OpenGL（WebGL）的三維空間中椒舵，存在點(diǎn)光源和聚光燈兩種類型蚂踊。
var light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//設(shè)置平行光源
light.position.set( 200, 200, 200 );//設(shè)置光源向量
scene.add(light);// 追加光源到場(chǎng)景
物體(object)
//聲明一個(gè)正方形
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
渲染(render)
renderer.render(scene, camera);
把上面的代碼全部合并到一個(gè)頁(yè)面上就是一個(gè)最簡(jiǎn)單的demo。
