上一页 1 2 3 4 5 6 ··· 14 下一页
摘要: 使用前端技术实现静态图片局部流动效果 🌊 如果你有玩过 🎮 《王者荣耀》、《阴阳师》 等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,本文使用前端开发技术,结合 SVG 和 CSS 来实现类似的液化流动效果。本文包含的知识点主要包括:mask-image 遮罩、feTurbulence 和 feDisplacementMap 滤镜、filter 属性、canvas 绘制方法、TimelineMax 动画以及input[type=file] 本地图片资源加载等。 阅读全文
posted @ 2022-08-03 09:05 Dragonir 阅读(4130) 评论(12) 推荐(27) 编辑
摘要: 使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐 近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js 和 CSS实现赛博朋克2077风格视觉效果 实现炫酷 3D 数字地球大屏页面。页面使用 React + Three.js + Echarts + stylus 技术栈,本文涉及到的主要知识点包括:THREE.Spherical 球体坐标系的应用、Shader 结合 TWEEN 实现飞线和冲击波动画效果、dat.GUI 调试工具库的使用、clip-path 创建不规则图形、Echarts 的基本使用方法、radial-gradient 创建雷达图形及动画、GlitchPass 添加故障风格后期、Raycaster 网格点击事件等。 阅读全文
posted @ 2022-07-25 09:15 Dragonir 阅读(9920) 评论(27) 推荐(47) 编辑
摘要: Three.js 打造缤纷夏日3D梦中情岛 🌊 深居内陆的人们,大概每个人都有过大海之梦吧。夏日傍晚在沙滩漫步奔跑;或是在海上冲浪游泳;或是在海岛游玩探险;亦或静待日出日落……本文使用 React + Three.js 技术栈,实现 3D 海洋和岛屿,主要包含知识点包括:Tone Mapping、Water 类、Sky 类、Shader 着色、ShaderMaterial 着色器材质、Raycaster 检测遮挡以及 Three.js 的其他基础知识,让我们在这个夏天通过此页面共赴大海之约。 阅读全文
posted @ 2022-05-27 08:52 Dragonir 阅读(6262) 评论(21) 推荐(29) 编辑
摘要: 使用CSS实现《声生不息》节目Logo 《声生不息》 是芒果TV、香港电视广播有限公司和湖南卫视联合推出的港乐竞唱献礼节目,听着音乐仿佛回到了那个令人怀念的港风席卷整个亚洲的年代。该节目 Logo 采用经典红蓝配色,无限符号 ∞ 造型,满满的设计感。本文在仅采用原生 CSS 的情况下,尽量还原实现该 Logo 造型,本文内容虽然非常简单,但是用到的知识点挺多的,比如:repeating-linear-gradient、clip-path、background-clip、Window.getComputedStyle()、CSSStyleDeclaration.getPropertyValue() 等。 阅读全文
posted @ 2022-05-13 11:24 Dragonir 阅读(1321) 评论(4) 推荐(5) 编辑
摘要: Three.js 实现3D开放世界小游戏:阿狸的多元宇宙 🦊 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 🌑,星际移民 👨‍🚀 必须穿戴基地发放的防辐射服才能生存。阿狸 🦊 驾驶星际飞行器 🚀 降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧!本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏幕控制模型在 3D 世界里运动的 Low Poly 低多边形风格小游戏。本文主要涉及到的知识点包括:Three.js 阴影类型、创建粒子系统、cannon.js 基本用法、使用 cannon.js 高度场 Heightfield 创建地形、通过轮盘移动控制模型动画等。 阅读全文
posted @ 2022-04-01 08:36 Dragonir 阅读(5067) 评论(14) 推荐(11) 编辑
摘要: Three.js 火焰效果实现艾尔登法环动态logo 🔥 《艾尔登法环》是最近比较火的一款游戏,观察可以发现它的 Logo 是由几个圆弧和线段构成。本文使用 React + Three.js 技术栈,实现具有火焰效果艾尔登法环 Logo,本文中涉及到的知识点包括:Fire.js 基本使用方法及 Three.js 的其他基础知识。 阅读全文
posted @ 2022-03-22 09:11 Dragonir 阅读(1819) 评论(3) 推荐(2) 编辑
摘要: 使用Three.js实现神奇的3D文字悬浮效果 在 Three.js Journey 课程示例中,提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子,本文使用 React + Three.js 技术栈,参照示例实现类似的效果。本文中涉及到的知识点主要包括:CSS 网格背景、MeshNormalMaterial 法向材质、FontLoader 字体加载器、TextGeometry 文本缓冲几何体、TorusBufferGeometry 圆环缓冲几何体、ConeBufferGeometry 圆锥缓冲几何体、OctahedronBufferGeometry 八面缓冲几何体、Three.js 后期渲染、GlitchPass 通道、Element.requestFullscreen、Document.exitFullscreen 等。 阅读全文
posted @ 2022-03-09 08:57 Dragonir 阅读(2618) 评论(4) 推荐(3) 编辑
摘要: 拜托,使用Three.js让二维图片具有3D效果超酷的好吗 💥 本文使用 Three.js + React 技术栈,将二维漫画图片转化为三维视觉效果。本文包含的内容主要包括:THREE.Group 层级模型、MeshPhongMaterial 高光网格材质、正弦余弦函数 创建模型移动轨迹等。 阅读全文
posted @ 2022-02-22 09:36 Dragonir 阅读(5860) 评论(6) 推荐(24) 编辑
摘要: Three.js 实现2022冬奥主题3D趣味页面 🐼 迎冬奥,一起向未来!2022冬奥会马上就要开始了,本文使用 Three.js + React 技术栈,实现冬日和奥运元素,制作了一个充满趣味和纪念意义的冬奥主题 3D 页面。本文涉及到的知识点主要包括:TorusGeometry 圆环面、MeshLambertMaterial 非光泽表面材质、MeshDepthMaterial 深度网格材质、custromMaterial 自定义材质、Points 粒子、PointsMaterial 点材质等。 阅读全文
posted @ 2022-02-03 09:50 Dragonir 阅读(9232) 评论(15) 推荐(50) 编辑
摘要: 1000粉!使用Three.js制作一个专属3D奖牌🥇 本文使用 React + Three.js 技术栈,实现粉丝突破 1000 的 3D 纪念页面,包含的主要知识点包括:Three.js 提供的光源、DirectionLight 平行光、HemisphereLight 半球光源、AmbientLight 环境光、奖牌素材生成、贴图知识、MeshPhysicalMaterial 物理材质、TWEEN 镜头补间动画、CSS 礼花动画等。 阅读全文
posted @ 2022-01-20 08:27 Dragonir 阅读(4137) 评论(6) 推荐(17) 编辑
上一页 1 2 3 4 5 6 ··· 14 下一页