![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
可视化
文章平均质量分 56
菜鸡饶
webgl开发者
展开
-
threejs(webgl)-shader入门教程(1)
简介shader是什么?shader是一个用GLSL编写的小程序,也就是着色器语言,我们可以通过shader来编写顶点着色器和片元着色器,在WEBGL编程一书中 25-26页有详细说明shader在Three.js中如何使用?threejs提供了关于shader的材质 RawShaderMaterial 和 ShaderMaterial 两种编写shader的材质。RawShaderMaterial:不内置uniforms和attributesShaderMaterial:内置一些需要的参数,原创 2021-06-16 17:50:07 · 4112 阅读 · 0 评论 -
threejs-实战打造科技风智慧城市效果-持续更新中
创建场景加载模型FBX到场景中效果目前效果: 物体渐变、包围线条、扩散波、流动效果持续会添加: 扫光、线条扫光、线条物体切换效果、飞线等。需要什么效果可以在下方留言,持续添加效果中github:代码地址喜欢的请点一个starQQ交流群:1082834010...原创 2021-06-05 16:09:02 · 13083 阅读 · 22 评论 -
从0-1打造大数据可视化编辑器
目标从0到1开发开发编辑器, 快速的开发出2D、3D效果;编辑器DEMO技术栈Vue.js - 3.0Three.js - 126Echarts - 5.0Vue.js - 3.0为什么选择vue.js? vue为MVVM,在开发3D效果中,可把对象绑定到vue上,开发效率更快。Three.js生态较好,扩展性高,一直使用。Echarts - 5.0好看,配置项生成,方便快捷。代码结构srccomponents ui组件surface 拖拽的平面组件e原创 2021-03-16 19:36:05 · 733 阅读 · 0 评论 -
Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/W3D/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具 -功能持续开发中
WEB-3D编辑器(持续开发中)目前支持:效果组件联动,物体设置,事件联动、导入导出、引入vuejs模板;待做:场景设置,特效组件,物体效果设置(烘培贴图, 特效,shader效果等),视角镜头动画,模型动画,事件与前端联动,前端组件及联动,work,websoket,接入后台;支持2D+3D可视化组件拖入,构建大数据可视化平台,与后台数据进行联动。支持讨论qq:674656681QQ群:1082834010DEMO编辑器加载模型材质修改定制组件拖入定制化组件添加,通过数据拉起城原创 2021-03-10 21:22:56 · 6509 阅读 · 12 评论 -
threejs+shader 雷达扫描效果
效果demo菜鸡互啄QQ群:1082834010(群内有代码)原创 2021-02-22 10:18:19 · 1776 阅读 · 0 评论 -
three-解析图片颜色生成使用多实例网格柱状图
解析图片颜色生成柱状图获取图片每像素颜色读取图片生成一张只有图片的canvas,可以设置的缩放比例设置图片的精细度,然后通过canvas的getImageData(0,0, img.width, img.height)的方法来获取整个图片每个像素点的颜色值,获取的颜色为依次排列的数组(r,g,b,a) / 255;2048 * 1024 灰度图通过获取的颜色值来生成柱状图通过获取的数据来生成Box, 因为都是同样的box, 可以通过使用 多实例网格 InstancedMesh 来优化性能;缩原创 2021-02-05 15:38:29 · 449 阅读 · 1 评论 -
Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具
正在开发中原创 2021-01-06 17:40:30 · 11263 阅读 · 4 评论 -
Three.js 模型中增加 波浪 扩散 雷达扫描
在加载模型中增加波浪效果关键方法是材质中的onBeforeCompile方法。用此方法可以直接在threejs原有的材质效果中做出更改,在建模师给出的模型效果中更改样式// obj === 建筑obj.traverse(function(child) { if (child.material) { if (Array.isArray(child.material)) { child.material.forEach((elem) => {原创 2020-11-05 00:18:55 · 5223 阅读 · 0 评论 -
THREE shader 多贴图过渡效果
使用shader开发多材质过渡效果在片元着色器中,使用插值计算,计算需要过渡的两张图的颜色插值。qq群:1082834010原创 2020-07-20 16:49:13 · 644 阅读 · 2 评论 -
Three.js 第三人称控制 操作控制 -demo
Three.js 第三人称控制 操作控制 -demo下载地址demo查看原创 2020-07-08 17:09:29 · 2352 阅读 · 2 评论 -
three.js 多实例渲染 InstancedMesh提升性能
简介官网简介:A special version of Mesh with instanced rendering support. Use InstancedMesh if you have to render a large number of objects with the same geometry and material but with different world tran...原创 2020-04-26 17:59:14 · 5524 阅读 · 3 评论 -
d3.js v4 geojson 生成 svg地图
准备d3 文档 以及 js文件 效果开始地图需要的参数 展示的宽 高 geojson文件数据json数据可以通过阿里地图数据下载const width = 1920;const height = 1080;const geoJson = {};const dom = d3.select('#app');// 投影模式 以及投影的宽高 数据 偏移const projectio...原创 2020-04-14 20:14:16 · 2553 阅读 · 0 评论 -
THREE + Shader 打造值域值域渲染地球,地球颜色渲染
准备准备好区块的地图,每个国家类似于灰度值(边缘识别,添加线条)这样的区块可以使用图表库直接生成地图,也可以直接预先准备好这样的地图,可以根据当前点击区块高亮通过gpu拾取到当前的颜色r值,或者预先存储好的图片,生成canvas,通过点击地球的UV去识别当前点的颜色R值,然后在自定义着色器中改变R值的颜色值值域渲染 多国家同时渲染每次需要执行更新,就重新赋值fragmentShad...原创 2020-03-31 20:43:41 · 768 阅读 · 0 评论 -
three+shader 使用自定着色器检测边缘,并且描边,使用自定着色器定义色块边缘。
准备检测色块之间的颜色差,识别边缘。素材原始图:能分辨出色块的图 =>检测添加边缘后开始检测色块边缘的shader// 顶const vertexShader = ` varying vec2 vUv; void main () { vUv = uv; vec4 mvPosition = mode...原创 2020-03-30 12:12:09 · 1204 阅读 · 0 评论 -
Three+Shader 生成3D地球高度地图
通过three.js + shader 生成高度地图使用自定义着色器读取到当前位置信息的颜色值来生成当前高度。准备两张图,一张展示材质,一张生成高度的材质高度是黑白构成的一张图,通过图片的灰度来生成高度。开始生成地球生成地球模型// threejsconst options = { radius: 100, // 地球的半径 segments: 640, // 地...原创 2020-03-17 00:20:15 · 2493 阅读 · 0 评论 -
d3.js 使用canvas绘制地图
d3.js v4var width = 1000;var height = 800;var projection = d3.geoMercator().fitExtent([ [0, 0], [width, height]], geojson); // 设置经纬度转换var canvas = document.getElementById('map')canvas.wi...原创 2020-03-04 08:59:34 · 1281 阅读 · 0 评论 -
可视化-THREEJS 绘制星空
var skyConfig = { number: 1000,// 星星数量 height: [90, 1000], // 中心店区间 size: 5,// 大小 color: 'rgba(255,255,255,1)'// 颜色}let position = [];let index = [];for (let i = 0; i < skyConfig.number; i...原创 2019-12-20 11:22:23 · 1706 阅读 · 1 评论 -
可视化-THREEJS 飞机航线 姿态计算
飞行姿态var _mat = new THREE.Matrix4();var _qtn = new THREE.Quaternion();_mat.identity().lookAt(new THREE.Vector3(0, 0, 0), /*下一步位置*/, /*当前位置*/)_qtn.setFromRotationMatrix(_mat);obj.quaternion.copy(_...原创 2019-12-16 16:54:51 · 1775 阅读 · 1 评论 -
可视化-three.js波浪线条
function Initialize(opt) { var camera, scene, renderer; var clock = new THREE.Clock(); var Config = { width: 400,// 长度 number: 5,// 条数 u_time: 0,// 时间 yga...原创 2019-12-12 11:37:47 · 1083 阅读 · 0 评论 -
可视化-threejs文字滚动效果
var texture_up; this.planeUp = [] var flyShader = { vertexshader: ` varying vec2 vUv; varying float u_opacity; uniform sampler2D texture; uniform float t...原创 2019-11-28 10:41:16 · 1640 阅读 · 0 评论 -
可视化-three.js 城市 波浪特效 城市 扫光 掠过效果
![](https://img-blog.csdnimg.cn/20191031161557879.gif使用Obj 模型 + shader 实线 模型以及代码加载 obj 格式文件加载到 scene中;使用 ShaderMaterial 材质var Shader = { vertexShader: ` varying vec3 vp; void ...原创 2019-10-31 16:21:53 · 9107 阅读 · 16 评论 -
THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等
THREE.JS 绘制飞线在THREE中如何绘制飞线;使用的是Points+Shader封装的一个飞线方法;可以用于攻击线路,指向效果等;显卡GT730 6000根飞线 帧数在30FPS,可以调节线条的长度 和 间隔 ,增加流畅度飞线Demo git托管比较卡代码地址使用飞线let _Fly = new initFly({ texture: "./xxx.png"//飞线贴图 ...原创 2019-10-22 15:41:24 · 4855 阅读 · 0 评论 -
可视化-three.js绘制3D地球-给地图加载数据
给地图加上点数据如何绘制地图原创 2019-10-15 17:21:12 · 4091 阅读 · 0 评论 -
可视化-three.js给星空加入一个天空盒
给地球添加一个天空盒样式如下var camera, scene, renderer; var clock = new THREE.Clock(); var earth; function init() { camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.inner...原创 2019-10-15 10:26:37 · 2083 阅读 · 0 评论 -
可视化-three.js绘制一个地球
使用THREE.js简单绘制一个地球生成样式如下var camera, scene, renderer;var clock = new THREE.Clock();var earth;function init() { camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight,...原创 2019-10-15 09:59:46 · 3653 阅读 · 1 评论 -
three.js outlinepass 线条渲染
在outlinepass中使用时 渲染一根线条轮廓,其他线条均被渲染;bug原因,在changeVisibilityOfNonSelectedObjects方法法和changeVisibilityOfNonSelectedObjects方法等判断,只判断了是否是MESH类型,应加上THREE.Line;如果渲染Sprite等,也可以加上当前类型;不会更改的可在我的资源下载中查找...原创 2019-07-24 17:51:40 · 5550 阅读 · 0 评论 -
d3v4 折线图
//设置当前图表所需参数const params = { id: "#box", data: [4, 2, 3,2, 5, 6,1], width:500, height:300, xAxis:{ data: ["周1", "周2", "周3", "周4", &原创 2018-08-23 09:40:40 · 901 阅读 · 0 评论