自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

嘿嘿,大部分都是前端三维开发的时候遇到的问题,顺手解决了,如果你也遇到了和我一样的问题,希望我的文章可以帮到你

欢迎来到我的技术博客!这里专注于分享前端开发和 3D 图形相关的实用教程与技巧,帮助开发者在项目中快速解决问题、提升技能。博客共设有四个专栏,涵盖了从基础到进阶的内容: 前端小技巧:聚焦实用的前端开发技巧和优化策略,提升你的开发效率

  • 博客(25)
  • 收藏
  • 关注

原创 基于Vue3的手写签名板技术实现

本文介绍了一个基于Vue3 Composition API实现的交互式手写签名板组件,该组件支持多级笔触调整、实时笔迹矫正、签名持久化存储等功能,并具备移动端触控支持。系统通过Canvas API实现核心绘制功能,结合本地存储和动态样式处理,构建了一个完整的电子签名解决方案。

2025-02-12 11:10:31 490

原创 基于Vue 3 简单自定义Table组件(乞丐版)

这个Table组件是一个高度可定制的表格,支持传入数据、列配置,并允许通过插槽自定义列的内容。根据传入的数据和列配置动态渲染表格支持自定义列内容渲染支持列宽度的定制可通过插槽灵活替换列的内容展示通过该自定义表格组件,您可以灵活地展示和定制数据。通过插槽的支持,用户可以轻松修改每一列的内容展示,适应不同需求。样式方面,您可以根据实际项目需求对表格进行全方位的定制,提升用户体验。

2024-12-17 10:55:51 1043

原创 基于 Vue 和 CSS 实现的垂直滚动效果

本文档简要介绍了如何通过和实现一个带有垂直滚动效果的组件,并通过在动画中插入停顿,模拟类似翻页的效果。

2024-12-16 14:24:19 510

原创 在 Vue 3 + TypeScript + Element Plus 中实现动画控制组件

该组件通过。

2024-12-02 17:52:42 473

原创 用 Babylon.js 实现震撼的爆炸效果:全面解析与代码示例

中实现震撼的爆炸效果,从应用场景到实现原理,再到详细的代码示例,帮助开发者全面了解该技术的实现过程。随着技术的不断发展,未来的 3D 应用将能够实现更复杂和真实的效果,期待各位开发者在实际项目中不断探索和应用。方法给了模型的root随机的位置,那是因为模型给过来的时候用的是自身的中心点,需要用统一的中心点,所以给了随机效果,在实际应用的时候可以去掉。此示例包括加载模型、设置爆炸效果,以及在渲染循环中更新模型的位置。实现令人惊叹的爆炸效果,涵盖其应用场景、实现原理及详细的代码示例,帮助开发者掌握这一技术。

2024-10-09 14:38:51 784

原创 three.js如何现实草地

在三维场景中的绿化地是非常常见的,如果简单的使用一个平面,再加上漫反射和法线贴图实现,视觉上的效果还是有点差那么点效果,具体的效果官方给出过不少案例,但是如果我要有更加生动、更加立体。着色器中的光照方向是写死的,可以把场景中的光线方向传进来,效果更加好,还用到一张灰度贴图,可以自己用noise生成或者在网上找就可以了。正巧之前在谷歌某网站看到的一篇文章,正好满足我们要的要的效果,拿来和大家分享一下。

2024-05-14 17:36:51 459 2

原创 前端通过Spirit图的方式现实,展示序列帧

什么是序列帧?为什么要播放序列帧,它可以做什么?序列帧是指将一系列连续的图像帧按照一定的顺序播放,从而产生连续动画效果的技术。每一帧都是一个静止的图像,但通过连续地播放这些图像,人眼会感知到动态的效果。在计算机图形和动画领域,序列帧常用于制作动画、游戏、电影等多媒体内容。通常情况下,序列帧的制作过程包括以下步骤:设计和绘制每一帧的图像内容:根据动画或场景的需求,设计并绘制出一系列静止的图像帧。编排图像帧的顺序:确定每一帧的播放顺序,以便按照一定的速率连续播放。

2024-04-12 17:09:49 986

原创 前端如何实现带有阻尼效果的模态框(或对话框)

在移动端中的交互中通常都是有动画效果的,例如打开一个模态框(或对话框),用户按住并向上或向下滑动以选择其中一个选项。在滑动过程中,用户会感受到阻尼效果(即滑动的速度会逐渐减慢),当滑动停止时,最接近停止位置的选项会被选中。

2024-02-21 17:50:48 413 1

原创 three.js实现VR看房自由

万字详解-three.js实现VR看房自由

2024-01-11 17:51:14 2474

原创 three.js通过自定义后期处理实现智慧城市扫光效果

three.js通过自定义后期处理实现智慧城市扫光效果

2024-01-09 16:22:20 1549 4

原创 前端如何播放序列帧、动画,以VUE项目为例

注意序列帧需要按如下命名,方便index变量拼上根目录组成的路径找到对于的序列帧使用方法如下,很简单,先引入人,然后绑在元素即可。

2023-12-18 19:00:27 3740 2

原创 前端真的已经死了吗?

前端已死”这一言论的涌现源于前端领域的快速发展和多样化的技术栈,以及新兴技术的涌现。人工智能和低代码平台的兴起让一些人开始质疑传统前端开发的价值,认为前端可能会在新技术和工具面前变得较为边缘。这种言论的背后是对未知的不安和对新技术对传统前端职责的冲击的担忧。

2023-12-14 17:00:33 824 1

原创 three.js项目如何制作方向指示器

这个还是很好理解,就是两维度的旋转alpha和beta,不熟悉球坐标的朋友,可以先了解一下球坐标,这个很关键,因为罗盘里面的旋转角度其实就是这个球坐标里面的alpha值(也有叫方位角的),不过在three.js叫theta和phi。首先罗盘的旋转角度其实就是相机绕某一个点或者自身吧,如果用的是three.js自带的轨道控制器的话,那就是绕着某一个点了,如果自在一些全景图的场景,那就是绕着自身的Y轴的旋转角度;在全景图的项目中,左上角通常显示的是一个指南针或方向标示,用来表示当前视图的朝向。

2023-12-14 13:21:25 821 1

原创 three.js通过自定义着色器实现智慧城市扫光效果

在three.js中通过自定义着色器ShaderMaterial实现智慧城市扫光效果

2023-12-06 17:44:37 2668 3

原创 在 Babylon.js 中轻松实现动感飞行:打造类似 Cesium 的飞行动画体验

FlyTo方法接收一个目标位置或一个 Mesh 对象,以及一些可选参数,例如相机与目标之间的距离、动画持续时间和缓动函数。options??100;.duration??2000;// 计算相机最终位置以框住目标// 平滑动画相机的位置和目标60,"target",60,?// 设置位置和目标的关键帧。

2023-12-05 16:20:00 787

原创 babylon.js中如何在场景渲染时或者数据加载时现实加载中动画

在babylon.js中数据加载和渲染是异步执行的,这中间就会有等待的时间,那这时间内,如何实现我们的动画呢?我们如何知道模型加载了多少?什么时候结束?当模型比较大,渲染时间较长,我们怎么知道场景什么时候渲染完成了呢?下面我们就一起探索一下。

2023-12-05 15:57:52 677

原创 babylon.js实现玻璃的反射效果

在三维场景中模拟玻璃通常涉及使用PBR材质实现,需要考虑透明度、折射和反射效果等效果。我这个效果感觉有点夸张了,看着跟镜子一样,可以根据实际情况调整其参数,环境贴图可以用HDR或者dds格式的。网上很多免费的素材可以下载。

2023-11-29 15:40:25 494 1

原创 经纬度坐标如何转成three.js或者babylon.js中的三维坐标

经纬度在three.js或者babylon.js中的如何应用,三维坐标和经纬度的互转

2023-11-02 14:44:19 1323 1

原创 babylon.js生成水体,以及水面的反射效果

远处的海平线与天空相交,仿佛消失在了无尽的远方,给人以无限遐想的空间感。海洋深处,神秘的海底世界隐藏着无数奇异的生物,五光十色的珊瑚和游动的鱼群在蔚蓝色的海水中构成了一幅美不胜收的画卷。无论是在深蓝的海洋还是平静的湖面,人们都能感受到大自然的神秘和壮美,这也让水成为了自然界中一种令人陶醉的元素。水是生活中非常常见的玩意,在游戏中常用于一些限定的场景中,例如吃鸡中的海岛外面就是水,因为外面用不到所以就不建模了,用水来代替加上一个隐形的墙就可以限制住玩家的位置从而造成一些不必要的bug。

2023-10-25 12:09:12 523 1

原创 Three.js 实现日照分析:基于维度和时间模拟太阳高度角与方位角的变化

three.js实现白天效果,根据当地(维度和时间)模拟太阳高度角和方位角的变化

2023-10-25 11:19:47 1381 1

原创 在cesium通过自定义着色器实现动态电子围栏

在cesium通过自定义着色器实现动态电子围栏

2023-10-16 12:40:57 1192 10

原创 用cesium的后期处理实现类似three.js中的spotLight效果

用cesium的后期处理实现类似three.js中的spotLight效果

2023-10-16 11:41:17 1052 6

原创 在babylon.js中,通过键盘控制实现类似吃鸡中的汽车控制--以赛车为例

在babylon.js中,通过键盘控制实现类似吃鸡中的汽车控制--以赛车为例

2023-10-16 11:04:52 271 1

原创 Three.js 实现交互式三维饼图:从思路到实现

three.js实现 类似Echarts的3D饼图

2023-09-18 18:15:45 1649 4

原创 如何在不同分辨率下实现平滑可拖拽弹窗:基于 Vue 的实战教程

不同分辨率下用,JavaScript实现可拖拽弹窗

2023-09-15 09:39:47 557

空空如也

空空如也

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

TA关注的人

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