WebGL笔记
o3djs
1、google的开源项目，将o3d插件用js实现，成为webgl的js框架
2、需要将dae格式转换成json格式，然后再加载，google提供了开源转换工具，有小问题，但可解决。
3、加载官方提供的例子没问题，都是小场景
4、接口丰富，提供绘制线面以及各种三维体的接口，提供各种事件接口，开发复杂，难度大
5、api和o3d插件相同，因此不支持webgl的ie理论上可使用o3d插件兼容
6、因为之前作为一个浏览器插件的js接口，初始化流程让人感觉不爽
7、导入会议中心的场景后，在渲染时有问题：
scenceJS
1、个人的开源webGL框架，一直在更新，适用于最新的webgl标准
2、模型不是靠加载，而是将模型的dae格式文件转换为框架本身的js源代码，类似json格式，直接运行，不需要解析。框架提供免费的js实现的转换工具。模型转换后再压缩js,比原始dae文件略小。
3、0.78版本后提供了所谓的jsonAPI，纯面向对象的方式开发，比较容易，事件可以直接加在对象上。
4、开发中该框架把场景中的所有东西组织成树状场景图，父级改变后，下面所有的子级都会有效果，比如在父级加一个旋转，下面所有级别都会旋转
5、提供了geometry类，通过自己构造可以添加点线面
6、框架开发者提供了很多bug提交途径，回复率好像比较高
7、加载会议中心模型，贴图混乱。在chrome下有闪烁，在firefox中不闪烁
copperlicht
1. 欧洲的一个公司推出的商业js框架，免费版提供压缩版的js代码，未压缩js代码需购买。
2. 需要加载.ccbjs格式文件，此文件格式是这个公司自己定义的二进制文件。其他格式（3ds, obj, x, lwo, b3d, csm, dae, dmf, oct, irrmesh, ms3d, my3D, mesh, lmts, bsp, md2, stl）可以转换成ccbjs格式，需要通过此公司提供的收费工具CopperCube（提供14天免费试用）。
3. 网上说此框架加载的模型文件小，渲染效率高
4. 会议
中心模型导入CopperCube之后，贴图有误，且有破面，且三层变成了二层
GLGE
1. 开源免费框架，为游戏场景而生
2. 可以直接加载dae格式模型，也可以把模型的坐标信息配置在xml文件中
3. 提供了添加点线的接口
4. 模型，光照，材质等信息可以配置在xml文件中，js框架去读取配置信息并渲染
5. 框架自带的例子在chrome下显示正常，在firefox下不显示
6. 导入会议中心模型后贴图没有
代码样例：
<!DOCTYPE html>
<html>
<head>
<title>three.js canvas - geometry - earth</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #ffffff;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="three.min.js"></script>
<script>
var container;
var camera, scene, renderer;
var mesh;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
var loader = new THREE.TextureLoader();
loader.load( '../src/Image/hua.jpg', function ( texture ) {
var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = Math.PI/5;
mesh.rotation.y = Math.PI/5;
scene.add( mesh );
} );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>
</html>