幽幽谷

原创 图片作为Canvas贴图时要等图片加载完才可以读取canvas

图片作为Canvas贴图时要等图片加载完才可以读取canvas

原创 Sprite标签(Canvas作为贴图)批量标注设备模型

在three.js中Sprite标签(Canvas作为贴图)批量标注设备模型

原创 Sprite标签(Canvas作为贴图)标注设备模型

Sprite标签(Canvas作为贴图)来标注模型

原创 封装一个精灵标签函数，批量标注多个设备状态

一、效果二、第一步三、第二步

原创 公安大数据监控平台

前端HTML+JS+CSS+Echarts公安大数据监控可视化平台前端整套模板，用于可视化系统的快速创建，下载即可使用，适用于赶工项目或者前端初学者，用于公安大数据监控系统的开发或者可视化系统。

原创 大数据可视化页面设计

前端HTML+JS+CSS+Echarts大数据可视化平台前端整套模板，用于可视化系统的快速创建，下载即可使用，适用于赶工项目或者前端初学者，用于可视化系统开发。

原创 医院大数据展示模板

前端HTML+JS+CSS+Echarts前端整套模板，用于可视化系统的快速创建，下载即可使用，适用于赶工项目或者前端初学者。

原创 智能看板数据中心可视化大屏

前端HTML+JS+CSS+Echarts智能看板数据中心可视化大屏前端整套模板，用于可视化系统的快速创建，下载即可使用，适用于赶工项目或者前端初学者，用于统可视化系统。

原创 模型批量标注多个标签

模型批量标注多个标签，案例应用

原创 精灵模型标签标注设备

精灵模型标签标注设备

原创 CSS3精灵模型

原创 单击关闭按钮关闭模型弹出来的详细信息窗口

three.js中点模型弹层的关闭

原创 鼠标选中模型弹出详情标签

const obj = model.getObjectByName(intersects[0].object.ancestors.name + '标注');//递归遍历chooseObj，并给chooseObj的所有子孙后代设置一个ancestors属性指向自己。// 可以给待选对象的所有子孙后代Mesh，设置一个祖先属性ancestors,值指向祖先(待选对象)// const cunchu = model.getObjectByName('存储罐');// 射线拾取模型对象(包含多个Mesh)

原创 给外部模型标注详细内容

工号</span><span。">异常</span>-- 名称、存储量、设备状态、等信息叠加到背景图上即可 -->-- 图片绝对定位100%填充父元素，作为标签的背景 --><span>设备A

原创 给外部模型添加标注

div id="tag">存储设备</div>

原创 加载外部模型glb/gltf文件(模型加载全流程)

loader.load("../models/鸭子.glb", function (gltf) { //gltf加载成功后返回一个对象。//创建一个GLTF加载器。//三维场景添加到model组对象中。// console.log('场景3D模型数据', gltf.scene);// console.log('控制台查看gltf对象结构', gltf);// 引入gltf模型加载库GLTFLoader.js。// 引入Three.js。

原创 模型隐藏或显示

/ 如果多个模型引用了同一个材质，如果该材质`.visible`设置为false，意味着隐藏绑定该材质的所有模型。// 隐藏一个网格模型，visible的默认值是true。// 隐藏一个包含多个模型的组对象group。// material.visible可以控制是否隐藏该材质对应的模型对象。//把mesh1型插入到组group中，mesh1作为group的子对象。//把mesh2型插入到组group中，mesh2作为group的子对象。

原创 递归遍历模型树结构、查询模型节点

if (obj.isMesh) {//判断条件也可以是obj.type === 'Mesh'//所有高层楼的父对象。// obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'const mesh = model.getObjectByName('2号楼');console.log('所有模型节点的名称',obj.name);// .getObjectByName()根据名字选择模型节点。mesh.name = i + 1 + '号楼';mesh.name = i + 6 + '号楼';

原创 canvas画布宽高度随鼠标拖动窗口变化而动态变化

/ 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵。// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix。// 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)// 全屏情况下：设置观察范围长宽比aspect为窗口宽高比。// onresize 事件会在窗口被调整大小时发生。// 重置渲染器输出画布canvas尺寸。

原创 Canvas画布全屏

/相机在Three.js三维坐标系中的位置。// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面。//窗口文档显示区的高度作为画布高度。//窗口文档显示区的宽度作为画布宽度。//相机观察目标指向Three.js坐标系原点。// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)

原创 渲染循环实现旋转动画

/请求再次执行渲染函数render，渲染下一帧。//每次绕y轴旋转0.01弧度。

原创 引入相机控件轨道控制器OrbitControls拖拽物体

/ 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景。// 浏览器控制台查看相机位置变化。//监听鼠标、键盘事件。

原创 在三维场景中加入光照

/偏移光源位置，观察渲染效果变化。//点光源放在x轴上。// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算。//光源光照强度不随距离改变衰减。// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0。//点光源添加到场景中。//2.0环境光:没有特定方向，整体改变场景的光照明暗。

原创 在场景中添加相机在html标签中渲染出3d图

/网格模型对象Mesh。color: 0x0000ff, //设置材质颜色。//网格模型添加到场景中。//设置网格模型在三维空间中的位置坐标，默认是坐标原点。//创建一个长方体几何对象Geometry。* 创建3D场景对象Scene。//材质对象Material。// 引入three.js。

原创 第一个3D案例—创建3D场景

/网格模型对象Mesh。备注：此时还没有图像渲染出来，要加入相机和光照才能渲染出来3D图。//3.0设置网格模型在三维空间中的位置坐标，默认是坐标原点。//网格模型添加到场景中。color: 0x0000ff, //设置材质颜色。//1.0创建一个长方体几何对象Geometry。//2.0材质对象Material。* 创建3D场景对象Scene。// 引入three.js。

原创 golang遍历数组

原创 golang遍历字符串

原创 interface{} 接口类型

golang中类型为[]interface{}的定义与解释

原创 智慧小区数字孪生系统

基于三维模型的数字孪生系统，运行就可以直接使用，用于学习研究或者项目中。项目技术栈 Vuejs three.js Element-UI Vite Eacharts项目启动 vue的vite工程文件,npm i安装所有依赖，查看package.json可以知道npm run dev启动。

原创 智慧工厂数字孪生系统

基于三维模型的数字孪生系统，运行就可以直接使用，用于学习研究或者项目中

原创 智慧收费站数字孪生系统

基于三维模型的数字孪生系统，运行即可使用，供学习研究。

原创 酷炫智能大屏数据中心

全套htmli+css+js+echarts前端数据可视化展示，自适应各种浏览器和分辨率。

原创 水质情况实时监测预警系统

全套htmli+css+js+echarts前端数据可视化展示，自适应各种浏览器和分辨率。

原创 政务服务大数据可视化监管平台

全套htmli+css+js+echarts前端数据可视化展示，自适应各种浏览器和分辨率。

原创 vue项目使用mpegts.js实现摄影头实时预览

文章介绍了如何在HTML中通过mpegts.js库创建视频标签并实现实时FLV流的播放，包括初始化方法、错误事件监听和自适应码率设置。原文链接：https://blog.csdn.net/qq_43664120/article/details/137632059。url: this.dialogData.data.wsUrl,//后端返回的视频流链接。// 预加载的分片数量，单位为个，默认值为 3 个。// console.log('视频加载完成1')console.log('媒体错误')

原创 css美化复选框

✓单选框禁用✓单选框✓单选框✓