版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
其实unity也有发布webgl的功能，但是个人觉得使用起来比较鸡肋，而且有很多限制和问题，这一篇我来讲述一下，怎么用three.js来创建一个场景：
首先，我们需要下载three.js的源码，地址是https://github.com/mrdoob/three.js/
下载完成后，找到我们下载的目录：
由于我们需要引用的js在build里面，所以我直接把html文件放在build里面写，方便大家理解，新建一个我们的文件，命名MyScene:
然后打开这个文件，我们编写，代码如下：
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>值得注意的是，必须引入下面这个js，因为我是放在跟它同一个目录下，所以路径直接写它的名字就行
<script src="three.js"></script>head标签里面的是我们的样式，抬头之类的，我们的脚本逻辑都在script里面写就好了，animate()函数其实相当于unity的update函数，一秒运行60次左右
下面我们看看运行的效果，直接用浏览器打开我们新建编写的html文件即可：
我们创建一个cube,然后让他旋转，希望这个能作为大家第一个练手的例子，更多的关注后面的分享，谢谢