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);

  

 

webgl学习总结画线面及场景和物体动的更多相关文章

  1. .NET CAD二次开发学习 对称画线功能

    [CommandMethod("CBline")] //对称画线 public void CBline() { Document doc = Application.Documen ...

  2. GDI+学习之------ 画线、区域填充、写字

    <精通GDI编程>里的代码.在学习过程中对它加以总结,以防以后用到,全部代码都是在MFC 单文档中实现的,写在View::OnDraw(CDC */*pDC*/)中 画线/边框(Pen) ...

  3. MFC画线功能总结

    本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...

  4. WebGL学习(2) - 3D场景

    原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...

  5. WebGl 画线

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. WebGL学习(1) - 三角形

    原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...

  7. MFC消息映射机制以及画线功能实现

    ---此仅供用于学习交流,切勿用于商业用途,转载请注明http://www.cnblogs.com/mxbs/p/6213404.html. 利用VS2010创建一个单文档标准MFC工程,工程名为Dr ...

  8. Unity3d LineRenderer画线

    原地址:http://www.cnblogs.com/88999660/archive/2013/01/21/2869498.html 1.  画多条线 画多条线需要在场景中放置多个GameObjec ...

  9. UE4 射线拾取&三维画线

    虽然有人建议UE4使用C++创建VR项目,能避免一些坑爹的错误,但是我用C++创建,竟然问题更多,还存在创建不了的情况,也不知道是不是我的操作问题,快疯了. 于是我还是选择了蓝图创建VR项目,但是.. ...

随机推荐

  1. [OpenGL]点阵显示生日快乐小程序

    刚工作没多久的时候,业余学习了OGL的知识(这是写不好的借口吧), 在某个异性生日的时候写了这个程序. 编译平台: MinGW GCC gcc -o happOK happyOK.c -lglut32 ...

  2. RPN(区域生成网络)

    转:懒人元(侵删) RPN全称是Region Proposal Network,Region Proposal的中文意思是“区域选取”,也就是“提取候选框”的意思,所以RPN就是用来提取候选框的网络. ...

  3. VTK-py读取与显示相关函数

    在VTK中可视化数据的一般流程如下: 文件输入相关函数: https://www.vtk.org/Wiki/VTK/Examples/Cxx#Input_and_Output Readers ● Re ...

  4. Miners

    Miners 有三种食品,两组矿工.矿工们根据最近三次过来的食品车产煤,产出煤的个数就是新过来的食品车,和前面两辆车中,不同的食品车的个数. 现在你有一个长度为n的食品车序列,请合理分配它们给两组矿工 ...

  5. SpringBoot浏览器直接访问html

    在resources文件夹或与其并列的文件夹下建立public文件夹,在public文件夹下的html文件可以通过浏览器中输入文件+后缀名的方式直接访问的.  一.public文件夹,就相当于在ecl ...

  6. [BZOJ4916]神犇和蒟蒻 杜教筛/Min_25筛

    题目大意: 给定\(n\le 10^9\),求: 1.\(\sum_{i=1}^n\mu(i^2)\) 2.\(\sum_{i=1}^n\varphi(i^2)\) 解释 1.\(\sum_{i=1} ...

  7. linux read和write

    int write(int fd, const void *buf, size_t count); 如果是堵塞fd,则返回值是count,或者是0,-1: 如果是非堵塞fd,则返回值是写入的字节数,或 ...

  8. python编程技巧

  9. bootstrap-table 选择行,并且获得选中行的所有数据内容

    html代码如下: <table id="table" data-toggle="table" th:attr="data-url=@{/vie ...

  10. [JavaScript]instanceof String not behaving as expected in Google Apps Script

    Link: http://stackoverflow.com/questions/11571923/instanceof-string-not-behaving-as-expected-in-goog ...