自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(223)
  • 资源 (3)
  • 收藏
  • 关注

原创 JS之BOM,DOM

简介:BOM:Browser Object Model:浏览器对象模型,BOM中的顶级对象就是windowDOM:Document Object Model 文档对象模型。页面中有一个顶级对象:Documentwindow----皇上document–总管太监,window对象下的属性,有的时候也是一个对象, 对象可以调用属性或者方法 window.document.getElementsByName();页面中所有的内容都是window的,变量是属于window的,函数也是属于window,对象

2024-12-31 19:18:22 419 1

原创 Node.js

Node.js 是什么Node.js 不是一门语言,不是库、不是框架,Node.js 是一个 JavaScript 运行时环境,可以解析和执行 JavaScript 代码,以前只有浏览器可以可以解析执行 JavaScript 代码,现在的 JavaScript 可以完全脱离浏览器来运行,一切都归功于:Node.js浏览器中的 JavaScript有EcmaScript,BOM, DOM,Node.js 中的 JavaScript没有 BOM、DOM,在 Node 这个 JavaScript 执行环境

2024-12-31 19:16:24 1039 1

原创 3D数学基础2

矩阵的行列式在任意方阵中都存在至少一个标量,称作该方阵的行列式。在线性代数中,行列式有很多有用的性质线性运算法则方阵MMM的行列式记作∣M∣|M|∣M∣或“det M”。非方阵矩阵的行列式是未定义的。注意,在书写行列式时,两边用竖线将数字块围起来,省略方括号。如果将3×3阶矩阵的行解释为3个向量,那么矩阵的行列式等于这些向量的所谓“三元组积”余子式假设矩阵M有r行,c列。记法M(ij)M^{(ij)}M(ij)表示从M中除去第i行和第j列后剩下的矩阵。显然,该矩阵有r1行,c-1列。矩阵

2024-12-31 18:15:58 721

原创 从零创建vue+elementui+sass+three.js项目

build/webpack.base.conf.js添加。打包后找不到js,css。

2024-11-09 15:07:42 435

原创 vue实现滑块组件

【代码】vue实现滑块组件。

2024-10-23 10:12:56 181

原创 node版本管理工具nvm

【代码】node版本管理工具nvm。

2024-09-09 10:09:35 128

原创 Laya3判断模型的某些部分是否在屏幕内/是否在屏幕上特定区域

给在屏幕内的特定模型更换高亮材质,不在屏幕内的不做处理。

2024-03-28 10:16:12 184

原创 Laya3实现鼠标拖动在屏幕上实时框选矩形区域

【代码】Laya3实现鼠标拖动在屏幕上实时框选矩形区域。

2024-03-27 10:54:51 163

原创 Laya增加顶视图小地图

【代码】Laya增加顶视图小地图。

2024-03-14 18:16:53 447

原创 Laya寻路在构建过程中阻塞页面加载问题处理

navWorker.js: 这个文件放在src中在运行的时候会报错找不到,所以worker代码必须放在bin目录下,但是在bin目录下又无法读取Laya,window,NevMesh等全局变量,所以,必须在这里引入NevMesh.js来执行计算。如果json文件有三四百kb以上,那么构建寻路的时候会非常卡,甚至阻塞模型加载,这时候可以使用worker来构建新的线程避免阻塞页面的模型。使用worker处理阻塞问题。

2024-01-16 15:40:12 488

原创 IOS无法调用摄像头和陀螺仪的问题处理

注意:IOS调用陀螺仪必须加按钮手动触发才能用调用起来。

2024-01-09 14:22:33 659

原创 Laya3.0.3陀螺仪使人物保持在原位

【代码】Laya3.0.3陀螺仪使人物保持在原位。

2023-09-13 12:50:17 158

原创 THREE.js绘制银河系

【代码】THREE.js绘制银河系。

2023-07-28 09:23:59 659

原创 3D知识入门

类型:BufferGeometry,BoxGeometry,TextGeometry,PlaneGeometry等。视角fov 宽高比aspect 近裁剪面near 远裁剪面 far。3D模型加载器: GLTFLoader, FBXLoader,三维向量Vector3,Vector4,Color。类似于js {x: 0, y: 0, z: 0}纹理加载器:TextureLoader。常用属性map,color,side。常用于工程图等无需近大远小的项目。显示与隐藏Layer。

2023-05-30 16:21:32 900

原创 3D项目中用到的一些算法

判断点是否在多边形内部(冬奥)(1)面积和判别法:判断目标点与多边形的每条边组成的三角形面积和是否等于该多边形,相等则在多边形内部。(2)夹角和判别法:判断目标点与所有边的夹角和是否为360度,为360度则在多边形内部。(3)引射线法:从目标点出发引一条射线,看这条射线和多边形所有边的交点数目。如果有奇数个交点,则说明在内部,如果有偶数个交点,则说明在外部。判断点是否在四边形内部(冬奥)点是否在四条边的同一边计算点到直线的距离(冬奥)计算点到线段的最短距离(冬奥)已知当前绕Y轴的角度值(绕x

2023-05-28 09:41:04 2071

原创 给3D模型增加标签

图中小小的书签图标使用Sprite来做,文字标签使用CSS2DObject,划线使用THREE.Line。

2023-05-12 11:26:15 399

原创 使用CSS2DRenderer在3D项目中创建Label标签并添加点击事件(代替鼠标射线检测)

创建控制器的时候传入labelRenderer.domElement,这样在控制旋转移动3D模型的时候标签可以同步跟着动。创建lable,要把label放在3D场景中的什么位置就设置为什么位置(label本质是div标签)刷新渲染的时候记住同步刷新 labelRenderer。创建场景相机灯光加载模型等代码省略。引入CSS2DRenderer。

2023-05-12 11:00:35 1933

原创 THREE.js绘制粗线条

相关的类库放在Three.js包的example中,首先引用相应的js文件。

2023-04-26 18:32:55 930 1

原创 vue实现生成二维码与扫描二维码

【代码】vue实现生成二维码与扫描二维码。

2022-10-10 12:17:57 958

原创 node升级到最新版本导致node-sass版本不兼容问题解决办法

注意:如果只卸载重装node-sass还将出现如下问题,所以一定要同时卸载重装node-sass和sass-loader。如果你已经遇到如下问题,解决办法也是卸载重装node-sass和sass-loader。解决办法:卸载重装node-sass和sass-loader。为防止npm被墙导致的相关问题,使用淘宝镜像。出现node-sass版本不兼容问题。node升级到最新版本。

2022-09-28 17:46:50 1698

原创 微信小程序gltf模型无法加载

4096,但8.0.27及以下版本图片最大不能超过2048*2048,否则也将无法加载gltf模型。gltf模型的纹理图片必须是2的n次幂,如:1024。微信版本8.0.27版本开始支持纹理分辨率4096。

2022-09-26 10:58:20 1682

原创 关于logarithmicDepthBuffer属性

logarithmicDepthBuffer, 官方解释: 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用, 默认是false。使用了会带来额外的开销, 但是效果会变好.渲染器渲染时有个特点, 距离越远的物体精度越低, 因此, 在远处, 多个材质可能集中在一个像素点上, 产生各种不正常现象, 这也叫z-fight.需要注意,该问题在微信小程序里,微信开发者工具模型显示是正常的完整的,到手机上看是不完整的。容易误判为近裁剪面的问题。

2022-09-19 15:12:54 1602

原创 微信小程序中实现对3D模型的单指旋转双指缩放移动

微信小程序中实现对3D模型的单指旋转双指缩放移动。

2022-08-18 16:09:03 1693

原创 微信小程序中three.js的canvas非全屏情况下射线检测不准确问题解决方案

全屏情况下的射线检测函数一般是这样写的:当canvas非全屏时写法:

2022-06-22 16:10:54 585

原创 3D数学基础2:矩阵和3D线性变换

矩阵和3D线性变换线性变换包括旋转、缩放、投影、镜像、切变等,不包括平移。包含平移的变换称作仿射变换。3D中的仿射变换不能用 3×33×33×3 矩阵表达,只能用用 4×44×44×4 矩阵表达仿射变换。考虑2D 中将一物体顺时针旋转20°:旋转物体,意味着旋转物体上所有的点,这些点将被移动到一个新的位置,我们使用同一坐标系来描述变换前和变换后点的位置。如图:另一种方式:变换坐标系。旋转坐标系时,物体上的点实际没有移动,只是在另一个坐标系中描述它的位置而已。如图:这两种变换实际上是等价的,将物体

2022-05-10 15:09:55 776

原创 3D数学基础

坐标系传统的计算机图形学使用左手坐标系,线性代数倾向于使用右手坐标系摄像机坐标系摄像机坐标系是和观察者密切相关的坐标系。摄像机坐标系和屏幕坐标系相似,差别在于摄像机坐标系处于3D空间中而屏幕坐标系在2D平面里。摄像机坐标系能被看作是一一种特殊的 “物体”坐标系,该“物体”坐标系就定义在摄像机的屏幕可视区域。摄像机坐标系中,摄像机在原点,x轴向右,z轴向前(朝向屏幕内或摄像机方向),y轴向上(不是世界的上方而是摄像机本身的上方)。图3.1展示了一个摄像机坐标系。惯性坐标系为了简化世界坐标系到物体

2022-05-07 16:54:56 219

转载 Three.js 与 Cannon.js 介绍与使用

Three.js 基础概念使用 Three.js 前,首先要理解以下几个核心概念:Sence 场景在 Three.js 中首先需要创建一个三维空间,我们称之为场景。场景可以想象成是一个容器,里面存放着所有渲染的物体和使用的光源。let scene = new THREE.Scene()Axes 坐标轴Three.js 采用的是右手坐标系,拇指、食指、中指分别表示 X、Y、Z 轴的方向。Camera 摄像机摄像机就相当于我们的双眼,决定了能够在场景中的所见所得。Three.js 中提供

2022-02-15 14:45:40 2743 1

原创 three.js背景图用视频纹理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抢红包

2022-01-14 14:19:04 2379

原创 个人封装common.js

function resetRem(){ let rootWidth = document.documentElement.clientWidth || document.body.clientWidth; let rootDom = document.querySelector('html'); rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px';}resetRem();function forbidMenu(){.

2021-12-08 13:38:14 241 1

原创 THREE.js知识点整理

three.js必备元素创建thress.js要显示一个3D模型的必备元素:scene,camera.light,rendererH5写法: <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r127/three.min.js"></script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,window.i

2021-11-29 15:07:02 2516

原创 记录一次微信小程序总是闪退的问题

闪退原因:data中定义了一个名为type的数据且当使用setData改变type的值就会总是闪退。解决办法不要使用type作为data名。

2021-10-08 11:24:32 3089

转载 Krpano全景制作

一、前言在使用krpano之前,我已经做过两个全景项目了,用的是基于three.js的插件photo Sphere Viewer,这个全景插件用起来还是很方便的,虽然研究起来费了点时间,但是基本的全景功能都能实现:全景浏览、添加热点、自动旋转等…除了这个插件之外,还有其它两个和它类似的插件,虽然我没用过,但是功能看起来都差不多:Photo Sphere ViewerPanolensPannellum那什么现在又用krpano了呢?其实最开始我就是想要用krpano制作的,但是刚开始研究的时候,发

2021-07-02 17:50:48 7139 4

原创 微信小程序相机自动识别去掉拍照的快门声

无快门声的实现方式:// 识别相关 createListener(){ let num = 0,self = this; const context = wx.createCameraContext(); listener = context.onCameraFrame(async function (res) { num++; if (num === 50) { num = 0; self.data2Ba

2021-07-01 09:35:48 1070

原创 前端代码规范

代码千万行,安全第一行;前端不规范,同事两行泪。一、命名规范(一) 项目命名全部采用小写的方式以中划线分割正确命名:mall-management-system (商城管理系统)错误命名:mall-management-system 或 mallManagementSystem(二) 目录命名全部采用小写的方式以中划线命名复数时,要采用复数结构正确命名:sctipts / styles / utils / demo-scripts(三) JS、CSS、SCSS、HTML、PNG等文件

2021-06-24 13:40:49 236

原创 shadow DOM

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁。其中,Shadow DOM 接口是关键所在,它可以将一个隐藏的、独立的 DOM 附加到一个元素上。本篇文章将会介绍 Shadow DOM 的基础使用。备注: Firefox(从版本 63 开始),Chrome,Opera 和 Safari 默认支持 Shadow DOM。基于 Chromium 的新 Edge 也支持 Shadow DOM

2021-06-17 15:17:47 397

转载 Three.js WebGLRenderTarget(离屏渲染)

WebGLRenderTarget(离屏渲染)WebGL渲染目标对象WebGLRenderTarget实现了WebGL的离屏渲染功能,如果你有一定的WebGL或OpenGL基础,对帧缓冲区、离线渲染、后处理等概念应该是不陌生的。.render()方法WebGL渲染器WebGLRenderer渲染方法.render()的参数( Scene, Camera, WebGLRenderTarget, forceClear ).Scene:要渲染的场景对象Camera:场景对象对应的相机对象WebGLR

2021-06-17 13:22:30 2337

原创 微信小程序(以及THREE.js)场景导出成图片

微信小程序中type=webgl的canvas导出成图片<image src='{{photoUrl}}'></image>function createImg(){ photoUrl = renderer.domElement._ctx.canvas.toDataURL('image/jpeg'); self.setData({ photoUrl })}THREE.js场景导出成图片 function downloadImage(imgUrl

2021-05-24 21:29:25 2824 6

原创 THREE.js实现蝴蝶随机方向飞舞(飞行过程中可随机改变方向)

function animate(){ requestAnimationFrame(animate); renderer.render(scene, camera); for (let k = 0; k < hudieList.length; k++) {// hudieList中存储的是很多个蝴蝶模型Scene if (hudieList[k]) { hudieTrans(hudieList[k]);

2021-05-20 17:01:42 672

原创 three.js 骨骼动画的clone

const cloneGltf = (gltf) => { const clone = { animations: gltf.animations, scene: gltf.scene.clone(true) }; const skinnedMeshes = {}; gltf.scene.traverse(node => { if (node.isSkinnedMesh) { sk

2021-05-18 14:02:56 592

原创 Laya实现DeviceOrientationControls

var DeviceOrientationControls = function ( object ) {// 参数是camera var scope = this; var EPS = 0.000001; this.object = object; this.enabled = true; this.deviceOrientation = {}; this.screenOrientation = 0; this.alphaOffset = 0; // radians var on

2021-05-08 18:33:19 420 1

将excel表格中的数据读取出来,生成json格式的数据,可以自定义json的结构

将excel表格中的数据读取出来,生成json格式的数据,可以自定义json的结构

2024-12-14

海底闯迷宫游戏.zip

海底闯迷宫游戏.zip

2021-10-28

个人growth.zip

个人封装的轮播图,跑马灯,模态框,tab,下拉列表功能

2021-10-11

vconsole.min.zip

vconsole.min.zip

2021-05-31

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除