自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 Web 3D工厂--智慧数字可视化工厂HTML5+WebGL(ThreeJS)烧脑巨作

随着IT信息技术和移动端的发展,Html5+3D(Webgl)技术已经悄然崛起,而3D工厂厂房在数字化的今天,已经被越来越多的公司和企业应用,三维数字工厂模型的应用,加快了工厂厂房,设备,传感器、管道罐体输送、监测控制等各个环节的效率。 对工厂园区的园区、大楼、生产车间、生产设备、监控设备等进...

2019-08-08 18:57:33 9660 13

原创 Web 3D机房,智能数字机房HTML5 WebGL(ThreeJS)匠心打造

在H5使用3D技术门槛比较低了,它的基础是WebGL(ThreeJS),一个OpenGL的浏览器子集,支持大部分主要3D功能接口。目前主流的浏览器都有较好的支持,IE需要11。最近web 3D机房研发告一段落,有时间整理这段时间的一些成果。主要涉及使用H5、js、WebGL技术。 机房3D效果图...

2017-09-05 11:21:19 15251 81

原创 Cesiumjs 高德路径规划

路径分析本人是基于高德来做的,调用百度的大致过程类似,只是修改坐标转换的方法,此处就不放出基于百度的路径分析了; 先说下此功能的思路,由于高德的坐标系是国测局的,而cesium的坐标系是wgs84的,故要对偏差进行处理,处理之后再进行模拟; 这里调用的是驾驶车辆的路径规划,高德支持步行、驾车等多种...

2020-05-09 14:56:37 266 0

原创 flv.js与video.js实现播放视频直播

1.准备 1.下载 nginx(可以任意使用一个web服务器) 2.下载 livego 3.下载 OBS(直播推流直播工具) 4.引用 flv.js 5.引用 video.js ( ̄▽ ̄)/ 以上软件请大家自行解压或安装 2.环境配置 首先运行livego (进入可执行文件文件夹 cm...

2020-01-09 10:33:16 601 0

原创 Web 3D焦化厂-智慧数字焦化厂HTML5+WebGL(Threejs)案例实战

随着IT新技术5G、人工智能、移动互联的发展,虚拟仿真Html5+3D(Webgl)技术已经悄然崛起,而3D工厂在数字化的今天,已经被越来越多的公司和企业应用,三维数字化工厂模型的应用,加快了工厂车间、厂房,设备,传感器、管道罐体运行状态和实时监测控制等各个环节的效率。 对工厂的大楼、生产车...

2019-11-11 15:09:20 3022 2

原创 Web AR--HTML5+WebGL(ThreeJS)增强现实 “我是小妖怪 逍遥又自在”

Web AR增强现实 我是小妖怪 逍遥又自在 更多细节和功能改进后续赘述,感兴趣的可以留言或发邮件1985692469@qq.com,欢迎一起探讨!如果大家想看到什么更多的效果也可以给我留言。时间有限,很多细节没办法写的很详细,请大家包涵。 ...

2019-08-22 10:46:08 1289 1

转载 HTML5 浏览器中打开摄像头

本文是讲述如何在浏览器中打开摄像头,并且实时显示在页面上。想要实现这一功能,需要依赖WebRTC(Web Real-Time Communications) 这一实时通讯技术,它允许浏览器之间视频流和音频流或者其他任意数据的传输,当然其中包含了大量的API和协议,这些在这里都不做介绍,具体的标准还...

2019-08-21 17:49:47 1391 0

原创 Web 3D设备仪表、统计曲线图、柱状图、饼图-基于WebGL/Threejs开发

Threejs实现设备仪表、统计图表 在三维场景中实现设备仪表盘(电压、电流、流量计、压力计等),获取设备实时数据在三维仪表盘中实时显示。同时包括统计曲线图、柱状图、饼图,可对液体流速、流量等进行实时曲线走势,工厂原材料消耗或产品出产量实时图表统计。 功能效果 三维功能展示 ...

2019-08-02 15:55:27 1228 1

原创 Web 3D烟雾火焰喷水粒子效果-WebGL/Threejs技术倾心打造

Threejs实现粒子效果 ThreeJS是一个3D的JS库,封装了WebGL的功能。就是在浏览器端开发3D图形相关的程序的一个库或者说一个标准。实现烟雾、火焰、喷水粒子效果典型“5毛特效”。 烟雾、火焰、喷水功能介绍 更多细节和功能改进后续赘述,感兴趣的可以留言或发邮件19...

2019-07-31 13:45:23 1277 0

原创 Web 3D全景图(全景漫游)-WebGL/Threejs技术倾心打造

全景虚拟漫游 ThreeJS是一个3D的JS库,封装了WebGL的功能。而WebGL(Web Graphic Library)又是什么呢,简而言之,就是在浏览器端开发3D图形相关的程序的一个库或者说一个标准。 功能介绍 可以加载单张和六张的全景图;热点、标注、标注定位、tips显示、svg图...

2019-06-24 17:58:25 3021 2

转载 three.js and cesium

Three.js是一个轻量级的跨浏览器JavaScript库,用于在浏览器中创建和显示动画3D计算机图形。将Cesium的行星级渲染和GIS功能与Three.js广泛而易用的通用3D API相结合,为新的WebGL体验开启了许多可能性。3D JavaScript库现在已经完全成熟并且广为人知,使得...

2019-06-17 15:18:21 1063 1

翻译 基于WebGL/Threejs AI寻路

Threejs 寻路算法,可以帮助AI在你的场景世界里导航。它使用A*和漏斗算法来计算导航网格上的路径。 简介 传统上,游戏和3D应用程序使用路标来帮助它们的人工智能代理导航。这是不好的,有很多问题,但通常比导航网格更容易实现。导航网格要精确得多,速度也要快得多,并且考虑到AI代理的大小(例如...

2019-06-17 15:05:21 1195 0

原创 基于WebGL/Threejs技术的模型剖切(XYZ平面带角度)

更多细节和功能改进后续赘述,感兴趣的可以留言或发邮件1985692469@qq.com,欢迎一起探讨!时间有限请大家包涵。

2019-06-05 11:22:41 1273 1

原创 热力图-基于WebGL/Threejs技术

threejs 实现效果 热力图-基于Threejs/Webgl技术项目实战 【课程介绍】 针对webgl的库threejs框架的热力图功能项目实战详细的讲解,热力图功能在真实项目中应用,主要包括厂区、生产线、机房、库房等实时监控热力分布,建筑或园区人员密集实时监控等综合场景应...

2019-05-20 16:34:37 2612 2

转载 Revit二次开发之代码调试

Revit二次开发第④弹!... 点击上方“万间科技” 可以订阅哦! 在Revit二次开发第三弹的文章中,我们一起学习了构建Revit插件的C#代码内部的细节,理解了什么是类、对象、变量等C#语言基础知识。 今天,我们要一起学习如何使用Visual Studio 对程序的执行进行跟踪和调试。 ...

2019-01-10 16:13:40 496 0

转载 Visual Studio 2013 或VS2015 无法调试Revit插件代码的解决办法

有些开发者在用VS2013 或VS2015调试插件代码时,发现无法跟踪调试。 但是在VS2010,VS2012下没有问题。 一个可能的原因是Revit加载的其它插件的一个兼容性的问题。 VS2013由于引进了新的一些调试功能,导致对旧的一些调试模式不支持了。严格的是说是VS新版带来的问题,微软在以...

2019-01-08 18:15:44 229 0

转载 REVIT 2016二次开发环境的搭建

1.安装REVIT2016软件,这个直接在autodesk上就可以找到,找到直接安装就好了 2.安装VS环境。 3.安装REVIT 2016 SDK 下载地址在http://usa.autodesk.com/adsk/servlet/index?siteID=123112&id...

2019-01-08 17:42:32 1260 0

转载 Threejs ShapeGeometry自定义形状贴图

最近项目需要在3D场景中给自定义的楼层区域进行贴图区分,对于普通的的纯色材质,实现比较简单,但是如果要进行纹理贴图的材质,就有点复杂了,这里写篇文章记录下。 首先看看我们的楼层定义,如何实现自定义区域。其实很简单,我们使用有序的点来定义楼层的平面形状,然后根据平面的定义,自动生成3d的平面区域。...

2018-11-21 14:40:22 5774 1

原创 3D编辑器-web在线编辑基于WebGL/Threejs技术

在线场景编辑器 3D场景在线编辑器,可导出工程、场景、物体或几何体等。 内置多种几何体、光源,场景支持雾效、影子、反光等。 支持导入多种不同格式的3D模型(json、obj、stl、dae等)。 可视化修改场景、相机、几何体、材质、纹理等属性。 应用不同项目场景机房、大楼、园区、设备、器...

2018-11-20 16:02:04 7845 7

转载 向量点乘(内积)和叉乘(外积、向量积)概念及几何意义解读

向量是由n个实数组成的一个n行1列(n*1)或一个1行n列(1*n)的有序数组; 向量的点乘,也叫向量的内积、数量积,对两个向量执行点乘运算,就是对这两个向量对应位一一相乘之后求和的操作,点乘的结果是一个标量。 点乘公式 对于向量a和向量b:                       ...

2018-11-07 17:29:27 38868 0

转载 C++11中智能指针的原理、使用、实现

目录 理解智能指针的原理 智能指针的使用 智能指针的设计和实现 1.智能指针的作用        C++程序设计中使用堆内存是非常频繁的操作,堆内存的申请和释放都由程序员自己管理。程序员自己管理堆内存可以提高了程序的效率,但是整体来说堆内存的管理是麻烦的,C++11中引入了智能...

2018-10-19 16:45:28 192 0

转载 THREE.JS 场景世界坐标和平面二维坐标互转

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     &a...

2018-09-19 14:42:09 1629 0

转载 在Three.js中对mesh使用”z-index” 不遮挡

一次业务需要中,需要让场景中的一部分mesh不受场景遮挡限制,类似于透视穿墙效果,就是能隔着墙看到墙后面的物体,也有点类似于css中对页面元素做z-index的操作,比如下图透视外挂的原理: Three.js 根据THREE.JS文档提示:只需要修改mesh.renderOrder属性 m...

2018-08-23 16:40:15 2889 1

原创 基于WebGL/Threejs技术的测量

模型测量 体积测量 距离测量 面积测量 角度测量 更多细节和功能改进后续赘述,感兴趣的可以留言或发邮件1985692469@qq.com,欢迎一起探讨! 基于WebGL/Threejs技术 模型测量项目实战 【课程介绍】 针对webgl的库threejs框架的模...

2018-08-07 16:04:34 2914 13

转载 【GLSL教程】(九)其他说明

法线矩阵在很多顶点shader中都用到了gl_NormalMatrix。这里将介绍这个矩阵是什么,以及它的作用。大部分计算是在视图空间内完成的,主要原因是光照的运算要放在这个空间内,否则一些依赖观察点坐标的效果,比如镜面反射光就很难实现。所以我们需要将法线变换到视图空间。变换一个顶点到视图空间的方...

2018-07-13 14:53:27 170 0

转载 【GLSL教程】(八)纹理贴图

简单的纹理贴图(Simple Texture)为了在GLSL中应用纹理,我们需要访问每个顶点的纹理坐标。GLSL中提供了一些属性变量,每个纹理单元一个:attribute vec4 gl_MultiTexCoord0;attribute vec4 gl_MultiTexCoord1;attribu...

2018-07-13 14:52:51 1147 0

转载 【GLSL教程】(七)逐像素的光照

逐像素的方向光(Directional Light per Pixel)这一节将把前面的shader代码改为逐像素计算的方向光。我们需要将工作按照两个shader拆分,以确定哪些是需要逐像素操作的。首先看看每个顶点接收到的信息:•法线•半向量•光源方向我们需要将法线变换到视点空间然后归一化。我们还...

2018-07-13 14:52:14 321 0

转载 【GLSL教程】(六)逐顶点的光照

引言在OpenGL中有三种类型的光:方向光(directional)、点光(point)、聚光(spotlight)。本教程将从方向光讲起,首先我们将使用GLSL来模仿OpenGL中的光。我们将向shader中逐渐添加环境光、散射光和高光效果。后面的教程中我们将使用逐像素光照以获得更好的效果。接下...

2018-07-13 14:51:19 242 0

转载 【GLSL教程】(五)卡通着色

引言卡通着色可能是最简单的非真实模式shader。它使用很少的颜色,通常是几种色调(tone),因此不同色调之间是突变的效果。下图显示的就是我们试图达到的效果:茶壶上的色调是通过角度的余弦值选择的,这个角度是指光线和面的法线之间的夹角角度。如果法线和光的夹角比较小,我们使用较亮的色调,随着夹角变大...

2018-07-13 14:50:41 252 0

转载 【GLSL教程】(四)shder的简单示例

GLSL的Hello World这一节中包含一个最基本的shader,它提供如下功能:顶点变换然后使用单一的颜色渲染图元。顶点shader前面已经说过,顶点shader负责完成顶点变换。这里将按照固定功能的方程完成顶点变换。固定功能流水线中一个顶点通过模型视图矩阵以及投影矩阵进行变换,使用如下公式...

2018-07-13 14:49:54 222 0

转载 【GLSL教程】(三)在OpenGL中向shader传递信息

引言一个OpenGL程序可以用多种方式和shader通信。注意这种通信是单向的,因为shader的输出只能是渲染到某些目标,比如颜色和深度缓存。OpenGL的部分状态可以被shader访问,因此程序改变OpenGL某些状态就可以与shader进行通信了。例如一个程序想把光的颜色传给shader,可...

2018-07-13 14:49:00 173 0

转载 【GLSL教程】(二)在OpenGL中使用GLSL

设置GLSL这一节讲述在OpenGL中配置GLSL,假设你已经写好了顶点shader和像素shader。如果你还没有准备好,可以从如下网址获得相关内容:http://www.3dshaders.com/home/http://www.opengl.org/sdk/tools/ShaderDesig...

2018-07-13 14:47:45 251 0

转载 【GLSL教程】(一)图形流水线

这是一些列来自lighthouse3d的GLSL教程,非常适合入门。我将边学习边翻译该教程的内容,同时记录在这里,方便以后查询。流水线概述下图描述了一个简化的图形处理流水线,虽然简略但仍然可以展示着色器编程(shader programming)的一些重要概念。一个固定流水线包括如下功能:顶点变换...

2018-07-13 14:46:19 358 0

原创 基于WebGL/Threejs技术的模型剖切

更多细节和功能改进后续赘述,感兴趣的可以留言或发邮件1985692469@qq.com,欢迎一起探讨!时间有限,很多细节没办法写的很详细,请大家包涵。

2018-06-27 18:37:06 7288 24

原创 基于WebGL/Threejs技术的BIM模型轻量化之图元合并

伴随着互联网的发展,从桌面端走向Web端、移动端必然的趋势。互联网技术的兴起极大地改变了我们的娱乐、生活和生产方式。尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化。随着WebGL标准被广泛接受,出现了许多基于HTML5的开源三维引擎,如threejs、scenejs等。尤其...

2018-06-27 16:08:18 18541 3

转载 在echarts中自定义提示框内容

1、期望效果以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容。如下图,鼠标滑过每个数据项时,第1张是默认提示框;第2张是处理成百分比数据后,显示当前单个数据项的提示框;第3张是处理成百分比数据后,显示当前横坐标下多个数据项的提示框。...

2018-06-14 14:02:23 1177 0

转载 从3dMax导出供threeJS使用的带动作模型与加载(认真修改详尽版)

评论区发现的建议,最近没空测试,先贴这 还有好多人说找不到插件的 https://pan.baidu.com/s/1Q5g0... 密码:b43e 。 应该是他们现在只是维护blender,只有这个的插件,不如改用blender?   在自己做的一个小玩意中,发现要从3dMax中导出js文件...

2018-06-07 14:26:01 5183 2

转载 threejs中矩阵旋转原理

矩阵的概念threejs中的矩阵矩阵的应用用于旋转一个几何体创建一个立方体cube放到场景中;绕向量(1,1,0)旋转30度var axis = new THREE.Vector3(1,1,0); //创建一个三维向量 var rotWorldMatrix = new THREE.Matri...

2018-05-17 18:13:41 1521 1

转载 三维坐标要建一个4*4的矩阵?

怎么平移一个三维空间中的点我们应该怎么平移一个三维空间中的点呢?答案很简单,我们只需要对这个点的坐标中的每个分量(x,y,z)和对应轴上的平移距离相加即可。 例如,点p1(x1,y1,z1)在X轴Y轴以及Z轴上分别平移Δx,Δy,Δz到新的点p2(x2,y2,z2),那么我们只需在坐标对应的分量上...

2018-05-17 11:25:23 4469 0

转载 js前端读写文件的方法(json、excel)

1、前端读取文件的实现关键:利用文件上传对话框预览本地文件、利用FileReader读取文件前端预览本地文件<input tabindex="-1" id="select_range" data-input="false" ...

2018-05-14 15:17:40 8155 0

提示
确定要删除当前文章?
取消 删除