使用three.js制作一个含有3d内容的网页，首先我们需要写一个html5的架子，引入three.js相关的脚本，以及必要样式和用来显示3d内容的块（这里用一个div，当然body也是可以的），既然开始学three.js了，想必也有一定的基础了，我们不多说废话直接上代码：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>webgl互交测试</title>
- <style>
- *{
- padding: 0;
- margin: 0;
- }
- #b{
- width: 200px;
- height: 500px;
- background: #000;
- }
- </style>
- </head>
- <body>
- <div id="b">
- <div id="canvas-frame"></div>
- </div>
- <script src="three-js/build/three.js" data-ke-src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
- <script src="three-js/examples/js/libs/stats.min.js"></script>
- </body>
- </html>
对了，那个stats.min.js实际上并不是必须的，它的作用是显示帧数（fps）用的，我这里准备使用它，就需要把它加上。
再想想我们给这个世界录像，首先是有一个三维的空间，他们是容纳物品的地方，摄像机必不可少，当然我们会需要胶卷之类的东西。使用three.js也需要三个东西，场景，相机，以及让他们产生关联并成像的渲染器，我们写出js代码就像这样(dom是用来展示元素节点)
- dom=document.getElementById('b');
- var scene = new THREE.Scene();//场景
- var camera=new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000);//创建透视相机 四个参数依次是
- //视野大小（我们所看到的世界是相当于是在一个横放的四棱锥中，这个值就是这个四棱锥顶部那个角的大小，如果设置成0就缩成一条线了，这样就会什么也看不到，如果设置得过大，thre.js可能会傻掉，因为过大的视角中的物体根本不能投影到一个平面中去）
- //宽高比
- //能看到的物体的最近距离
- //能看到的物体的最远距离
- camera.position.set(0,200,0);//设置相机位置
- camera.lookAt(scene.position);//大概让相机对准原点吧，这样有助于一会儿后我们能找到这个物体
- var renderer = new THREE.WebGLRenderer();//渲染器
- renderer.setSize(dom.offsetWidth,dom.offsetHeight);//设置渲染器大小
- renderer.setClearColorHex(0x000000, 1);//设置渲染器颜色（相当于是无限远处的颜色）
- dom.appendChild(this.renderer.domElement);//把three.js生成的节点挂载到网页上去（相当于把摄像机拍摄到的东西投影到“纸”上）
接下来我们就让这个摄像机去看这个世界
- renderer.render(scene,camera);//渲染（记录相机所拍摄的东西并显示
运行这个网页，我们发现除了渲染器的颜色什么也没有看到,那是很正常的因为场景中空空的，什么也没有。我们在下一节再线场景中添加物体吧。