theejs实战
鸢_
这个作者很懒,什么都没留下…
展开
-
【Javascript】原生实现deep watch,使用proxy逐层建立数据监听
使用对象处理数据,添加监听,然后递归再次添加直到全部添加完毕。原创 2024-09-24 16:50:51 · 343 阅读 · 0 评论 -
【threejs】火焰特效制作
使用shader创建threejs火焰效果原创 2024-06-26 09:07:44 · 462 阅读 · 2 评论 -
【Threejs】场景编辑功能及内外侧通信
threejs官方提供了一个较为完善的threejs场景编辑的demo,并且支持导出导入,前进后退,场景缓存等功能,所以我们需要做的只有把他引入自己的页面。但是同时业务中可能涉及一些特殊的功能或者一些可配置的内容,我们需要在官方editor的沙盒中完成这些操作。所以最终方案就是通过iframe引入editor编辑器,然后通过contentMessage传送消息给沙盒,同时也可以反向监听沙盒里面的instance。原创 2024-05-14 11:33:48 · 463 阅读 · 2 评论 -
【Threejs】获取相交网格相交线
【代码】【Threejs】获取相交网格相交线。原创 2024-04-29 15:44:22 · 387 阅读 · 0 评论 -
【Webgl_glsl&Threejs】搬运分享shader_飘落心形
将shadertory上的代码转成了threejs可以直接用的代码,引入文件的material,并在创建mesh或已有物体上使用material即可,使用时请注意uv对齐。原创 2024-04-24 15:08:33 · 775 阅读 · 0 评论 -
【Webgl_glsl&Threejs】搬运分享shader
这是一个基于圆弧缩放和分型的shader材质 ,可以作为墙体,天幕等特效使用。原创 2024-04-24 11:12:40 · 265 阅读 · 0 评论 -
【JavaScript&&threejs】对于二维平面内的路径进行扩张或缩放
对指定路径沿着边缘向内或向外扩张,达到放大或缩小一定范围的效果,这里我们获取每个点(这里是Vector3(x,y,z)),获取前后两个点和当前点的坐标,计算前后两点的向量,旋转90度向内或向外,然后获取单位向量。原创 2024-04-23 15:57:04 · 282 阅读 · 2 评论 -
【JavaScript&&Threejs】判断路径在二维平面上投影的方向顺逆时针
可以将路径每个连续的两点向量叉乘相加,根据正负性判断路径顺逆时针性当我们计算两个向量的叉积时,结果是一个新的向量,其方向垂直于这两个向量所在的平面,并且其大小与这两个向量构成的平行四边形的面积成正比。这个新向量的方向由右手定则确定:如果你将右手的四指放在两个向量的方向上,让拇指指向叉积的方向,那么你的手指弯曲的方向就是两个向量的顺时针旋转方向。当我们应用这个概念到路径的情况时,我们可以将相邻的路径点表示为向量,然后计算它们之间的叉积。原创 2024-04-22 16:24:21 · 486 阅读 · 1 评论 -
【threejs&&Javascript】实现事件注册派送
在初始化threejs场景的 class内使用。以事件管理器和点击事件为例。原创 2024-04-01 10:19:30 · 303 阅读 · 0 评论 -
【threejs】较大物体或shape的贴图较小问题处理方法
有的场景内相对体型差距过大的物体(如山地 海洋等····)由于尺寸问题,加载贴图过于小,同时shader也无法完全展示,如图。如果uv是乱的 可以用xyz坐标最大最小值先排布uv再对uv进行缩放。我们可以获取物体的uv,进行缩放使得贴图可以完全展开。原创 2024-03-29 09:30:43 · 548 阅读 · 0 评论 -
【threejs】计算矩阵、网格等总面积
将面分为无数个三角面 ,使用向量计算面积。原创 2024-03-26 19:29:17 · 226 阅读 · 0 评论 -
【threejs】二维坐标内判断 点 与 凹凸多边形 位置关系
从点向 ± xy方向发射四条射线,从相交次数判断点与多边形关系,理论上只要有一条射线相交奇数次(n%2==1)即可判定点在多边形内,此方法可避免凹凸多边形造成的判断错误。原创 2024-03-26 19:24:35 · 218 阅读 · 0 评论 -
【threejs】事件处理eventDispatch(点击,滑动等)
构建一个class,传入dom scene和camera等必要参数即可新建,使用射线判断物体是否触发事件,一个场景可以建立多个事件处理。原创 2024-03-21 11:24:33 · 370 阅读 · 0 评论 -
【threejs】使用任意矩阵创建曲面
可以使用本方法创建平面,基本原理就是创建buffergeometry并通过index分配网格 同时修正uv让整个曲面可以展示贴图。使用一个三维矩阵描述一个不规则的面时(类似geojson的多边形,模型单个面网格),原创 2024-03-20 14:12:21 · 346 阅读 · 0 评论 -
【threejs】修正 threejs 后期效果合成EffectComposer 导致场景变暗淡修正
3 smaaPass解决后期render无法开启抗锯齿的问题 (还有一种fxaa修正 效果依实际情况选择)2 GammaCorrectionShader修正明暗色域。1 ShaderPass修正scene异常。原创 2024-03-20 14:03:22 · 538 阅读 · 5 评论 -
【threejs】在Cesiumjs内使用threejs渲染场景
创建该类即可,具体细节备注有写。原创 2024-03-19 15:45:53 · 657 阅读 · 1 评论