小红花·文摘
  • 首页
  • AI Tokens🪙
  • 排行榜🏆
  • 直播
  • FAQ
沉浸式翻译 immersive translate
Dify.AI
如何在真实地图上构建灾害模拟:使用 Mapbox GL JS 和 Three.js 实现动画画布图层与倒塌的 3D 建筑

本文介绍在网页地图上实现灾害模拟动画的方法,核心原则是地面效果须用地图坐标而非屏幕坐标绘制。以海啸和地震为例,讲解将画布注册为地图数据源、加载真实高程、用广度优先搜索模拟洪水、叠加视频纹理,以及用 three.js 在地图 GL 上下文中渲染倒塌建筑、碎片与尘土,并抖动容器而非相机。

如何在真实地图上构建灾害模拟:使用 Mapbox GL JS 和 Three.js 实现动画画布图层与倒塌的 3D 建筑

freeCodeCamp.org freeCodeCamp.org · 2026-10-15T04:40:21Z

作者原计划为博客添加Live2D吉祥物,但素材为Minecraft皮肤,遂改用three.js实现3D方块人。尝试minecraft-skin-viewer后因头部控制受限,换用skinview3d,支持部件级操作。实现游泳系统:屏幕自适应距离、预计算反弹轨迹、侧身朝向、划水同步,并移除收起功能,支持拖动记忆。最终吉祥物具备眼睛跟随、呼吸、游泳和拖动功能,接受现实并做到最好。

我以为能给站点请个会动的吉祥物,结果来了个 64×64 的方块人

九仞之行 九仞之行 · 2026-08-22T01:54:00Z
树莓派上跑3D录像带店:不用WebGL用纯CSS实现

Halcyon Video是一个开源项目,将Jellyfin媒体库转化为可探索的3D录像带租赁店。它用three.js构建,支持按需渲染以节省资源,包含布料模拟塑料袋、真实推荐系统和硬核租赁模式。项目提供2.5D纯CSS模式,可在树莓派运行,并支持远程访问。它不接受PR,专注怀旧体验,将情感记忆工程化。

树莓派上跑3D录像带店:不用WebGL用纯CSS实现

极道 极道 · 2026-08-11T22:16:00Z
使用Blender和Three.js进行3D网页开发

本文介绍了一门课程,教授如何使用Blender和Three.js从零开始构建互动3D“舒适咖啡馆”作品集。课程内容包括细分建模、纹理绘制和性能优化,强调高性能和互动性。最终将完成两个完整的3D场景,并掌握部署流程。

使用Blender和Three.js进行3D网页开发

freeCodeCamp.org freeCodeCamp.org · 2026-04-22T20:13:12Z
使用Three.js、Blender和JavaScript创建可爱的房间作品集

本课程教授如何使用Three.js和Blender设计互动3D作品集,涵盖3D建模、模型优化和纹理烘焙等技术,最终创建专业的Three.js项目,展示个人创作。适合希望提升技能的学习者。

使用Three.js、Blender和JavaScript创建可爱的房间作品集

freeCodeCamp.org freeCodeCamp.org · 2025-11-19T12:10:29Z
使用Three.js和Blender进行创意网页开发

本课程适合初学者,涵盖Three.js和Blender的基础知识,内容包括3D建模和网页应用,时长6小时。

使用Three.js和Blender进行创意网页开发

freeCodeCamp.org freeCodeCamp.org · 2025-11-05T22:37:10Z
零代码生成 3D 游戏:基于 Amazon Q Developer CLI 和 Three.js 的实践

Amazon Q Developer 是一款基于 AI 的对话助手,帮助用户构建和管理 AWS 应用。结合 three.js 引擎,用户可以无代码生成游戏广告视频,提高生产效率并降低成本,独立创建和修改游戏项目,实现批量生成广告素材。

零代码生成 3D 游戏:基于 Amazon Q Developer CLI 和 Three.js 的实践

亚马逊AWS官方博客 亚马逊AWS官方博客 · 2025-07-17T04:09:42Z
3D 可视化利器:轻量高效的 Web 图形引擎 | 开源日报 No.667

three.js 是一个轻量级的 JavaScript 库,用于创建网页三维图形,支持多种渲染器和动态交互。Megacity-Metro 是一款支持 128+ 玩家在线射击的游戏,利用最新技术提升用户体验。Data-Science-Gen-AI-Playlist-2024 提供多种数据科学学习资源,涵盖多个主题和项目。nlw-expert-react 是一个将音频笔记转换为文本的应用,使用 React 和 TypeScript 开发。

3D 可视化利器:轻量高效的 Web 图形引擎 | 开源日报 No.667

开源服务指南 开源服务指南 · 2025-07-16T07:36:04Z
使用Three.js和React实现逼真的3D空气曲棍球桌

本文介绍了一款基于浏览器的实时多人3D空气曲棍球游戏,采用React、Three.js和Yjs技术。玩家通过鼠标控制球拍,享受低延迟的互动体验。文章分析了系统的目的、架构、技术栈及开发中的权衡。

使用Three.js和React实现逼真的3D空气曲棍球桌

DEV Community DEV Community · 2025-05-14T05:09:15Z
🕯️ 寺庙道场:仪式殿堂会话 – 一个基于Three.js构建的互动3D音乐祭坛

Ritual Chamber v1.0.0是一个互动数字祭坛,将音乐播放转化为神圣仪式。每首曲目作为卷轴,仅能播放一次,强调专注体验。该项目结合音乐、神秘故事和技术,旨在重塑数字空间为有意、神圣的互动。

🕯️ 寺庙道场:仪式殿堂会话 – 一个基于Three.js构建的互动3D音乐祭坛

DEV Community DEV Community · 2025-04-18T09:55:19Z
阳极氧化铝VR重力卡片

这是我本月的#CodePenChallenge作品“阳极氧化铝VR重力卡片”。使用#gsap和#three.js实现,卡片点击时平滑翻转并稍微下落,伴随弹跳动画。

阳极氧化铝VR重力卡片

DEV Community DEV Community · 2025-04-07T21:12:12Z
6个令人惊叹的WebGL和Three.js作品集

我研究了WebGL和Three.js,发现了六个激发灵感的作品集,展示了设计师如Robin Mastromarino和Keita Yamada在3D动画方面的技术和创意。

6个令人惊叹的WebGL和Three.js作品集

DEV Community DEV Community · 2025-03-23T17:29:49Z
在我的作品集中展示Three.js,寻求反馈

一位刚获得全栈开发证书的程序员希望在个人作品集中展示对three.js的兴趣。他创建了一个显示当前技术栈的球体,但不确定是否适合放在“关于我”部分,寻求反馈。

在我的作品集中展示Three.js,寻求反馈

DEV Community DEV Community · 2025-02-23T11:57:07Z
如何使用Three.js编写Crossy Road游戏克隆

本教程介绍如何使用Three.js制作移动游戏Crossy Road的克隆版。游戏目标是让角色在静态和动态障碍物中移动,避免被车辆撞击。内容包括场景、相机、光源设置,玩家和地图绘制,车辆动画及碰撞检测等。

如何使用Three.js编写Crossy Road游戏克隆

freeCodeCamp.org freeCodeCamp.org · 2025-02-20T23:29:26Z
我如何使用React和ThreeJS构建我的作品集

文章提到Shivam Kaushal的完整作品集,包含多个项目链接。

我如何使用React和ThreeJS构建我的作品集

DEV Community DEV Community · 2025-02-03T16:17:44Z
three.js?让我们在CSS中创建3D立方体

文章讨论了如何使用CSS和three.js创建3D立方体的技术和方法。

three.js?让我们在CSS中创建3D立方体

DEV Community DEV Community · 2024-12-19T12:25:18Z
我的第一次开发

我创建了一个个人网站,展示唱片公司的目录,使用three.js实现专辑导航,代码4500行,耗时一周。欢迎访问并反馈,代码已公开在GitHub上。

我的第一次开发

DEV Community DEV Community · 2024-11-07T01:30:04Z

本文介绍了一种用于提高实时动画和图像质量的升频算法,作者创建了基于Three.js的插件,通过滤波和图像增强实现实时升频。该插件适用于各种平台,提高图像清晰度和对比度。文章提供了代码示例和使用方法。

为Three.js编写升频渲染插件

DEV Community DEV Community · 2024-09-01T19:05:37Z

本文介绍了使用Three.js构建太阳系的过程,包括初始化项目、设置场景、相机和渲染器,添加星空背景和旋转星星,创建太阳和行星,以及给出相应的示例代码。

使用Three.js构建太阳系

DEV Community DEV Community · 2024-08-22T06:14:14Z

WebGLRenderer已不再支持WebGL 1,需迁移至WebGL 2。模板缓冲区属性默认关闭,需手动启用。移除了WebGLMultipleRenderTargets,使用新属性进行多渲染目标。手部追踪需手动设置,InteractiveGroup的API已更改,需使用新方法注册事件监听器。HTMLImageElement的纹理处理方式也进行了调整,简化了应用开发。

threejs 笔记

时间的朋友 时间的朋友 · 2024-03-18T13:32:35Z
  • <<
  • <
  • 1 (current)
  • 2
  • >
  • >>
👤 个人中心
在公众号发送验证码完成验证
登录验证
在本设备完成一次验证即可继续使用

完成下面两步后,将自动完成登录并继续当前操作。

1 关注公众号
小红花技术领袖公众号二维码
小红花技术领袖
如果当前 App 无法识别二维码,请在微信搜索并关注该公众号
2 发送验证码
在公众号对话中发送下面 4 位验证码
小红花技术领袖俱乐部
小红花·文摘:汇聚分发优质内容
小红花技术领袖俱乐部
Copyright © 2021-
粤ICP备2022094092号-1
公众号 小红花技术领袖俱乐部公众号二维码
视频号 小红花技术领袖俱乐部视频号二维码