什么是three.js？它有什么用？这里我就不做详细的介绍了，毕竟百度很强大。
作为程序员，先把思路想好，在开始敲代码是很重要的（个人愚见）。
大概思路如下：
1.场景（scene）； // three中所有元素都应该放在它里面，相当于一个舞台，所有的东西都应该在舞台上呈现。
2.相机（camera）；// three中的相机其实就是人们看上面scene（舞台）的视角，就比如看舞台，因为位置不同，也就有不同的视角。
3.渲染器（renderer）；// three中的渲染器，就相当于这个舞台的大小及颜色，没有这个设置，这个舞台是没有用的。
4.物体（geometry）；// three中的物体，就相当于舞台上的演员，没有演员，那我们就只能看到舞台的背景及大小。
5.网孔（Mesh）； // three中的网孔，就跟这个舞台是所有其他元素（相机、渲染器等等）的载体，而网孔就是物体及物体的其他特征（颜色等特征）的载体。
这是创建最基本的5个步骤，缺一不可。
不说废话上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>three.js 第一个demo</title> <script src="js/three.js"></script> </head> <body> </body> </html> <script> // 创建场景 var scene = new THREE.Scene(); // 创建相机 90 -> 视角；相机拍摄面 -> 一般为长宽比；0.1 -> 近裁剪面； 1000 -> 远裁剪面 var camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 0.1, 1000); // 渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight);
// 设置背景颜色 renderer.setClearColor('#5AC7FF'); document.body.appendChild(renderer.domElement); // 创建物体 CubeGeometry 代表立体图形 1,3,2 分别代表长宽高 var geometry = new THREE.CubeGeometry(1,3,2,2,2,5); //网孔基础材料（MeshBasicMaterial）为其填充颜色 var material = new THREE.MeshBasicMaterial({color: "#990033"}); //网孔(Mesh)：网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面 var cube = new THREE.Mesh(geometry, material); //将物体添加到场景 scene.add(cube); camera.position.z = 5; renderer.render(scene, camera); </script>
这段代码的效果图如下：
简单的入门今天就到这儿了，要想了解更多请看下回分解。