webgl
niuge No.1
这个作者很懒,什么都没留下…
展开
-
webgl的shader系列(7)——贴图和法线贴图
纹理映射需要顶点着色器和片元着色器的结合;首先在顶点着色器中把uv坐标传到片元着色器中,然后在片元着色器中根据每个片元的纹理坐标从纹理图像中抽取纹理的颜色。 const VSHADER=` varying vec2 v_uv; void main(){ gl_Position = projectionMatrix * modelViewMatrix * vec4( po原创 2020-10-17 16:26:24 · 633 阅读 · 1 评论 -
webgl的shader系列(6)——phong光照模型和blinphong光照模型
比较好的一篇理解phong光照模型的文章const VSHADER=` varying vec3 v_Normal; varying vec3 v_position; void main(){ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );原创 2020-10-11 16:50:43 · 1273 阅读 · 0 评论 -
webgl的shader系列(4)——(利用Three.js)顶点着色器与片元着色器中计算的区别
首先看一下光照颜色在顶点着色器中的效果:1、颜色计算放在顶点着色器中const VSHADER=` uniform vec3 u_LightColor; uniform vec3 u_LightDirction; uniform vec3 u_AmbientLight; uniform vec3 u_Color; varying vec4 v_Color; void main(){原创 2020-10-08 19:46:59 · 1135 阅读 · 0 评论 -
webgl的shader系列(3)——mvp矩阵
mvp矩阵实际上就是:<投影矩阵>x<视图矩阵>x<模型矩阵>x<顶点坐标><canvas id="webgl" width="800px" height="600px"></canvas> <script> //vertex shader var VSHADER_SOURCE = ` attribute vec4 a_Position; .原创 2020-10-07 20:13:50 · 911 阅读 · 0 评论 -
webg的shader系列(2)——三角形、webgl2
1、画一个简单的三角形接着上节,只需要修改下面这行代码即可。webgl.drawArrays(webgl.TRIANGLES,0,3)最终代码 <canvas id="container" width="800px" height="600px"></canvas> <script> const canvas=document.getElementById('container') var VSHADER=原创 2020-10-07 15:52:52 · 529 阅读 · 0 评论 -
webgl入门系列(1)——画点
1、将画点写在顶点着色器里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点</title> <script src="base.js"><原创 2020-10-07 12:25:54 · 419 阅读 · 0 评论 -
webgl展示Revit模型——漫游
漫游的模拟借鉴:在《Three.js开发指南》里使用摄像机那一部分介绍怎么漫游。另外可以分别参考 example 下的 “misc_fps.html” 和 “misc_controls_fly.html”。但是,对于在webgl中展示Revit项目,还是有很多注意事项,比如你需要仅在一个平面移动,另外向上旋转要去掉,这个时候就需要重新写漫游的帮助类。qq技术交流:254033230...原创 2018-12-18 18:30:16 · 1927 阅读 · 0 评论 -
Webgl展示Revit模型——保存视点
这篇博客介绍了怎么保存视点https://www.cnblogs.com/aleafo/p/3568445.html但是实际上并没有那么复杂,你只需要提取两个参数就可以还原视点:camera的position和camera的方向。然后controls的位置及taget和camera保持一致即可。qq技术交流:254033230...原创 2018-12-18 18:22:48 · 1106 阅读 · 0 评论 -
Webgl展示Revit模型——剖切
three.js的剖切实例:https://threejs.org/examples/?q=clip#webgl_clipping_intersectionhttps://threejs.org/examples/?q=clip#webgl_clipping_advancedhttps://threejs.org/examples/?q=clip#webgl_clipping从上面...原创 2018-12-18 18:12:15 · 2473 阅读 · 0 评论 -
几种Revit轻量化结果的对比
Revit轻量化,其实就是把Revit数据提取出来,然后在浏览器或者其他平台中重现出来。这里主要以转成Three.js作为对比。本文主要以样例中的Technical_school-current_m.rvt(大小15.1m,压缩rar后大小:13.9m)作为样例,:1.把Revit中每个面作为一个Three.js里的一个mesh转出来的json结果(大小28.9m,压缩rar后大小...原创 2018-12-23 23:37:38 · 13729 阅读 · 9 评论 -
React开发Three.js项目踩的一些坑
1.React安装jquery,axioshttps://blog.csdn.net/qq_41994549/article/details/80276410axios就好安装了,经典的npm安装方法即可。2.React里用jquery和axios读取json这个折腾了几个小时,最后是json文件要放在public文件夹里才行,当然深一点的路径也可以。3.Three.js的...原创 2018-12-24 18:21:20 · 2642 阅读 · 2 评论 -
Threejs大场景优化的资料
https://stackoverflow.com/questions/47807069/three-js-loading-big-obj-file-about-300-mb-will-crash-the-browser-and-take-m 尽可能减少多重计数。请记住,模型根本不应该过于详细。 将Obj文件转换为Json和/或为场景中的每个对象创建单独的JSON文件。请记住,ge...原创 2019-01-13 09:32:04 · 2326 阅读 · 1 评论 -
three.js 中的矩阵变换及两种旋转表达方式(转)
转自:https://www.cnblogs.com/chenjy1225/p/9640580.html本篇简单介绍three.js中矩阵变换及两种旋转表达方式。矩阵变换three.js使用矩阵来保存Object3D的变换信息。矩阵变换的基础平移变换比例变换旋转变换(x,y,z,1) 绕x轴旋转(x,y,z,1) 绕y轴旋转(x,y,z,1) 绕z...转载 2019-01-16 11:42:24 · 2183 阅读 · 0 评论 -
Threejs利用矩阵进行镜像
由于在Threejs中没有镜像的api,要想获得镜像,就需要自己去写方法。首先看看镜像的原理:https://blog.csdn.net/rabbitguiming/article/details/3963213然后根据原理写方法,这里需要用到applyMatrix这个api,另外有一点比较奇怪的是,如果我不用translateZ这个api,前面的赋值就没用,不清楚究竟是什么原理。下面...原创 2019-02-08 23:01:45 · 2417 阅读 · 1 评论 -
Webgl展示Revit模型(带贴图)
Webgl展示的Revit模型如何带贴图?1、首先需要把Revit中每个面的材质的贴图路径找出来;2、需要在Threejs中还原出来,其中最重要的是UV计算的方法;3、因为在Revit中很多材质是材质库,所以最好在服务端放置材质图片。...原创 2019-02-26 18:05:32 · 3116 阅读 · 0 评论 -
threejs里Object3D(mesh,camera,group等)的事件应用
threejs里继承了Object3D的类都可以加载事件。这些类包含mesh,camera,group等等。如下://给相机添加事件camera.addEventListener("onCameraChange",this._onCameraChange); // 相机变化事件_onCameraChange:function(){ dosomething()...原创 2019-04-19 09:10:07 · 6134 阅读 · 0 评论 -
threejs通过相机获取视锥
// 通过camera计算出视锥 computeFrustumFromCamera:function(camera) { var frustum = new THREE.Frustum(); frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( camera.project...原创 2019-04-19 09:11:48 · 2617 阅读 · 1 评论 -
React搭建Three.js的项目
最重要的一点,发现居然有智能提示,强烈推荐这种编程方法。。。。(吐血推荐)1.用npm加载three.jsnpm install --save three或者淘宝镜像:cnpm install --save three(推荐第二种,需要装淘宝npm镜像)2.网上有提到不能用example的js文件,下面链接有提到解决方法(未测试)https://github.com/mrdoob/...原创 2018-12-23 16:41:15 · 8757 阅读 · 1 评论 -
Three.js每个面设置不同的颜色、每个面设置不同的材质
1.每个面设置不同的颜色 let geometry = new THREE.BoxGeometry( 1000, 1000, 1000); for(let i = 0;i<geometry.faces.length;i++){ let hex = Math.random() * 0xffffff; ...原创 2018-12-22 12:18:09 · 12018 阅读 · 0 评论 -
Webgl学习日志(三)——贴图、旋转、移动
还是先放代码。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Three框架</title> <script src="js/three.js"></script&a原创 2018-04-09 00:07:27 · 603 阅读 · 0 评论 -
Webgl学习日志(四)——Three.js开发指南1(创建sence,转动,GUIJ界面交互)
毕业之后就习惯了买正版书,两年多的时间估计买了四五千元的书了吧。书中自有黄金屋还是有道理的,不过现代社会,这个书是指海量的书。《Three.js开发指南》这本书晚上刚到货,大概的翻了三分之一,感觉没什么难度,因为之前有Unity3D和Revit二次开发的基础,另外也学了些Opengl,这部分看一眼就明白是怎么回事。所以图形图像学才是这类软件的基础。现阶段只求知识的量,并未求质,博客也一样,都没有什...原创 2018-04-09 23:09:42 · 506 阅读 · 0 评论 -
Webgl学习日志(五)——Three.js 使用JSON格式保存和加载整个场景,并解读JSON数据
具体实例可以看这篇博客:https://blog.csdn.net/qq_30100043/article/details/79604757操作简单,但最主要的还是要实现更多的功能,最好能用在更多的3D模型上,比如我用的多的Revit,最好能够先把Revit模型转化为JSON格式的数据,然后在Webgl上读取JSON数据。首先上篇博客出现的几个问题:1、怎么查看生成的JSON数据:2、在chrom...原创 2018-04-10 23:24:35 · 3698 阅读 · 0 评论 -
Webgl学习日志(六)——高级几何体(ConvexGeometry)
在高级几何体中的THREE.ConvexGeometry(points)是一个很有用的函数。他可以把随机的点连起来做成一个封闭的几何体。先看效果:然后看代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Three框架</title>原创 2018-04-12 15:59:37 · 1147 阅读 · 0 评论 -
Webgl学习日志(二)——利用Three.js库、stats.js库、Tween.js库建各种常规模型
开源加速了技术的发展,也让我们这些搞技术的人牺牲了大量的时间来更新新的技能。Webgl算是比较新的东西了,他本身的库相当繁琐,你写一个三角形的面,或者一个立方体,都能把人搞疯。好在很多大牛写了很多方便实用的库。Three.js库用的比较多,里面有几何,有渲染等等很多实用的库,下载地址:https://github.com/mrdoob/three.jsstats.js库用来监测程序性能,下载地址:...原创 2018-04-06 23:49:09 · 2077 阅读 · 0 评论 -
怎样用webgl显示Revit模型
探索了一阵子,发现这个完全可以实现,模型带几何信息,带材质信息。目前还是有点缺陷,比如官方的这个例子中地形、和树木没显示出来,显示效果一般般。实现方法是通过插件把revit模型数据转成中间数据,然后webgl读取中间数据,然后重新生成最终的模型。目前还不支持直接读取rvt模型。前者可以修改代码,后者可以通过写shader来解决。结果如下图: 对Revit二次开发和Dyanmo编...原创 2018-04-22 23:39:43 · 15888 阅读 · 1 评论 -
webgl进阶Shader篇(基于Three.js)——第一个简单的Shader
Three.js已经简化了很多写shader的工作,最主要的工作就是他把一些常用的矩阵已经作为一个常量提供给我们。 首先来看Three.js官网的说明,一些常用参数已经和几何元素、相机等关联在一起,我们只需要拿来用即可。 来看第一个shader,通过shader改变几何体表面的颜色,效果还是很炫酷的。<!DOCTYPE html><html><...原创 2018-05-05 15:37:38 · 16581 阅读 · 4 评论 -
webgl学习日志(七)——贴图的各种问题收集
贴图倒是比较简单,实践过程中碰到这么几个问题:1.凹凸贴图怎么做?a.带颜色的 图片 你在PS里面 ctrl+shift+u 快捷键去色 取它的灰阶。b.用PhotoShop制作凹凸贴图。2.法线贴图怎么做?怎样用 PS 制作法线贴图_百度经验3.怎么制作六面贴图不一样的六面体var materials = [];for (var i = 0; i < 6; ++i) { mate...原创 2018-05-05 17:27:38 · 760 阅读 · 0 评论 -
webgl学习日志(八)——凹凸贴图材质与模型拖拽
加载凹凸贴图材质加载代码://创建凹凸贴图材质 function createMesh(geom,imageFile,bump) { var texture = THREE.ImageUtils.loadTexture("../Textures/" + imageFile); var mat = new THREE.M...原创 2018-05-05 23:17:07 · 997 阅读 · 0 评论 -
webgl基于Three.js的开发——点选几何图形并读取几何信息
首先第一步:创建四个几何图形。//几何物体 function initObject() { var geometry = new THREE.CylinderGeometry(100, 100, 100); mesh = createMesh(geometry, "brick.jpg", "brickbump.jpg"); ...原创 2018-06-29 18:05:07 · 984 阅读 · 0 评论 -
webgl给予Three.js的开发——删除或隐藏构件
其实隐藏构件很简单,最主要的是选择构件。具体见上一篇博客:https://blog.csdn.net/niuge8905/article/details/80850547我们添加构件都是用sence.add(object)来添加,同样的道理,删除的话,我们直接用remove就好。raycaster.setFromCamera(mouse, camera); // calc...原创 2018-06-29 18:18:47 · 3191 阅读 · 0 评论 -
webgl中添加一个div框实现框选
在webgl的开发中,添加一个div,可以实现框选的样式。过程很简单,直接看代码吧,这里主要实现了点击第一次的时候确定div的位置,第二次实时显示div的大小及样式。这里为了显示实在canvas上画div,将canvas设置为红色。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR...原创 2018-07-01 23:42:41 · 1212 阅读 · 1 评论 -
Webgl基于Three.js的开发——利用Frustum来判断相交或者包含
首先来看一下Frustum的文档:Frustum帮助文档根据文档创建一个Frustum:function initFrustum() { //定义锥形物体最远的四个点 var topLeftPoint = new THREE.Vector3(-2000,2000,-1000); var topRightPoin...原创 2018-07-03 15:15:17 · 3484 阅读 · 0 评论 -
Webgl显示Revit模型(二)——利用Three.js优化显示效果
Webgl显示Revit模型(一)请见:https://blog.csdn.net/niuge8905/article/details/80044802Three.js已经算是开发webgl最常用的开源库了。Autodesk团队开源了一个va3c来在web端显示revit,但是这个更新很慢,而且效果差,所以我用Three.js来做了一个优化显示效果。具体源码及步骤:http://c...原创 2018-11-01 21:59:03 · 14206 阅读 · 2 评论 -
threejs- z-fighting 问题(模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题)(转)
文章来自:https://www.cnblogs.com/lst619247/p/9098845.htmlthreejs- z-fighting 问题(模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题)Z-Buffer在threejs中,使用深度缓冲(Z-Buffer)来完成场景可见性计算,即确定场景哪部分可见,哪部分不可见。深度缓冲(Z-Buffer)是一个二维数组,其...转载 2018-12-09 01:39:21 · 2837 阅读 · 3 评论 -
Three.js 保存camera(视角)设置到数据库,包括场景的缩放、旋转、移动等(转)
原文:https://www.cnblogs.com/aleafo/p/3568445.html最近在做的项目中遇到需要保存当前的3d管道视角设置的问题,用户希望在对3d场景内的管道进行了缩放、旋转、移动之后可以将场景当前的视角状态保存在数据库中,并在下次加载时读取。 经过不断的尝试和研究,在同事的帮助下总算完成,下面说一下注意事项并附上实现代码。首先,经过测试保存视角取决于两个部分,一个...转载 2018-12-14 18:05:25 · 1594 阅读 · 0 评论 -
Three.js添加标签、取得面与鼠标交点、画线、小地图(转)
1.Three.js添加标签https://threejs.org/examples/?q=label#css2d_label2.取得面与鼠标交点、画线https://blog.csdn.net/ithanmang/article/details/816259963.小地图https://threejs.org/examples/?q=line#webgl_lines_fat_...转载 2018-12-27 16:48:40 · 5123 阅读 · 1 评论 -
webgl学习日志(1)——创建几何图形
webgl入门也挺麻烦的,需要了解JavaScript脚本编辑语言,需要会Html,需要懂点Opengl,还要有懂些计算机图形学的知识。做得精还需要会编写shader。当然,这些都可以慢慢学,而且webgl看似难入门,其实把它各个部分割裂开,也挺简单的。当然,JavaScript和Html知识是必备的技能。编辑器还是选择强大的visual studio。然后创建TypeScript的Html项目。...原创 2018-03-11 13:19:03 · 1136 阅读 · 0 评论