随着各大主流浏览器对HTML5的支持,在浏览器能实现的内容逐渐的丰富起来。典型的就是WebGL.
通过它我们可以直接借助GPU在浏览器上创建逼真的三维场景,动画等。Three.js 是一个出色的JavaScript实现WebGL标准的三维立体库,它可以简化我们创建三维场景的过程。只要几行代码就可以创建一个非常炫的场景。不信?来看:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First three3d.js app</title>
<style>
body{margin:0;}
canvas{width:100%;height:100%;}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>//创建场景
var scene = new THREE.Scene();
//视觉角度
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
//调整camera的位置
camera.position.x= 30;
camera.position.y= 9;
camera.position.z= 10;
camera.lookAt(scene.position);
//渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0x000000);
//创建几何立方体
var gemometry = new THREE.CubeGeometry(4,4,4);
var material = new THREE.MeshBasicMaterial({color:0x22ff22, wireframe:true});
var cube = new THREE.Mesh(gemometry,material);
scene.add(cube);
//把canvas加入到body
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
</script>
</body>
</html>
OK,简单吧,至此,我们已经完成第一个例子,运行看看,你会得到以下结果,当然千万别忘了把three.js先加进来。下一课程见:)