- 博客(43)
- 收藏
- 关注
RSS订阅原创 使用 Cannon.js 实现物理模拟效果
Three.js 场景搭建：从初始化场景到添加光源，为物理模拟提供了直观的三维展示平台。Cannon.js 物理世界创建：学会了定义刚体、设置物理属性，并实现物体的碰撞和运动模拟。物理与渲染的同步：理解了如何将物理引擎的计算结果同步到三维模型中，实现了视觉与物理效果的一致性。
2025-01-04 14:14:25
917
原创 使用Three.js创建交互式GUI调试界面
Three.js的GUI通常是通过dat.GUI库实现的，它是一个功能强大的JavaScript GUI框架，允许开发者轻松创建按钮、滑块、复选框等界面元素，并能实时控制Three.js中的对象。：将一个属性添加到GUI面板中，可以设置滑块的最小值和最大值。：为一个颜色属性添加颜色选择器。：将一组相关控件分组在一个文件夹中，便于管理。gui.open()：控制GUI面板的显示与隐藏。
2025-01-02 17:04:09
1049
原创 使用 Three.js 创建几何体粒子效果
今天,带大家一起看下如何将几何体由粒子组成的效果。通常情况下，Three.js 中的几何体材质会为每个面赋予一种颜色，这样的结果比较常见，如下图所示：然而，通过将几何体由粒子组成，我们可以实现更加酷炫和独特的视觉效果，让几何体看起来更具科技感和未来感。
2025-01-01 17:11:38
492
原创 用 vue3 实现新年快乐
基于 Vue 3 和 Three.js 的互动 3D 场景，结合了烟花效果、粒子系统和 3D 文字。首先，初始化了一个 Three.js 场景、相机和渲染器，并添加了基础的光源。通过 FireworksManager 管理烟花效果，随机生成并更新烟花。代码使用 FontLoader 加载字体并创建 3D 文字，并通过 TextGeometry 渲染带有发光效果的文字，添加到场景中。粒子效果通过 BufferGeometry 管理粒子的位置和颜色，实现了随机分布的彩色粒子上升效果。
2024-12-31 23:31:50
956
原创 Three.js滚动画案例精选
今天为大家带来 3 个基于滚动动画的网站 Demo，它们不仅视觉效果惊艳，而且每个案例的源码都已开源在 GitHub，方便大家学习和借鉴！
2024-12-30 22:07:10
342
原创 Three.js 字体
在 Three.js 中，我们可以通过FontLoader加载字体，并结合创建 3D 文本。加载字体是因为字体文件包含了字体的几何信息，例如字体的形状、大小、粗细等，而则是根据字体信息生成 3D 文本的几何体。在下面，我们将分别讲解加载字体和创建文本这两部分内容，并结合参数说明，让你对每一步都有深入理解。Three.js 使用FontLoader来加载字体文件（格式为.json），通过加载后的字体对象结合创建文本几何体。以下是使用FontLoader在。
2024-12-29 21:14:29
1542
原创 使用 Three.js 创建动态卡片动画
我们将学习如何使用 Three.js 创建一个具有动态卡片动画和粒子效果的 3D 场景。卡片的动态进入与点击旋转动画背景粒子效果通过鼠标交互实现卡片旋转。
2024-12-28 22:36:42
1102
原创 使用 Three.js 创建烟花粒子特效教程
在这一步，我们将设计一个Firework 类，用于模拟每个烟花的粒子效果。初始属性粒子的位置（positions）、速度（velocities）以及颜色（colors设置粒子生命周期（life），用于控制粒子的消失。初始化粒子：在烟花爆炸时，粒子会沿着随机方向散开。更新粒子状态：粒子随着时间更新位置、缩小大小，并模拟重力作用。销毁粒子：当粒子生命周期耗尽时，清除其资源。// 几何对象存储粒子数据// 粒子数量// 粒子位置// 粒子速度// 粒子颜色// 粒子大小。
2024-12-26 22:37:03
1230
1
原创 在 React 项目中安装和配置 Three.js
通过 React 管理组件化结构和应用逻辑，利用 Three.js 实现 3D 图形的渲染与交互。使用这种方法，我们可以在保持代码清晰和结构化的同时，实现令人惊叹的 3D 效果。在本文中，我们将以一个简单的示例为基础，详细讲解如何在 React 项目中集成 Three.js，并创建一个动态的 3D 场景。本文介绍使用最原始的three，如果想了解 react-three-fiber 可以参考这篇文章：https://mp.weixin.qq.com/s/y0gsws7DqvbT_iZRasenkA?
2024-12-25 22:32:46
942
原创 在 Vue3 项目中安装和配置 Three.js
Three.js 是一个轻量级的 WebGL 封装库，用于在浏览器中渲染复杂的 3D 图形。它提供了便捷的 API，可以快速构建 3D 场景、对象和动画。Vue.js 是一个渐进式 JavaScript 框架，擅长构建用户界面。其响应式数据绑定和组件系统使得复杂的交互开发更加简单。通过将 Three.js 和 Vue.js 结合，我们可以利用 Vue 的组件化和响应式特性，轻松管理和更新 3D 场景中的对象和状态，从而创建高效且交互性强的 3D 应用。
2024-12-24 22:57:14
826
原创 从 0 到 1 实现鼠标联动粒子动画
通过以上步骤，我们实现了一个基于 Canvas 的动态点线动画。每个点的位置根据鼠标位置发生变化，并且每两个点之间会根据距离绘制不同透明度的连接线。通过调整点的随机偏移，我们为每个点增加了动画效果。
2024-12-23 22:52:04
1280
原创 重磅消息，GitHub Copilot 推出免费使用了！
功能与限制GitHub Copilot 免费版为开发者提供每月 2000 次代码补全和 50 次 AI 对话请求。仅支持 Visual Studio Code 编辑器，需要通过 VS Code 扩展市场安装插件。提供基于 OpenAI 技术的支持，包括代码补全、文档生成、测试编写和代码优化。社区贡献学生、教师和热门开源项目维护者可以免费获得完整的 Copilot Pro 功能。免费版用户可以获得无限制的代码补全和所有高级 AI 功能。如何使用安装最新版本的 VS Code。
2024-12-21 21:41:48
780
原创 React和Three.js结合-React Three Fiber
（简称 R3F）是一个用于在 React 中渲染 3D 图形的库，它将 Three.js 与 React 的声明式编程模型结合起来。Three.js 是一个广泛使用的 JavaScript 库，用于在 Web 中创建 3D 场景、动画和互动效果，而 React 是一个流行的 JavaScript 库，专注于构建用户界面。
2024-12-20 21:43:19
1272
原创 Three.js推荐-可以和Three.js结合的动画库
Tween.js 是一个简单而强大的缓动库，专为在 three.js 中创建平滑的动画效果而设计。它能够控制数值、颜色、矢量等数据类型，并提供了多种缓动函数，如线性、弹簧、强化和缓冲等。GSAP（GreenSock Animation Platform）是一个功能强大的JavaScript动画库，它不仅能够与three.js无缝集成，还能为Web开发带来无与伦比的动画效果。GSAP以其高性能和灵活性而闻名，能够创建各种复杂的动画效果，包括缓动、时间轴、滚动效果、SVG动画和CSS动画等。
2024-12-19 22:19:18
1110
原创 Three.js入门-Raycaster鼠标拾取详解与应用
鼠标拾趣，也称为射线拾取（raycasting），是 Three.js 中实现用户与 3D 场景交互的关键技术。它通过模拟从用户鼠标位置发出的射线，检测这条射线与 3D 场景中物体的交点，从而实现物体的选择、高亮或其他交互效果。在 Three.js 中，鼠标拾趣的实现依赖于Raycaster类。Raycaster可以创建一条从相机出发，通过鼠标位置的射线，并与场景中的物体进行相交测试。这一过程涉及到屏幕坐标到设备坐标的转换，以及射线与物体几何体的相交计算。Raycaster。
2024-12-18 23:08:55
1085
原创 Three.js资源-模型下载网站
在使用 Three.js 进行 3D 开发时，拥有丰富的模型资源库可以大大提升开发效率和作品质量。以下是一些推荐的 Three.js 模型下载网站，它们提供了各种类型的 3D 模型，适合不同项目需求。无论你是需要逼真的建筑模型，还是简单的几何体，这些网站都能满足你的需求。
2024-12-17 22:58:13
2027
原创 Three.js资源-贴图材质网站推荐
在使用 Three.js 进行 3D 图形渲染时，纹理贴图是不可或缺的一部分。无论是创建复杂的材质效果，还是提升模型的细节感，都离不开合适的纹理贴图资源。今天，我为大家推荐一些优质的 Three.js 纹理贴图网站，这些网站提供了丰富的纹理资源，可以帮助你轻松提升项目的视觉效果。
2024-12-16 23:15:14
1357
原创 Three.js案例-360° VR看房
在 360° 看房功能中，我们需要在浏览器中创建一个类似虚拟现实的场景，使得用户能够查看环境的每一个角落。这一功能的实现本质上是利用 球体映射技术，即通过将全景图作为纹理贴图映射到一个反向的球体上，用户可以通过旋转视角来“环顾四周”。我们先来看一下效果。
2024-12-15 15:08:41
1738
2
原创 Three.js入门-模型加载
GLTF（GL Transmission Format）是一个基于 JSON 的开放格式，而 GLB 则是其二进制版本。它被设计为传输 3D 模型和场景的标准格式，包含模型的几何信息、材质、纹理、动画等。GLTF/GLB 被广泛应用于游戏、虚拟现实、增强现实等领域，尤其适合 Web 环境。
2024-12-14 21:30:28
1382
原创 Tiptap,: 富文本编辑器入门与案例分析
Tiptap 是一个开源的富文本编辑器，它基于构建，ProseMirror 本身是一个非常强大的文本编辑框架，提供了低级的操作 API，用于处理文档结构、格式化文本和管理编辑器状态。而 Tiptap 在此基础上提供了更高层的 API，使得开发者能够更加简便地进行开发，尤其适用于需要定制化或扩展功能的应用场景。Tiptap 的最大亮点在于它的可扩展性和灵活性，开发者不仅可以选择使用内置的基本功能，还可以通过插件来定制和扩展编辑器，满足不同需求的同时，也能降低开发成本。
2024-12-13 21:46:50
3817
原创 Three.js入门-从零开始创建雨场景
我们用 Three.js 创建了一个基本的下雨效果。设置基础的 Three.js 场景、相机和渲染器。创建一个地面物体来展示雨滴的碰撞。使用粒子系统（小球）模拟雨滴。动态更新雨滴的位置以产生下落效果。添加了简单的光源和响应式设计。
2024-12-12 22:09:26
625
原创 Three.js入门-阴影实现详解
通过 Three.js 的阴影功能，我们可以为 3D 场景添加更加真实和细腻的视觉效果。无论是简单的物体投射阴影，还是复杂的接收阴影效果，都可以通过调整光源、物体属性以及阴影质量来实现。在开发过程中，合理优化阴影的质量与性能，能够让我们的场景既具备高质量的视觉效果，又能保证较好的运行效率。
2024-12-11 22:41:42
648
原创 Three.js入门-材质详解，构建视觉真实感的核心
材质是一个对象，用于定义 3D 模型表面的视觉属性。它控制了光线与模型表面的交互方式。材质可以模拟多种真实世界的表面特性，例如金属的反光、木材的纹理或玻璃的透明度。在 Three.js 中，材质通常与几何体（Geometry）和网格（Mesh）结合使用，最终形成可见的 3D 对象。Three.js 提供的丰富材质库使得开发者可以创建各种逼真的效果。从简单的到高度自定义的，材质为 3D 场景的构建提供了无限可能。在开发过程中，了解不同材质的特性，合理选择和优化材质，可以显著提升渲染效率和视觉效果。
2024-12-10 22:56:49
1105
原创 Cesium-三维地球可视化应用
CesiumJS 是一个强大的开源 JavaScript 库，用于构建高性能的 3D 地图和地球可视化应用。无论你是从事地理信息系统（GIS）开发、数据可视化，还是需要展示空间数据，CesiumJS 都能提供灵活的解决方案。它以 WebGL 为核心，专注于大规模地理空间数据的实时渲染。CesiumJS 是 Cesium 平台的核心部分，与 Cesium ion 等服务无缝集成，支持从数据管理到可视化的一整套解决方案。
2024-12-09 22:08:59
1614
原创 Three.js入门-生成粒子
粒子效果本质上是一组微小的几何体，通过特定的逻辑动态渲染。数量众多，通常达到上千甚至上万。尺寸小，多为点或小平面。拥有个性化属性，如颜色、速度、生命周期等。在 Three.js 中，我们可以使用 Points类来创建粒子效果，它能够高效地渲染大量点状几何体。
2024-12-08 17:38:12
647
原创 Three.js入门-画布自适应
通过监听窗口大小变化事件，并调整渲染器和相机的参数，我们可以轻松实现 Three.js 画布自适应功能。结合设备像素比的优化，这种实现方式能够适配多种屏幕分辨率，为用户提供流畅的视觉体验。在使用 Three.js 时，画布自适应屏幕大小对于提供良好的用户体验非常重要。无论是全屏渲染还是嵌入式场景，都需要确保 Three.js 渲染的画布随着窗口大小的变化动态调整。可以看到，我将浏览器放大缩小，都不会让里面的立方体根据浏览器的大小进行调整。下面，我来介绍一下如何让立方体根据浏览器的大小进行调整。
2024-12-08 14:22:28
527
原创 Three.js案例-艺术交互体验
Sketch Three.js 是一个基于 Three.js 的 3D 创作和展示平台。它集合了丰富的动画设计和交互效果，通过视觉化的方式让人感受到 WebGL 的无限潜力。该网站包含了多个 3D 项目示例，从粒子动画到抽象的几何变形，每个作品都展现了 Three.js 的强大功能和艺术表现力。
2024-12-07 21:08:37
283
原创 Web3D渲染引擎介绍
随着技术的进步，三维可视化技术已经渗透到各行各业，不仅仅局限于游戏和娱乐领域，更多的是应用到数字孪生、智慧城市、建筑可视化等复杂场景中。Web3D 渲染引擎作为实现这一切的核心技术，已经发展出了多种开源和商业化的方案。今天，我们将介绍 Web3D 渲染引擎，它们各自具有独特的功能和应用场景，能够为开发者提供强大的支持。
2024-12-06 20:32:11
2513
原创 Three.js入门-什么是Three.js
最近在学图形学的东西，感觉打开了一个新世界。这几年的前端工作给我的一个感受就是，做着前端的东西，但是好像离前端很远。图形学虽然在浏览器上显示内容，但是实际上它是一个独立的领域，它有自己的理论和技术，这些技术和前端的技术有很多的交集，但是也有很多的不同。如果一开始钻入图形学的话，可能会有很多的概念和技术需要学习，这样可能会让人望而生畏。但是如果一开始我们学习 Three.js 的话，可能会让我们的学习更加的轻松。
2024-12-06 20:16:25
444
原创 用Blender生成城市群模型
在我们做数字孪生相关的项目的时候，会需要生成一些城市的模型，这时候我们可以使用 blender 来生成一些城市的模型。我们，先来看一下效果。在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a9d8c93a014541e0a8abb74980b2d486.png)
2024-12-04 21:46:39
1291
1
原创 Three.js入门-相机控件
在开始前，我们先看一下效果，我在场景中创建了一个立方体，当我们点击鼠标左键并拖动时，可以旋转相机视角，滚动鼠标滚轮可以缩放相机视角。相信看了动图效果，大家对相机控件有了一个直观的认识。它是 Three.js 中用于控制相机的工具，可以帮助用户在 3D 场景中自由旋转、缩放和平移相机，提供更加友好的交互体验。在 Three.js 中，相机（Camera）是决定如何渲染场景的关键元素。它是用户从哪个角度看到 3D 场景的“窗口”。
2024-12-01 18:25:05
580
原创 Three.js入门-常见几何体
这章节，我们将介绍 Three.js 中常见的几何体（Geometry），包括立方体、球体、圆柱体、平面、圆环、圆锥体等。几何体是构建 3D 模型的基础元素，通过不同的几何体可以创建出各种形状的物体。在 Three.js 中，几何体是由顶点、面、法线等数据组成的，通过材质（Material）的渲染，可以将几何体显示在屏幕上。不同的几何体有不同的属性和用途，可以根据需求选择合适的几何体来构建 3D 场景。函数：参数：参数：：球体的半径（默认值为 1）。：球体的经度分段数，越大越平滑（默认值为 8
2024-11-30 22:59:08
753
原创 Threejs入门-灯光
Three.js 提供了几种常见的光源类型：环境光（Ambient Light）、平行光（Directional Light）、点光源（Point Light）、聚光灯（Spot Light）。每种光源类型都具有不同的光照特性，适用于不同的场景需求。我们围绕一个球体案例，做灯光的讲解，首先，写入以下代码，创建一个球体。// 引入 Three.js 基础模块// 创建场景// 创建相机 (视角：45度，宽高比，近裁剪面，远裁剪面)75,0.1,1000// 设置相机位置// 创建渲染器。
2024-11-28 23:21:16
1085
原创 Threejs入门-三维坐标系
它是绝对的、唯一的，类似于地图中的全球坐标，所有的物体都通过相对于这个全局坐标系的数值来定位。当我们渲染一个物体时，Three.js 会将物体的世界坐标转换为相机坐标系中的坐标，再通过投影矩阵将其映射到屏幕坐标系中。Three.js 采用的是右手坐标系，这意味着如果你将右手的三个手指伸直，分别指向 X、Y 和 Z 轴的方向，你的拇指指向的方向即为 X 轴，食指指向的方向即为 Y 轴，而中指指向的方向则是 Z 轴的正方向。通过修改物体的 .position 属性，可以改变物体在场景中的位置。
2024-11-26 23:05:19
1161
原创 github推送仓库报没有权限
看到了这篇文章：https://docs.github.com/zh/authentication/keeping-your-account-and-data-secure/githubs-ssh-key-fingerprints。今天在push代码的时候遇到了如下的错误，换了ssh的key依旧告诉没有权限。仔细研究错误发现有个know_hosts。
2023-03-26 08:29:37
987
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人