前面學習了一些webgl的基礎知識，現在就用一下three.js寫一個小例子，記錄一下學習的過程。
效果圖：
1.去github下載three.js，然后將它加載到網頁中
<script src="js/three.js"></script>
2接着就該寫一下參數了，主要的四大組件一個不能少
2.1生成“場景”組件
var scene = new THREE.Scene();
2.2生成“相機”組件
var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight, 1, 1000);
四個參數
第一個參數：是夾角
第二個參數：寬高比
第三個參數：最近距離
第四個參數：最遠距離
2.3生成“渲染器”組件
var renderer = new THREE.WebGLRenderer();
因為渲染器有許多種，按需求生成
2.4生成“幾何體”組件
var geometry = new THREE.CubeGeometry(2,2,2);
這里生成了一個立方體，同樣也可以生成多種幾何體
3.最后渲染出圖形
function render(){
//add animation
requestAnimationFrame(render);
//rotating
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
//renderer cube
renderer.render(scene,camera);
}
其中requestAnimationFrame是新的方法，也可以用setTimeout 代替
詳細代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/three.js"></script>
</head>
<body>
<script>
//create scenc
var scene = new THREE.Scene();
//create Camera
var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight, 1, 1000);
//create renderer
var renderer = new THREE.WebGLRenderer();
//clean renderer color
renderer.setClearColor('#FFFFFF');
//set renderer size
renderer.setSize(window.innerWidth,window.innerHeight);
//put rendererDom into body
document.body.appendChild(renderer.domElement);
//create geometry
var geometry = new THREE.CubeGeometry(2,2,2);
//create naterial
var material = new THREE.MeshBasicMaterial({color:0xff0000});
//create cube
var cube = new THREE.Mesh(geometry,material);
//put cube into scene
scene.add(cube);
//Point of view see the cube
camera.position.z = 10;
function render(){
//add animation
requestAnimationFrame(render);
//rotating
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
//renderer cube
renderer.render(scene,camera);
}
render();
</script>
</body>
</html>
學習資料：
[1]:WebGL中文網：http://www.hewebgl.com
[2]:three.js在Github地址：https://github.com/Billshuai/three.js
[3]:一些案例：https://threejs.org/
[4]:易百webgl教程：http://www.yiibai.com/webgl/webgl_context.html