javascript
文章平均质量分 57
菜鸡饶
webgl开发者
展开
-
threejs-实战打造科技风智慧城市效果-持续更新中
创建场景加载模型FBX到场景中效果目前效果: 物体渐变、包围线条、扩散波、流动效果持续会添加: 扫光、线条扫光、线条物体切换效果、飞线等。需要什么效果可以在下方留言,持续添加效果中github:代码地址喜欢的请点一个starQQ交流群:1082834010...原创 2021-06-05 16:09:02 · 13541 阅读 · 22 评论 -
threejs + 3dmax 烘培模型展示效果
选择一个模型选择了一个模型,在three-editor中展示如下烘培选择一个建模软件来对模型进行烘培,这里我选择了3dmax来进行烘培,也可以使用blender,c4d等软件来进行烘培。模型一共有4个mesh,我使用了vray灯光来对场景进行打光,3dmax中场景渲染的结果我们开始对物体进行烘培选择渲染=》渲染到纹理1、选择需要烘培的mesh2、使用第二uv来存储烘培的uv信息3、进行展开uv选择需要进行的烘培纹理选项,一般选择照明贴图或者完成贴图点击渲染,然后就会得原创 2021-06-01 11:37:57 · 3425 阅读 · 3 评论 -
threejs+shader 雷达扫描效果
效果demo菜鸡互啄QQ群:1082834010(群内有代码)原创 2021-02-22 10:18:19 · 1829 阅读 · 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 · 465 阅读 · 1 评论 -
Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具
正在开发中原创 2021-01-06 17:40:30 · 11620 阅读 · 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 · 5329 阅读 · 0 评论 -
THREE shader 多贴图过渡效果
使用shader开发多材质过渡效果在片元着色器中,使用插值计算,计算需要过渡的两张图的颜色插值。qq群:1082834010原创 2020-07-20 16:49:13 · 678 阅读 · 2 评论 -
记录在webgl shader中常用方法
获取插值float lerp (float x,float y,float t ) { return ( 1.0 - t ) * x + t * y;}原创 2020-07-20 16:44:44 · 588 阅读 · 0 评论 -
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 · 1355 阅读 · 1 评论