webgl学习总结画线面及场景和物体动
WebGL是在浏览器中实现三维效果的一套规范。是浏览器中的3D引擎，是利用js代码来实现加载3D模型，渲染、输出等功能，从而实现在浏览器和微信中浏览三维文件的效果。
three.js是基于WebGL的开源图形库，里面提供了大量的WebGL的图形函数，直接使用three.js可更快的开发一个web3D项目。
Web3D又称网络三维，是一种在虚拟现实技术的基础上，将现实世界中有形的物品，通过互联网进行虚拟的三维应用展示，并可互动浏览操作的一种虚拟现实基础。
3Dview框架是基于three.js图形库，实现的3D文件加载，360度浏览、平移、爆炸、刨切、批注、文件树、动画等功能的一个浏览控件。
3Dview的基本架构：
用户 服务器端后台 viewer加载
上传ics、obj等三维渲染模型文件 服务器自动转换为web可加载格式 加载文件，并实现浏览各种功能
three.js学习：
1.三大组建，
场景（scene）、相机（camera）、渲染器（renderer）
关键句：有了这三样东西，我们才能够使用相机讲场景渲染到网页上去。
2、画线条与画平面
如果不报错但没有效果的时候，注意新版本有的地方的方法是写法是不一样的。
比如：
1.THREE.LinePieces 换成 THREE.LineSegments
2.camera.lookAt(0, 0, 0)的写法
这时候可以参考https://threejs.org/docs/#api 参考最新的api文档的定义。
<script src="three.js-dev/build/three.js"></script>
<script>
//渲染器
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
//相机
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.lookAt(0,0,0);
}
//场景
var scene;
function initScene() {
scene = new THREE.Scene();
}
//光
var light;
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
light.position.set(100, 100, 200);
scene.add(light);
}
//立方体
var cube;
//初始化 画线条
// function initObject() {
// //声明一个几何体geometry vertices变量用来存放点
// var geometry = new THREE.Geometry();
// var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
// var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
//
// // 线的材质可以由2点的颜色决定
// // vertor3D表示3D世界的点,点有THREE.Vector3表示，必须被放到THREE.Geometry
// var p1 = new THREE.Vector3( -100, 0, 100 );
// var p2 = new THREE.Vector3( 100, 0, -100 );
// geometry.vertices.push(p1);
// geometry.vertices.push(p2);
// geometry.colors.push( color1, color2 );
// //定义线条
// var line = new THREE.Line( geometry, material, THREE.LineSegments );
// scene.add(line);
// }
//初始化 画平面
function initObject() {
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
for ( var i = 0; i <= 20; i ++ ) {
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );
}
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
</script>
3、让场景动起来：与静态区别加了requestAnimationFrame（animation）函数,传递callback参数。 camera.position.x =camera.position.x +1;相机向右移动
第一种相机动
//物体设置
var mesh;
function initObject() {
var geometry = new THREE.CylinderGeometry( 100,150,400);
var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
}
function animation()
{
//renderer.clear();
camera.position.x =camera.position.x +1;
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
第二种 物体动
function animation()
{
mesh.position.x -=1;
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
4、性能
FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。点击上面的图，就会变成下面的另一个视图。参数0
MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。参数1
关键代码
添加<script src="three.js-dev/examples/js/libs/stats.min.js"></script>
var stats;
在定义渲染器renderer的initThree函数里添加
//性能
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
