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

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

2017-09-05 11:21:19

阅读数 8402

评论数 55

热力图-基于WebGL/Threejs技术

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

2019-05-20 16:34:37

阅读数 11

评论数 1

Revit二次开发之代码调试

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

2019-01-10 16:13:40

阅读数 127

评论数 0

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

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

2019-01-08 18:15:44

阅读数 98

评论数 0

REVIT 2016二次开发环境的搭建

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

2019-01-08 17:42:32

阅读数 249

评论数 0

Threejs ShapeGeometry自定义形状贴图

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

2018-11-21 14:40:22

阅读数 1346

评论数 1

场景编辑器-基于WebGL/Threejs技术

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

2018-11-20 16:02:04

阅读数 810

评论数 2

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

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

2018-11-07 17:29:27

阅读数 3304

评论数 0

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

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

2018-10-19 16:45:28

阅读数 138

评论数 0

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

<!DOCTYPE html> <html lang="en"> <head>     <meta char...

2018-09-19 14:42:09

阅读数 590

评论数 0

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

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

2018-08-23 16:40:15

阅读数 1028

评论数 0

基于WebGL/Threejs技术的测量

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

2018-08-07 16:04:34

阅读数 655

评论数 4

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

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

2018-07-13 14:53:27

阅读数 117

评论数 0

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

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

2018-07-13 14:52:51

阅读数 619

评论数 0

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

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

2018-07-13 14:52:14

阅读数 121

评论数 0

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

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

2018-07-13 14:51:19

阅读数 158

评论数 0

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

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

2018-07-13 14:50:41

阅读数 100

评论数 0

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

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

2018-07-13 14:49:54

阅读数 129

评论数 0

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

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

2018-07-13 14:49:00

阅读数 96

评论数 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

阅读数 143

评论数 0

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