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);
webgl学习总结画线面及场景和物体动的更多相关文章
- .NET CAD二次开发学习 对称画线功能
[CommandMethod("CBline")] //对称画线 public void CBline() { Document doc = Application.Documen ...
- GDI+学习之------ 画线、区域填充、写字
<精通GDI编程>里的代码.在学习过程中对它加以总结,以防以后用到,全部代码都是在MFC 单文档中实现的,写在View::OnDraw(CDC */*pDC*/)中 画线/边框(Pen) ...
- MFC画线功能总结
本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...
- WebGL学习(2) - 3D场景
原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...
- WebGl 画线
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...
- MFC消息映射机制以及画线功能实现
---此仅供用于学习交流,切勿用于商业用途,转载请注明http://www.cnblogs.com/mxbs/p/6213404.html. 利用VS2010创建一个单文档标准MFC工程,工程名为Dr ...
- Unity3d LineRenderer画线
原地址:http://www.cnblogs.com/88999660/archive/2013/01/21/2869498.html 1. 画多条线 画多条线需要在场景中放置多个GameObjec ...
- UE4 射线拾取&三维画线
虽然有人建议UE4使用C++创建VR项目,能避免一些坑爹的错误,但是我用C++创建,竟然问题更多,还存在创建不了的情况,也不知道是不是我的操作问题,快疯了. 于是我还是选择了蓝图创建VR项目,但是.. ...
随机推荐
- vncviewer 命令行使用
一.命令行输入密码登录 /usr/bin/vncviewer 192.168.210.80:3此时弹出输入密码框,输入密码即可登录 二.命令行免输入密码登录 (a) /usr/bin/vncviewe ...
- CentOS6.5上Zabbix3.0的RPM安装【一】-安装并配置Server
一.Environment OS:CentOS6.5 64bit [桌面版安装] Server端:192.168.201.109 ServerName Clinet端:192.168.201.199 ...
- JavaScript(3)——Object-Oriented Design
自己定义函数 var Winston = function(nickname, age, x, y) { this.nickname = nickname; this.age = age + &quo ...
- THINKPHP 框架的模板技术
//echo C('name'); App/Action/IndexAction.class.php文件夹下的 URL模式 //输出URL模式//echo C('URL_MODEL'),'<br ...
- StampedLock原理
原文链接:https://blog.csdn.net/sunhaoning/article/details/68924625 StamppedLock是Java 8中引入的一种新的锁机制.读写锁虽然分 ...
- 勤哲Excel服务器人力资源管理系统
“一个和尚挑水吃,两个和尚抬水吃,三个和尚没水吃!”,这则古老寓言之于现代企业管理而言,相当有意义.在现代企业管理中,类似三个和尚没水吃的管理难题是普遍存在的.如何有效破解?还是得从管理下手,从建立管 ...
- 解决SharePoint密码更新后,创建Web Application 失败
问题在sharepoint central administration中通过Configuration Wizards来创建一个web application,出现如下错误: The passwor ...
- Experimental Educational Round: VolBIT Formulas Blitz J
Description IT City company developing computer games invented a new way to reward its employees. Af ...
- hdu1028 Ignatius and the Princess III(递归、DP)
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- sql server 字符串转table
-- ============================================= -- Author: gengc -- Create date: <2012-12-29> ...