这是个问题

原创 在three.js中如何使用indexedDB本地缓存模型

three.js 如何使用indexeddb实现模型本地缓存

原创 vue + xterm 前端终端terminal

【代码】vue + xterm 前端终端terminal。

原创 Vue + litegraph.js 实现蓝图功能

【代码】Vue + litegraph.js 实现蓝图功能。

原创 如何在vue中引入js文件

【代码】如何在vue中引入js文件。

原创 node:internal/modules/cjs/loader:1063 throw err； ^ Error: Cannot find module ‘D:\mobile-version por

【代码】node:internal/modules/cjs/loader:1063 throw err；

原创 如何在网页上嵌入tplink摄像头

页面引入 video.js+video-contrib-hls.js，并引入videojs的css文件。去到目录 ： 项目/监控管理/云直播/实时直播。可以获取高清及流畅的播放地址。点击监控头 设置按钮。

原创 如何将base64图片转化为URL格式

将base64图片转为URL

原创 vue3 .env 环境变量的配置及应用

vue3 .env环境文件的配置与使用

原创 css中vh/vw与%的区别

vh与%的区别

原创 数组 / 对象的判断大全

判断数组类型判断对象类型判断对象是否为空获取对象属性名判断对象是否含有某属性

原创 Three.js Cannon.js 物理引擎

Three.js 与 Cannon.js 物体引擎

原创 vue3 vite proxy代理用法

1）vite.configs.ts文件server: { host: "0.0.0.0", port: 4001, // 设置服务启动端口号 open: true, // 设置服务启动时是否自动打开浏览器 cors: true, // 允许跨域 proxy: { // 此处为抽取的接口 端口后的统一部分 // 例如： http://199.199.9.9:8080/mars/v1 http://199.199.9

原创 three.js 将鼠标点击位置连线

//首先要有raycaster控制器mouse.x = (e.clientX / width) * 2 - 1;mouse.y = -(e.clientY / height) * 2 + 1;let raycaster = new THREE.Raycaster();raycaster.setFromCamera(mouse, camera);let intersects = raycaster.intersectObjects(scene.children);if(intersects.l

原创 js 如何在有默认参数的方法中，增加传入自定义参数

例如websocket，需要调用5个链接，但是所有的处理都一样，写5套一样的函数可太难受了（最后一段是解决方案，着急的直接看最后）new socket = new Websocket()socket.onopen = openSocketnew socket2 = new Websocket()socket2.onopen = openSocket常规接收方式：//调用socket.onmessage = onMesage;socket2.onmessage = onMesage2;

原创 flex属性说明

一、flex布局容器端相关属性flex-direction 方向flex-direction说明效果默认值row水平方向（左 => 右）是row-reverse水平方向（右 => 左）column垂直方向（上 => 下）column-reverse垂直方向（下 => 上）flex-wrap 换行flex-wrap说明效果默认值nowrap不换行是wra

原创 解决 Cannot find module ‘element-plus/es/popper ‘ or its corresponding type declarations.

vue3+ts项目打包报Elementui内部的错 Cannot find module 'element-plus/es/popper' or its corresponding type declarations.解决方法：在tsconfig.json文件，compilerOptions里加入 “skipLibCheck”: true,

转载 VUE实现前台图片 标注（添加矩形框）、放大、缩小、拖拽

需求：实现图片上自定义多个矩形选框，选框可移动缩放拖动，图片可以放大缩小、拖拽 ，选框内填充标注文字。框内填充文字基本都会，不多赘述，后期可添加选框移除功能（思路右击选框弹出选项删除，获取当前点击选框index,在选框arry中移除即可）后续功能可根据个人需求添加，如保存标注图片等等看下成品：代码<template> <div id="test" style="user-select: none;"> <button @click="fangda">放大

原创 gitlab创建新项目

原创 Three.js onsize方法 （含对相机的处理）

function onResize(){ //更新相机参数 if（this.camera.type == 'PerspectiveCamera'){ this.camera.aspect = container.width/container.height; } else if（this.camera.type == 'OrthographicCamera'){ this.camera.left = .container.clientLeft; this.camera..right =

原创 vue router中如何使用i18n

1)准备翻译2）写入

原创 如何在vue3中使用后i18n

Vue3项目中插件不能全局引用了，要在页面内按需引入因此在main.js/.ts中写的不生效1）安装npm install vue-i18n --save在src文件夹下创建文件 src/i18nPlugin.jsimport { ref, provide, inject } from "vue"; const createI18n = config => ({ locale: ref(config.locale), messages: config.messages,

原创 Three.js 克隆其他模型的矩阵 Matrix4

Three.js 四维矩阵 Matrix4让人又爱又恨的文档！！compose 和 decompose 两个方法用于处理模型的矩阵，整个一下午差点把我搞疯，下面详解两个方法，让和我一样的萌新不再躺在Three.js坑里这个方法是通过传入模型的三件套生成矩阵的用法如下：let matrixData = new Matrix4.compose(object3d.position, object3d.quaternion, object3d.scale)刚看到这个方法是不是以为传的3个参数都

原创 Three.js 物体克隆后矩阵及状态发生变化

遇到问题：1）导入模型后，从场景中获取一部分clone到新场景中，方向发生变化2）导入模型后，统一模型立刻获取Box3，和后面获取Box3数据不一样以上问题都可以通过下列方法解决：1）导入模型后直接更新矩阵object3d.updateMatrixWorld(true);2) 对要处理的模型object3d.updateWorldMatrix(true，true);...

原创 vite + TS + Vue3.0项目搭建

环境Node.js 版本 12及以上npm 版本 6及以上搭建项目npm init @vitejs/app vite-vue3-starter --template vue-ts一句话直接把项目名称及所用模板指定好跑起来项目npm installnpm run dev4. 修改vite.config.ts文件（Vite配置）import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'..

原创 new Date() JSON.stringfy后，比保存的时间提前了 8小时

原因：new Date()以后 JSON.stringfy以后变成格林威治时间，解决方法：将时间以字符串形式保存，不要直接保存Date()格式

原创 Three.js 旋转 rotation\rotateOnAxis\rotateX

属性：属性名说明使用方法.rotation物体的局部旋转，以弧度来表示object3D.rotation.x = 10注意，这里设置的数值是弧度，需要和角度区分开角度 转 弧度 MathUtils.degToRad(deg)弧度 转 角度 MathUtils.radToDeg (rad)方法：rotateOnAxis 在局部空间中绕着该物体的轴来旋转一个物体方法传参使用方法.rotateOnAxis( axis : V

原创 three.js 如何销毁射线Raycaster

由于Raycaster不在内存中，所以不需要真正意义上的销毁（无dispose方法）直接将用来承接的变量赋值null就可以，注意： 别忘了将绑定事件也取消哦！ initRaycaster() { this.raycaster = new Raycaster(); console.log(this.raycaster); ThingOrigin.container.addEventListener("pointerdown", this.handl

原创 Three.js 如何获取模型内部children的真实位置

obj.geometry.computeBoundingSphere();let realPosition = obj.geometry.boundingSphere.center;

原创 去掉canvas外面的白边

canvas元素点击后生成白边，去掉canvas上的outline border都不行解决办法：原来是包裹canvas的div上生成了outline, 给div设置outline:none;即可

原创 TypeScript中Promise异步的用法

export class Tools{ fileLoader:fileLoader: new FileLoader(); async loadFile( url: string){ let data = {name:''} this.fileLoader.load(url,function(object){ data.name = object.name }) return await data; }}使用let data = AAA.tools.loadF

原创 vue three.js 【OrbitControls】鼠标控制画面

需要格外安装 three-orbitcontrols cnpm install three-orbitcontrols --save引入 import OrbitControls from 'three-orbitcontrols'使用 this.controls = new OrbitControls(this.camera, this.container); //摄像机和容器div 注意事div // 使动画循环使用时阻尼或自转 意思是否有.

原创 vue项目 localhost 换成本地ip 访问项目打不开

打开config文件夹下index文件将host值改为： ‘0.0.0.0’

原创 Three.js——使用tween.js 完成连续动画

引入tween.js import TWEEN from '@tweenjs/tween.js'使用//先给定初始值 对象内属性的个数不限let coords = {x: 0, y: 0, z: 0}let tw = new TWEEN.Tween(coords) .to({x: 3, y: 3, z: 3}, 2000) //最终值 .easing(TWEEN.Easing.Linear.None) //变化方.

原创 将字符串格式的对象转为object格式

var a = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }}eval('('+a+ ')')

原创 iview 锚点的使用方法，保证你看完就会用

官网的案例太过于抽象，研究了好久，太坑人了我做的效果是左边点击 右边变化1）讲官网的代码赋值到页面<AnchorLink href="#basic_usage" title="Basic Usage" /> <AnchorLink href="#static_position" title="Static Position" /> <AnchorLink href="#API" title="API"> &

原创 将html2canvas生成截图上传到服务器

// html2canvas(Dom元素)html2canvas(this.$refs.project).then(canvas => { let base64 = canvas.toDataURL("image/png") // 先转化为base64 let bstr = atob(base64.split(',')[1]); // atob是将base64编码解码，去掉data:image/png;base64,部分

原创 点击元素以外区域 隐藏此div

1）选定到一个当前页面最外层的div加入点击事件2）被点击元素的不在我们框定的范围内（找不到）就隐藏<div @click=hide> <div id='container' v-show=show''></div></div>hide(){ var sp = document.getElementById("container"); if(!sp.contains(event.target)){ this..show

转载 判断是数组还是对象

一些数组的基础知识，感觉很有意思通过typeof是无法判断是对象还是数组的第一：使用instanceof进行判断，A instanceof B即对象A是不是构造函数B构造出来的，是即返回true, 不是即返回false.第二：在typeof上进行enhancement, typeof数组和对象返回都是object, 但是数组的长度为0及0以上的整数，object的长度为undefined.方法三：利用Object.prototype.toString.call()方法将该变量转化为代表其类型的s

原创 有默认传参的函数额外传自定义参数

有1个默认参数handle($event, index)handle( event, index ){ }有多个默认参数((param1,param2)=>{handle(param1,param2,index)})handle( event1,event2, index ){ }

原创 vue 点击复制到粘贴板

点击复制功能其实也是模拟 手动选中后再复制的动作1） 先创建一个input节点 const input = document.createElement('input') document.body.appendChild(input)2） 给input赋值input.setAttribute('value','aaa')3）选中input框内的数值input.select(...