- 博客(56)
- 收藏
- 关注
原创 three.js3D模型场景编辑器
three.js为浏览器提供了加载和渲染3d模型文件的功能,也提供了很多针对3d模型参数和效果修改的方法如:模型材质贴图,颜色,金属度,粗糙度,缩放,位置,旋转,动画,阴影,灯光,选中效果等。灵活化的添加模型内容,可通过鼠标拖拽的方式来定义模型的大小,缩放,旋转等属性也可以通过输入框手动调整。目前系统支持(.glb,.obj,.gltf,.fbx,.stl,.usdz)格式的模型导入。2.场景内容,位置,大小,缩放,可见性,阴影,模型材质相关内容可视化编辑修改。6.渲染器,场景,地面,天气等动态修改。
2025-03-26 11:01:38
1795
1
原创 最简单易懂的ios p12证书 和描述文件的创建,IPA上传,最完整的ios上架苹果商店教程
1.ios 证书和描述文件创建,ios 上传IPA,ios添加测试设备,ios 上架苹果商店
2022-04-29 17:02:41
8731
1
原创 three.js编辑器
Three.js 3D场景编辑器3.0版本更新,新增视频和着色器功能,支持交互事件与Socket通信。该编辑器基于Three.js+Vue3+Vite技术栈,提供丰富的3D模型、几何体、灯光等场景元素编辑能力,支持多场景保存和属性自定义。新增功能包括:视频纹理自动播放控制、着色器特效(如设备光圈、警告标记等),以及低代码交互逻辑编辑。编辑器支持快捷键操作、模型导入导出,并提供详细文档方便二次开发。项目采用最新技术栈,为3D可视化开发提供高效解决方案。
2025-11-24 17:09:48
412
原创 Three.js编辑器 (低代码)
Three.js 3D场景编辑器3.0版本发布,新增视频和着色器功能,并引入低代码交互事件系统。该编辑器基于three.js+vue3+vite技术栈,提供模型拖拽添加、多场景管理、属性编辑及导入导出功能。新增视频模块通过VideoTexture实现自动播放控制,着色器功能支持数字孪生场景特效。交互事件系统允许为模型添加自定义逻辑,提升低代码开发能力。编辑器支持快捷键操作和多场景保存,配套详细文档便于二次开发。
2025-10-21 11:01:17
721
原创 three.js着色器(ShaderMaterial)实现数字孪生项目中常见的特效
本文介绍了Three.js中ShaderMaterial(着色器材质)的使用,重点讲解了顶点着色器和片元着色器的工作原理,并提供了两个实用案例:警告标记效果和收缩光环效果。警告标记效果通过动态调整着色器参数实现红色警示光圈动画,适用于数字孪生项目中的设备故障提示;收缩光环效果则利用六边形网格函数创建蓝色光晕动画,可应用于智慧机房监测系统等场景。两个案例都演示了如何通过uniforms参数控制动画效果,并给出了完整的代码实现,展示了ShaderMaterial在实现复杂视觉效果方面的强大能力。
2025-09-25 10:50:34
1251
原创 CSS3DRenderer+ CSS3DObject实现在 Three.js 中添加文本内容
给大家分享一下如何通过 CSS3DRenderer+CSS3DObject 实现,在 three.js 场景中添加文本效果
2025-08-20 22:47:08
780
原创 three.js编辑器
three.js编辑器2.0版本发布 本次升级带来多项功能优化与新增模块:1)界面重构为Tab式布局,新增粒子特效(火焰/烟雾/烟花)和Echarts图表功能(5种图表类型);2)支持多模型动画同步播放;3) 修复灯光选中、模型删除等BUG,优化加载速度与场景导出体积;4) 上线项目文档网站,提供使用指南;5) 重构项目目录结构,提升代码可维护性。所有新增功能均支持数据持久化存储,为3D场景编辑提供更丰富的工具链。 在线体验:编辑器 | 文档
2025-07-07 10:33:39
1235
原创 three.js三维场景内容数据存储方案(indexedDB/toJSON/ObjectLoader)
相信大家在使用three.js中开发过基于3D模型数据内容编辑功能时可能会遇到这样一些问题吧。当你辛苦半天将一个模型场景效果如:相机角度,材质贴图,金属度,粗糙度,自发光,灯光,曝光度,色调映色,场景环境光等参数调至最佳后,因为页面关闭或者刷新导致重新进入页面需要重新去编辑调试数据模型场景,又或者需要手动修改代码默认参数值时,这种情况无论是对于开发者和使用者来说都是一个痛苦的过程。基于这个需求背景作者也尝试探索了一下three.js三维场景内容数据的存储方案 ↓。
2025-04-17 09:48:14
712
1
原创 Three.js 实现导出模型文件(.glb,.gltf)功能 GLTFExporter
three.js GLTFExporter 实现场景导出.glb,.gltf模型文件功能 和 模型导出配置参数options解析
2023-09-21 10:18:12
2900
原创 Three.js 实现模型文件加载进度条 和total为0 lengthComputable为false 情况处理
three.js实现模型文件加载进度条功能和total为0 lengthComputable 为false 的情况处理
2023-09-13 17:42:33
1956
3
原创 Three.js开发中遇到的常见问题总结和性能优化
three.js开发过程中的相关问题处理(模型加载不正确无法显示,辉光影响背景图的显示,窗口变化场景像素变的模糊,模型材质修改网格,透明渡,颜色没有效果,材质设置position没有效果)等相关问题解决 已经three.js开发过程中的性能优化处理 模型文件进度条加载 lengthComputable 为false 情况处理
2023-09-04 15:38:27
1991
原创 Three.js实现模型,模型材质可拖拽效果 DragControls
three.js通过DragControls实现模型可拖拽,模型材质可拖拽效果
2023-08-29 11:39:50
2001
4
原创 Three.js 实现模型材质分解,拆分,拆解效果
three.js 实现模型拆解,拆分,分解效果的具体实现方法three.js 修改材质位置不生效问题解决
2023-08-21 10:14:36
2477
原创 Three.js 实现模型材质局部辉光(发光,光晕)效果和解决辉光影响场景背景图显示的问题
three.js 通过UnrealBloomPass ,EffectComposer 实现材质局部辉光(发光,光晕)效果three.js 解决材质辉光效果影响场景背景图和全景图正常显示问题
2023-08-18 22:24:34
4110
原创 Three.js 实现材质边缘通道发光效果
three.js实现模型材质边缘通道发光效果three.js 效果合成器相关API的使用:EffectComposer,FXAAShader,RenderPass,OutlinePass,ShaderPass
2023-08-13 21:05:40
1617
2
原创 Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格
Three.js 如何设置模型材质纹理贴图(TextureLoader)Three.js修改材质颜色(color),材质透明度(opacity),材质网格(wireframe)
2023-08-09 23:33:42
7669
3
原创 Three.js 创建网格辅助线,坐标轴辅助线,模型骨骼辅助线
three.js 网格辅助线(GridHelper),坐标轴辅助线(AxesHelper),模型骨骼辅助线(SkeletonHelper)的使用
2023-08-04 10:51:35
1632
原创 Three.js给场景添加背景颜色,背景图,全景图
three.js 如何添加场景背景颜色(background),背景图片(background),全景图片(environment)
2023-08-04 09:45:42
5574
原创 Three.js环境光,平行光,点光源,聚光灯的创建和灯光辅助线的使用
Three.js中灯光和灯光辅助线AmbientLight,DirectionalLight,DirectionalLightHelper,PointLight,PointLightHelper,SpotLight,TextureLoader,SpotLightHelper,PlaneGeometry 等相关api的使用
2023-07-15 15:07:27
1021
原创 Vue3 jsx 语法中使用 v-slots 插槽 和 component动态组件
vue3 jsx语法中使用 插槽v-slots 和动态组件component 的使用和实现
2023-05-14 21:52:56
4630
原创 Vue3+node.js实现webScoket双向通信
webScoket方法封装vue3.0+webScoket方法封装node.js+webScoket 方法封装
2023-02-08 22:53:50
2415
1
原创 uni-app 华为离线推送 Assist_HW: get hms token failed:6003: certificate fingerprint error
Assist_HW: get hms token failed:6003: certificate fingerprint erroruni-app 华为离线推送 6003错误码
2022-05-18 18:00:20
3050
4
原创 vue vscode代码格式化插件配置
扩展商店搜索Vetur选择扩展此设置加入 "vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 300, // No line exceeds 300 characters "singleQuote": false // Prefer double quotes over single quotes } }格式化之前
2021-12-14 18:51:56
8033
5
原创 and-design-vue modal组件 设置可拖拽
modal 弹框通过vue 自定义指令来操作modal弹框的top ,left来实现定义指令名称为 drag-modal ,在main.js中全局定义/*定义a-modal弹框可拖拽*/Vue.directive('drag-modal', (el, bindings, vnode) => { Vue.nextTick(() => { let { visible, destroyOnClose } = vnode.componentInstance
2021-08-09 15:32:02
2210
原创 基于Vue3+Ant-Design-Vue2.0+node.js+express+mongoose 的后台管理系统
推荐一个vue3语法开发的后台管理系统前端:vue3+Ant-Design-Vue2.0https://gitee.com/ZHANG_6666/crm-template服务端:node.js+express +mongoosehttps://gitee.com/ZHANG_6666/express–vue3–ant-design2
2021-07-22 14:43:35
419
1
原创 vue3 addRoute 动态路由 页面刷新后 路由失效 [Vue Router warn]: No match found for location with path
vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter动态路由一般是从后端获取 然后经过数据格式处理但在页面刷新后会出现一下警告:vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/formlist/stepform/other”但通过getRouters又能够获取到所有的异步路由分析:页面刷新后由于是异步获取的原
2021-05-12 18:02:07
45848
50
原创 使用ant-design-vue在IE11中使用input-number开发环境正常,打包后不生效
input-number场景:windows 自带的IE11浏览器中给input-number 设置默认值 开发环境正常 打包后无效解决:添加组件方法 step <a-input-number step="1" v-model="form.priceRate" style="width: 290px" /> ...
2021-04-12 18:00:02
650
2
原创 javascript 一些常用的正则表达式(手机号码,邮箱,整数,身份证号码,车牌号,中文,只能是字母或者数字)
1.手机号码格式验证function mobile(value) { return /^1[23456789]\d{9}$/.test(value)}2.验证电子邮箱格式function email(value) { return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);}3.验证URL格式function url(value) { return /
2021-02-01 09:40:15
1149
4
原创 vue 控制表格列的数量组件
基于Ant-Design-Vue 封装一个可拖拽控制table 列数量的组件前置准备:1.安装 Ant-Design-Vue https://www.antdv.com/docs/vue/use-with-vue-cli-cn/yarn add ant-design-vue 或者 npm install ant-design-vue2.安装 vue-smooth-dnd vuedraggableyarn add vuedraggable yarn add vue-smooth-dnd..
2021-01-09 11:37:25
1077
原创 一些不常用的css代码
css中不常用的代码1.all 属性用于重置所有属性,除了 unicode-bidi 和 directiondiv { background-color: yellow; color: red; all: initial;}语法:all: initial|inherit|unset;值说明initial修改所有元素属性或父元素的值为其初始化值inherit修改所有元素属性或父元素的值为其父元素的值unset修改所有元素属性或父元
2020-12-29 11:53:20
362
2
原创 Vue 脚手架中使用 render 函数
Vue的官方介绍大致意思就是说 在render 函数中 通过 createElement 来创建Vnode 的虚拟 dom(Vue的核心思想虚拟dom)在脚手架中的使用<script>export default { name: "renderDemo", data() { return {}; }, methods: {}, created() {}, render(createElement) { return createElement("
2020-11-11 18:09:13
760
原创 VUE封装一个电商倒计时插件
VUE封装一个电商倒计时插件在components文件夹下新建文件2.代码如下<template> <span> 距离活动结束还剩:{{ lastTime | format }} </span></template><script>function fixedZero(val) { return val * 1 < 10 ? `0${val}` : val}export default { name: '
2020-10-08 20:38:19
491
原创 实用的JavaScript代码片段
分享一篇实用的JavaScript代码片段,帮助你快速完成开发任务maxItemOfArray1.这一函数可以返回一个数组的最大值。 const maxItemOfArray = (arr)=>[...arr].sort((a,b)=>b-a).slice(0,1)[0] let maxItem = maxItemOfArray([0,23,23,23,4,5,2])areAllEqua2.这段代码可以检查数组的所有项是否相等。const areAllEqua = arr=>
2020-09-05 15:04:02
307
原创 Ant Design Pro Vue 打包后本地无法预览
关于Ant-Design-Pro-Vue项目打包后无法预览问题打包后的dist文件夹打开index.html一直处于加载状态由于官方没有明确说明打包后的配置和部署,对于初学者来说以为打开index.html就可以预览了预览打包后的项目则需要部署在服务端但是一般服务端都是由后端负责的,当然前端也可以本地搭建一个服务端基于node.js+express 搭建的本地服务具体可以参考 文章https://blog.youkuaiyun.com/weixin_43835425/article/details/
2020-08-23 22:51:51
1929
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅