菜鸡饶-优快云博客

原创 Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具

正在开发中

2021-01-06 17:40:30 12093 4

原创 three.js中常用方法

生成文字标签Sprite生成文字标签Sprite// 显示文字贴图canvas配置精灵图配置function addSprite(text, canvaOpts, sprtieOpts) { const { width, height, fontSize } = canvaOpts; // 生成map const canvas = document.create...

2020-04-14 20:47:04 992

原创基于Threejs开发的3D点位编辑器

编辑器可以让用户在3D场景中添加、编辑和删除点位，并且支持上传参考模型、多点位类型的添加、上传、编辑、下载和删除、场景视图中点位的拖拽、场景配置等功能

2023-10-27 15:47:29 1277 3

原创【THREEJS】如何使用THREEJS展示车辆效果

使用threejs展示车辆效果

2022-08-08 16:51:21 1285 2

原创使用blender烘培导入Three.js中

导入模型到blender中给场景打光展uv给需要烘培的物体展uv创建烘培纹理选择物体烘培使用展开uv并且使用烘培纹理导入threejs场景中

2022-03-30 20:00:43 3073

原创 Threejs + shader 实现的一些酷炫的效果

效果预览DEMO地址GIT地址不定期的在shadertoy上抄一些特效到实现在threejs中觉得可以的话请给一个小星星或者一个赞QQ群:1082834010

2021-08-24 14:29:26 4729 3

原创 threejs(webgl)-shader入门教程-粒子入门(2)

回顾1.shader基本使用粒子

2021-06-22 18:39:24 2135 5

原创 threejs-车辆仿真展示(PBR)

效果demo地址带宽优先速度较慢模型地址：车辆模型QQ交流群：1082834010

2021-06-18 10:31:27 1908

原创 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 4384

原创 threejs-实战打造科技风智慧城市效果-持续更新中

创建场景加载模型FBX到场景中效果目前效果：物体渐变、包围线条、扩散波、流动效果持续会添加：扫光、线条扫光、线条物体切换效果、飞线等。需要什么效果可以在下方留言，持续添加效果中github：代码地址喜欢的请点一个starQQ交流群:1082834010...

2021-06-05 16:09:02 14451 22

原创 threejs + 3dmax 烘培模型展示效果

选择一个模型选择了一个模型，在three-editor中展示如下烘培选择一个建模软件来对模型进行烘培，这里我选择了3dmax来进行烘培，也可以使用blender，c4d等软件来进行烘培。模型一共有4个mesh，我使用了vray灯光来对场景进行打光，3dmax中场景渲染的结果我们开始对物体进行烘培选择渲染=》渲染到纹理1、选择需要烘培的mesh2、使用第二uv来存储烘培的uv信息3、进行展开uv选择需要进行的烘培纹理选项，一般选择照明贴图或者完成贴图点击渲染，然后就会得

2021-06-01 11:37:57 3697 3

原创从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 799

原创 Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/W3D/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具 -功能持续开发中

WEB-3D编辑器（持续开发中)目前支持：效果组件联动，物体设置，事件联动、导入导出、引入vuejs模板；待做：场景设置，特效组件，物体效果设置（烘培贴图，特效，shader效果等），视角镜头动画，模型动画，事件与前端联动，前端组件及联动，work，websoket，接入后台；支持2D+3D可视化组件拖入，构建大数据可视化平台，与后台数据进行联动。支持讨论qq：674656681QQ群:1082834010DEMO编辑器加载模型材质修改定制组件拖入定制化组件添加，通过数据拉起城

2021-03-10 21:22:56 6813 12

原创 threejs+shader 雷达扫描效果

效果demo菜鸡互啄QQ群：1082834010（群内有代码）

2021-02-22 10:18:19 1888

原创 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 501 1

原创 three-shader-图片转为粒子场景-demo

图片转为粒子场景解析图片获取图片每个像素，针对像素值建立对应粒子；可以通过内置图片缩放比例，来建立不同像素的粒子图

2021-02-05 13:43:49 539

原创 threejs-shader-平面扩散波-demo

扩散波-demo下载demo边缘透明度渐变来处理锯齿问题。处理前：function diffusion() { const width = 20; const color = "#5588aa"; // 创建box const geometry = new THREE.PlaneBufferGeometry(width, width, 1, 1); const vertexShader = ` varying vec2 vUv; vo

2021-02-02 09:36:40 3288 6

原创 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 5547

原创 THREE shader 多贴图过渡效果

使用shader开发多材质过渡效果在片元着色器中，使用插值计算，计算需要过渡的两张图的颜色插值。qq群：1082834010

2020-07-20 16:49:13 720 2

原创记录在webgl shader中常用方法

获取插值float lerp (float x,float y,float t ) { return ( 1.0 - t ) * x + t * y;}

2020-07-20 16:44:44 626

原创 THREE.JS 加载FBX 不出来问题

记录THREE.JS 加载 FBX 不出来问题在FBXLoader中，FBXTreeParser下buildSkeleton生成model，如果传入的node.attrName 为空，生成失败，循环会阻塞不进行下一步，也不会范围当前Group；原因：在buildSkeleton方法中使用的 THREE.PropertyBinding.sanitizeNodeName 函数来生成的name，sanitizeNodeName 中是使用的正则，如果传入的是undefined，则会失败；...

2020-07-09 09:41:14 6105 3

原创 Three.js 第三人称控制操作控制 -demo

Three.js 第三人称控制操作控制 -demo下载地址demo查看

2020-07-08 17:09:29 2475 2

原创 Three.js 下雨效果-demo

使用THREE.js开发下雨效果-demo创建雨滴数据，用数据驱动雨滴的位置下载连接

2020-07-05 23:28:48 1491

原创 javascript 计算插值(smoothstep )

function smoothstep(x, min, max) { if ( x <= min ) return 0; if ( x >= max ) return 1; x = ( x - min ) / ( max - min ); return x;};// 执行smoothstep(100, 0, 200); // 0.5smoothstep(100, -100, 200); // 0.6666666666666666smoothstep(100,

2020-06-28 16:44:09 1449 1

原创 UE4蓝图时间轴动画

UE4 蓝图补间动画场景：按住2健后 actor 在5秒中内向上移动50；1、拖入键盘事件，以及actor2、获取当前actor的location信息，使用一个变量存储，并且与向上50的向量相加3、拖入一个时间轴，并且双击时间轴进入，点击左上角添加浮点数轨迹，生成所需要的轨迹4、当前location和相加后的location分割后针对Z，使用lerp函数，在0-1获取当前，并且赋予...

2020-05-08 14:39:43 2212

原创 UE4 蓝图物体自动旋转

UE4 蓝图设置物体旋转tick事件使浮点数变量一直增加，添加actor，右键拆分rotation，浮点数赋值。物体一直旋转

2020-05-07 21:02:16 8924

原创 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 5810 4

原创 d3.js pie饼图demo 多层边框环绕文字

d3.js pie饼图demo 多层边框环绕文字

2020-04-24 16:40:42 744

原创 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 2711

原创 THREE + Shader 打造值域值域渲染地球，地球颜色渲染

准备准备好区块的地图，每个国家类似于灰度值（边缘识别，添加线条）这样的区块可以使用图表库直接生成地图，也可以直接预先准备好这样的地图，可以根据当前点击区块高亮通过gpu拾取到当前的颜色r值，或者预先存储好的图片，生成canvas，通过点击地球的UV去识别当前点的颜色R值，然后在自定义着色器中改变R值的颜色值值域渲染多国家同时渲染每次需要执行更新，就重新赋值fragmentShad...

2020-03-31 20:43:41 835

原创 three+shader 使用自定着色器检测边缘，并且描边，使用自定着色器定义色块边缘。

准备检测色块之间的颜色差，识别边缘。素材原始图：能分辨出色块的图 =>检测添加边缘后开始检测色块边缘的shader// 顶const vertexShader = ` varying vec2 vUv; void main () { vUv = uv; vec4 mvPosition = mode...

2020-03-30 12:12:09 1334

原创 Three+Shader 生成3D地球高度地图

通过three.js + shader 生成高度地图使用自定义着色器读取到当前位置信息的颜色值来生成当前高度。准备两张图，一张展示材质，一张生成高度的材质高度是黑白构成的一张图，通过图片的灰度来生成高度。开始生成地球生成地球模型// threejsconst options = { radius: 100, // 地球的半径 segments: 640, // 地...

2020-03-17 00:20:15 2732

原创 chrome中THREE生成canvas标签使用自定义字体

问题在直接load加载字体后，THEEE中使用canvas中添加自定义字体首次无法生效原因load添加字体，为懒加载字体，只有使用时才会去添加到document中；解决加载完毕后document.font.add(font)；在使用生成canvas...

2020-03-12 11:18:29 251

原创 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 1386

原创可视化-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 1800 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 1913 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 1189

原创可视化-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 1801

原创可视化-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 9366 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 5157