原创力文档- 1、本文档共2页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
前面我们看到了使用原生的 WebGL API 开发是多么的累， 正因为如此， 大量的 WebGL
框架被开发出来。使用这些框架，你可以快速创建需要的 3D 场景。这些框架不同程度的封
装了创建 3D 场景的各种要素，例如场景，相机、模型、光照、材质等等；使用这些封装起
来的对象，就可以很简单的创建需要的 3D 场景，这样你就只需要把更多精力放在逻辑方面
就可以了。
目前并没有哪一个具有能压倒其他框架的优势，选择什么样的框，还是看个人喜好吧，
不过选择框架的时候， 个人觉得还是多看看框架最后的更新时间， 选择稳定更新的框架能让
你始终能使用上最新的特性，使你的程序稳定性更好。
下面的例子就使用了 Three.js 框架进行开发。
Three.js 是一个比较全面的开源框架，它良好的封装的 3D 场景的各种要素。你可以用
它来很容易的去创建摄像机， 模型， 光照， 材质等等。 你还可以选择不同的渲染器， Three.js
提供了多种渲染方式，你可以选择使用 canvas 来渲染，也可以使用 WebGL 或者 SVG 来进
行渲染。
此外， Three.js 可以加载很多格式的 3D 文件，你的模型文件可以来自 Blender ，Maya ，
Chinema4D ，3DMax 等等。而且内置了比较基础的东西： (球体 )Spheres, (飞机 )Planes, (立方
体) Cubes, ( 圆柱体 )Cylinders 。Three.js 创建这些物体会非常的容易。
好了，直接看代码：
代码如下 :
<!DOCTYPE html>
<html>
<head>
<title>threeJSDemo </title>
<meta charset="utf-8">
<style>
body
{
margin:0px;
background-color:#B0B0B0;
overload:hidden;
}
</style>
</head>
<body>
<script src="Three.js"></script>
<script>
var camera,scene,renderer;
var mesh;
init();
animate();
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70,window.innerWidth /
window.innerHeight,1,1000);
camera.position.z = 400;
scene.add(camera);
geometry = new THREE.CubeGeometry(200,200,200);
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
renderer = new THREE
文档评论（0）