dragonir

摘要： 本文将使用技术栈 React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏，通过本文的阅读，你将学习到的知识点包括：了解什么是 React Three Fiber 及它的相关生态、使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏。 阅读全文

摘要： 本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果，使其更加真实。所谓物理效果指的是对象会有重力，它们可以相互碰撞，施加力之后可以移动，而且通过铰链和滑块还可以在移动过程中在对象上施加约束。 通过本文的阅读，你将学习到如何使用 Cannon.js 在 Three.js 中创建一个 3D 物理世界，并在物理世界更新对象、联系材质、施加外力、处理多个物体中添加物体之间的碰撞效果，通过检测碰撞激烈程度来添加撞击声音等。 阅读全文

摘要： 兔年到了，祝大家身体健，康万事顺利。本文内容作为兔年新春纪念页面，将使用 Three.js 及 其他前端开发知识，创建一个以兔子为主题的 3D 简单的趣味页面 Rabbit craft go。本文内容包括使用纯代码创建三维浮岛、小河、树木、兔子、胡萝卜以及兔子的运动交互、浮岛的动画效果等。本文包含的知识点相对比较简单，主要包括 使用 Three.js 网格立方体搭建三维卡通场景、键盘事件的监听与三维场景动画的结合等，如果仔细阅读并实践过本专栏《Three.js 进阶之旅》的话，非常容易掌握。 阅读全文

摘要： 不知不觉，掘金关注者人数已经超过 1000 人，因此特地做了这个页面纪念一下，感谢大家关注 🙇‍ ，希望博客园的粉丝也涨涨。后续也将继续努力，持续输出一些有价值的文章。本文内容涉及的技术栈为 React + Three.js + Stulus，本文中主要包含的知识点包括：圆锥几何体 ConeGeometry、圆柱几何体 CylinderGeometry、材质捕捉纹理材质 MeshMatcapMaterial、文字创建和修饰的 FontLoader 和 TextGeometry、使用 Gsap 和它的插件 Physics2DPlugin 创建一些动画、rotateOnAxis 方法实现绕轴自转等。 阅读全文

摘要： 在前端开发过程中，我们也有可能遇到噪点插画风格的设计稿，应用基础的前端开发知识，能不能实现噪点风格的样式呢，本文主要内容主要就是通过几个示例来实现几种噪点效果。本文包含的知识点包括：CSS 属性 mask 遮罩、SVG 滤镜 feTurbulence、CSS 属性 filter 滤镜、CSS 属性 mix-blend-mode 元素混合、CSS 属性 image-rendering 图像缩放等。 阅读全文

摘要： 如果你有玩过 🎮 《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，本文使用前端开发技术，结合 SVG 和 CSS 来实现类似的液化流动效果。本文包含的知识点主要包括：mask-image 遮罩、feTurbulence 和 feDisplacementMap 滤镜、filter 属性、canvas 绘制方法、TimelineMax 动画以及input[type=file] 本地图片资源加载等。 阅读全文

摘要： 近期工作有涉及到数字大屏的需求，于是利用业余时间，结合 Three.js 和 CSS实现赛博朋克2077风格视觉效果 实现炫酷 3D 数字地球大屏页面。页面使用 React + Three.js + Echarts + stylus 技术栈，本文涉及到的主要知识点包括：THREE.Spherical 球体坐标系的应用、Shader 结合 TWEEN 实现飞线和冲击波动画效果、dat.GUI 调试工具库的使用、clip-path 创建不规则图形、Echarts 的基本使用方法、radial-gradient 创建雷达图形及动画、GlitchPass 添加故障风格后期、Raycaster 网格点击事件等。 阅读全文

摘要： 深居内陆的人们，大概每个人都有过大海之梦吧。夏日傍晚在沙滩漫步奔跑；或是在海上冲浪游泳；或是在海岛游玩探险；亦或静待日出日落……本文使用 React + Three.js 技术栈，实现 3D 海洋和岛屿，主要包含知识点包括：Tone Mapping、Water 类、Sky 类、Shader 着色、ShaderMaterial 着色器材质、Raycaster 检测遮挡以及 Three.js 的其他基础知识，让我们在这个夏天通过此页面共赴大海之约。 阅读全文

摘要： 《声生不息》 是芒果TV、香港电视广播有限公司和湖南卫视联合推出的港乐竞唱献礼节目，听着音乐仿佛回到了那个令人怀念的港风席卷整个亚洲的年代。该节目 Logo 采用经典红蓝配色，无限符号 ∞ 造型，满满的设计感。本文在仅采用原生 CSS 的情况下，尽量还原实现该 Logo 造型，本文内容虽然非常简单，但是用到的知识点挺多的，比如：repeating-linear-gradient、clip-path、background-clip、Window.getComputedStyle()、CSSStyleDeclaration.getPropertyValue() 等。 阅读全文

摘要： 2545光年之外的开普勒1028星系，有一颗色彩斑斓的宜居星球 🌑，星际移民 👨‍🚀 必须穿戴基地发放的防辐射服才能生存。阿狸 🦊 驾驶星际飞行器 🚀 降临此地，快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧！本文使用 Three.js + React + CANNON 技术栈，实现通过滑动屏幕控制模型在 3D 世界里运动的 Low Poly 低多边形风格小游戏。本文主要涉及到的知识点包括：Three.js 阴影类型、创建粒子系统、cannon.js 基本用法、使用 cannon.js 高度场 Heightfield 创建地形、通过轮盘移动控制模型动画等。 阅读全文

摘要： 《艾尔登法环》是最近比较火的一款游戏，观察可以发现它的 Logo 是由几个圆弧和线段构成。本文使用 React + Three.js 技术栈，实现具有火焰效果艾尔登法环 Logo，本文中涉及到的知识点包括：Fire.js 基本使用方法及 Three.js 的其他基础知识。 阅读全文

摘要： 在 Three.js Journey 课程示例中，提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子，本文使用 React + Three.js 技术栈，参照示例实现类似的效果。本文中涉及到的知识点主要包括：CSS 网格背景、MeshNormalMaterial 法向材质、FontLoader 字体加载器、TextGeometry 文本缓冲几何体、TorusBufferGeometry 圆环缓冲几何体、ConeBufferGeometry 圆锥缓冲几何体、OctahedronBufferGeometry 八面缓冲几何体、Three.js 后期渲染、GlitchPass 通道、Element.requestFullscreen、Document.exitFullscreen 等。 阅读全文

摘要： 本文使用 Three.js + React 技术栈，将二维漫画图片转化为三维视觉效果。本文包含的内容主要包括：THREE.Group 层级模型、MeshPhongMaterial 高光网格材质、正弦余弦函数 创建模型移动轨迹等。 阅读全文

摘要： 迎冬奥，一起向未来！2022冬奥会马上就要开始了，本文使用 Three.js + React 技术栈，实现冬日和奥运元素，制作了一个充满趣味和纪念意义的冬奥主题 3D 页面。本文涉及到的知识点主要包括：TorusGeometry 圆环面、MeshLambertMaterial 非光泽表面材质、MeshDepthMaterial 深度网格材质、custromMaterial 自定义材质、Points 粒子、PointsMaterial 点材质等。 阅读全文

摘要： 本文使用 React + Three.js 技术栈，实现粉丝突破 1000 的 3D 纪念页面，包含的主要知识点包括：Three.js 提供的光源、DirectionLight 平行光、HemisphereLight 半球光源、AmbientLight 环境光、奖牌素材生成、贴图知识、MeshPhysicalMaterial 物理材质、TWEEN 镜头补间动画、CSS 礼花动画等。 阅读全文

摘要： 虎年 🐅春节将至，本文使用 React + Three.js技术栈，实现趣味 3D创意页面。本文包含的知识点主要包括：ShadowMaterial、 MeshPhongMaterial等基本材质的使用、使用 LoadingManager展示模型加载进度、OrbitControls`的缓动动画、TWEEN简单补间动画效果等。 阅读全文

摘要： 为什么说是跌落梦境呢？小时候的梦想是成为科学家、成为宇航员、成为政界精英......但是随着成长，逐渐步入社会，成为朝五晚九的打工人，失去父母和学校的庇护... 阅读全文

摘要： 本文主要讲述通过 Three.js + Blender 技术栈，实现 Meta 公司炫酷的 3D 动态 Logo，内容包括基础模型圆环、环面扭结、管道及模型生成、模型加载、添加动画、添加点击事件、更换材质等。 阅读全文

摘要： 本文主要介绍，通过使用基于 vue技术栈的前端开发技术，在浏览器端调起摄像头，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理。本文内容分为背景介绍、实现效果、技术简介、代码实现、总结等部分组成。 阅读全文

摘要： 本文内容主要介绍，通过使用React+three.js技术栈，加载3D模型、添加3D文字、增加动画、点击交互等，配合样式设计，实现充满设计感的 🤢`酸性风格页面。 阅读全文