- 博客(201)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Laya寻路在构建过程中阻塞页面加载问题处理
navWorker.js: 这个文件放在src中在运行的时候会报错找不到，所以worker代码必须放在bin目录下，但是在bin目录下又无法读取Laya,window,NevMesh等全局变量，所以，必须在这里引入NevMesh.js来执行计算。如果json文件有三四百kb以上，那么构建寻路的时候会非常卡，甚至阻塞模型加载，这时候可以使用worker来构建新的线程避免阻塞页面的模型。使用worker处理阻塞问题。
2024-01-16 15:40:12
406
转载 NevMesh.Js你可以在Laya引擎中直接使用的AI寻路
NevMesh.Js是一个开源的JavaScript库,能够使用Unity导出的NavMesh文件进行AI寻路。是在ThreeJs的PatrolJS基础上，针对Laya引擎做了改造，本教程将会带大家简单了解和使用NevMesh.Js使用。
2024-01-16 15:26:10
90
转载 修改Threejs里的OrbitControls右键上下移动控制视图上下移动
在原生的OrbitControls里，右键上下移动，结果是视图放大缩小，这样的结果不是我的需求。应该是右键上下移动，视图也上下移动。如下：修改一下panUp的方法即可，注释的部分是原来的代码。
2023-07-18 11:41:18
256
转载 threejs的渲染顺序
每个threejs对象都会有一个renderOrder属性，我们可以人为地配置对象A的renderOrder小于B的renderOrder，这样，就算A按照前文的机制因该渲染在B之后，但由于renderOrder的原因，能而改变此规则，让A渲染在B之前。当它发现需要渲染的部分被距离摄像头更近的对象遮挡住的时候，就会不再对其进行渲染。如此，距离摄像头越近的对象就会越被先渲染，距离摄像头越远的对象会被后渲染，这样就能更快发现后面的对象的哪些个点会被遮住，从而避免对该点的渲染计算。
2023-05-31 16:46:37
711
转载 THREE.js渲染顺序
本文主要讲述了THREE.js中的不透明物体和透明物体的渲染顺序，主要涉及THREE.js的以下内容：Materialblending及blending相关的一系列属性Object3Ddepth原文：https://segmentfault.com/a/1190000041221932。
2023-05-31 16:16:51
1127
原创 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
723
原创 3D项目中用到的一些算法
判断点是否在多边形内部（冬奥）（1）面积和判别法：判断目标点与多边形的每条边组成的三角形面积和是否等于该多边形，相等则在多边形内部。（2）夹角和判别法：判断目标点与所有边的夹角和是否为360度，为360度则在多边形内部。（3）引射线法：从目标点出发引一条射线，看这条射线和多边形所有边的交点数目。如果有奇数个交点，则说明在内部，如果有偶数个交点，则说明在外部。判断点是否在四边形内部（冬奥）点是否在四条边的同一边计算点到直线的距离（冬奥）计算点到线段的最短距离（冬奥）已知当前绕Y轴的角度值（绕x
2023-05-28 09:41:04
1862
转载 基于three.js的三维空间曲线轨迹运动
现在我们通过 getTangentAt 函数获取曲线上特定位置的切线向量，根据该切线向量和点的位置向量计算物体朝向的点向量，传入物体的 lookAt 函数。我们在做项目的时候，有时候会遇到物体或者相机需要做复杂轨迹运动的情况，往往没法简单的通过修改位置来达成我们想要的运动效果。注意上图示的切线（黄线）实际起点为原点(0,0,0)，这里为了示意切线在曲线上的位置，平移到了点所在位置上。假设给定的点是(1,1,-1),(1,0,1),(-1,0,1),(-1,0,-1)
2023-05-23 10:37:11
958
原创 使用AlloyFinger插件实现div包括其子元素的双指缩放单指移动
【代码】使用AlloyFinger插件实现div包括其子元素的双指缩放单指移动。
2023-05-12 11:47:25
149
原创 使用CSS2DRenderer在3D项目中创建Label标签并添加点击事件（代替鼠标射线检测）
创建控制器的时候传入labelRenderer.domElement，这样在控制旋转移动3D模型的时候标签可以同步跟着动。创建lable，要把label放在3D场景中的什么位置就设置为什么位置(label本质是div标签)刷新渲染的时候记住同步刷新 labelRenderer。创建场景相机灯光加载模型等代码省略。引入CSS2DRenderer。
2023-05-12 11:00:35
1316
转载 webpack3升级到webpack4优化打包
6、替换extract-text-webpack-plugin为mini-css-extract-plugin ^0.5.0，下有详细说明。webpack4不支持extract-text-webpack-plugin，因此替换为mini-css-extract-plugin。1、extract-text-webpack-plugin替换成mini-css-extract-plugin。1、如果按照上述操作，升级之后，执行npm run dev，会碰到一个问题。二、跑通本地npm run dev。
2023-02-16 20:15:14
169
10原创 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
1499
原创 微信小程序gltf模型无法加载
4096，但8.0.27及以下版本图片最大不能超过2048*2048，否则也将无法加载gltf模型。gltf模型的纹理图片必须是2的n次幂，如：1024。微信版本8.0.27版本开始支持纹理分辨率4096。
2022-09-26 10:58:20
1391
原创 关于logarithmicDepthBuffer属性
logarithmicDepthBuffer, 官方解释: 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用, 默认是false。使用了会带来额外的开销, 但是效果会变好.渲染器渲染时有个特点, 距离越远的物体精度越低, 因此, 在远处, 多个材质可能集中在一个像素点上, 产生各种不正常现象, 这也叫z-fight.需要注意，该问题在微信小程序里，微信开发者工具模型显示是正常的完整的，到手机上看是不完整的。容易误判为近裁剪面的问题。
2022-09-19 15:12:54
1127
原创 微信小程序中three.js的canvas非全屏情况下射线检测不准确问题解决方案
全屏情况下的射线检测函数一般是这样写的：当canvas非全屏时写法：
2022-06-22 16:10:54
465
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人