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. boostrap 进入条显示百分比

    <div class="progress"> <div class="progress-bar progress-bar-success"  ...

  2. Linux基础学习(二)

    前言: 我们在上一节了解了一下linux的硬件组成,虽然也许对具体的东西还不甚了解,但是我们知道了linux下一切皆文件这一特性 我们装好了CentOS7的虚拟机(这个可以看别人教程来装起来,比较简单 ...

  3. LINQ和Lambda表达式

    前言 前段时间接触了一种新的表达式,但是不知道这个是什么意思,所以就先站在巨人的肩膀用了,现在听师哥说这种写法是Lambda表达式.我一直以为,这个Lambda表达式和LINQ查询有异曲同工之妙,可惜 ...

  4. bzoj 3131 [Sdoi2013]淘金(数位dp)

    题目描述 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块. 一阵风吹过,金子的位置发生了 ...

  5. 析构函数-复制构造函数-赋值操作符重载-默认构造函数<代码解析>

    通过下面primer中的一道习题,可以更深刻的了解,析构函数,复制构造函数,赋值操作符重载,默认构造函数的使用. 但是我的结果与primer习题解答里面的并不相同,可能是编译器不同的原因导致. // ...

  6. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  7. loj#6229. 这是一道简单的数学题 (??反演+杜教筛)

    题目链接 题意:给定\(n\le 10^9\),求:\(F(n)=\sum_{i=1}^n\sum_{j=1}^i\frac{\mathrm{lcm}(i,j)}{\mathrm{gcd}(i,j)} ...

  8. springcloud系列八 整合Hystrix

    feign本身是支持Hystrix的,所以不需要引入其他依赖: 我们可以看看feign这个项目的依赖,就是引入这个依赖的pom.xml 要想看这个很简单,点击那个依赖进去就可以了 点进去就可以看到 & ...

  9. IE浏览器提示对象不支持“append”属性或方法

    如下代码在IE浏览器中无法执行,提示对象不支持“append”属性或方法 var tImg = document.createElement("img"); tImg.setAtt ...

  10. 使用sqlmetal工具自动生成SQL数据库的Linq类文件

    第一部:找到sqlmetal.exe. 运行cmd. 执行命令 cd C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1A\bin\NETFX 4.5 ...