如何用webgl(three.js)搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课 使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课
序又是快两个月没写随笔了，长时间不总结项目，不锻炼文笔，一开篇，多少都会有些生疏，不知道如何开篇，如何写下去。有点江郎才尽，黔驴技穷的感觉。写随笔，通常三步走，第一步，搭建框架，先把你要写的内容框架搭建出来；第二步，添砖，在框架基础上，填写各部分内容；第三步，加瓦，再写好的内容上进行修改，润湿。然后...
初识webgl--我的webgl学习第一课（基于threeJs）
一，我为什么要学习webgl一个偶然的机会，在和朋友的聊天过程中，听说了webgl，也许过去也看到过，但是没有特别在意过。原来，JavaScript也可以很好的渲染并在网页上显示三维动画，不用借助插件，听起来是一个很棒的事情。大学的时候，计算机老师让我们课后学习3Dmax，种种原因，并没有听老师的话...
基于 HTML5 的 WebGL 3D 智能楼宇监控系统
前言智能监控的领域已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减少人员的消耗，监控系统必不可少。之前我写过一篇 2D 的智能地铁监控系统广受好评，突然觉得，既然 2D 的这么受欢迎，那么 3D 的需求量肯定也是非常大的，3D 毕竟比 2D 来说还是更直观一些，于是有了这个例子...
通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天...
基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天...
HT for Web自定义3D模型的WebGL应用
有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很多应用其实并不需要专业的美工使用专业的3...
八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】
HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only achieve extraordinary web animation by using Flash ...
WebGL学习(3) - 3D模型
原文地址：WebGL学习(3) - 3D模型 相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧，首先我就是????。我掌握了足够的webGL技巧后，正准备大展身手时，遇到了一种尴尬的情况：还是做不出想要的东西????。为啥呢，因为没有3D模型可供操作啊，纯粹用代码构建复杂的3D模...
WebGL学习(2) - 3D场景
原文地址：WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习，我们已经掌握了webGL的基础知识，也已经能够画出最基本的图形，比如点，线，三角形，矩形等。有了2D绘图的基础，现在终于可以进入精彩的3D世界了，来看一下这一节要实现的3D的效果吧。实际效果：web...
WebGL+shader实现素描效果渲染
转自：点击打开链接 实现一个这样的渲染效果，主要的步骤包括： 准备模型和场景 通过 WebGL (Three.js) 导入场景 实现 Shader 以表现接近素描的效果 在最重要的第 3 步中，我们要实现的主要有两个效果： 模型边缘的描边 (不同于单纯的线框) 模型表面类似于素描的线条效果 ...
在WebGL中绘制多个2D图像
I've been following a couple of tutorials on html5rocks, and I managed to make a javascript program which displays ONE image on a canvas using webGL. ...
如何使用另一个画布缓冲区数据在WebGL中绘制图像？
I am trying to draw image to webgl canvas from a 2d canvas. 我试图从2D画布上将图像绘制到webgl画布。 If I use: 如果我使用: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,...
从IE6到IE11上运行WebGL 3D遇到的各种坑
这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心，但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题，毕竟作为企业应用，用户的机器运行着各式各样的办公及业务系统，有PB/Delphi之类的老CS应用，有安装...
基于 HTML5 WebGL 的 3D “弹力”布局
分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的...
基于WebGL/Threejs技术的BIM模型轻量化之图元合并
伴随着互联网的发展，从桌面端走向Web端、移动端必然的趋势。互联网技术的兴起极大地改变了我们的娱乐、生活和生产方式。尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化。随着WebGL标准被广泛接受，出现了许多基于HTML5的开源三维引擎，如threejs、scenejs等。尤其t...
WebGL on iOS8 终于等到了这一天
WWDC2014刚结束，这次的大会是名符其实的开发者大会，更贴切的应该说的确是一次软件开发者的大会，对于OSX和iOS的更多功能特性让人兴奋，Swift新语言促成了如上图片但我更感兴趣的是WebGL终于官方的在OSX和iOS上得到了支持，这篇《A first look at what iOS8 me...
快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型
前言3D 场景中的面不只有水平面这一个，空间是由无数个面组成的，所以我们有可能会在任意一个面上放置物体，而空间中的面如何确定呢？我们知道，空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板，从面板中拖动物体到右侧的 3D 场景中，当然，我鼠标拖动到的位置就是物体放置的点，但是这次我们的...
webgl 的空间变换（下）：空间变换
在网上看了很多关于在三维世界中怎么把一个顶点经过一步步变化，最终呈现在我们的屏幕上的。其实很多博客或者书籍已经讲的很清楚了，那为什么我还要特别再写一次博客来阐述自己观点呢？（这里只针对那些学习webgl时，想彻底了解清楚空间过程的同学而言）因为在我一开始对三维不是很懂的情况下，看了很多书和博客，觉得...
webgl巧妙方式写着色器代码
var VSHADER_SOURCE = function(){ /* void main(){ gl_Position = vec4(0.0,0.0,0.0,1.0); gl_PointSize = 10.0; */}.toString().match(/\/...
20个不可思议的 WebGL 示例和演示
WebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。在这篇文章中2...