2024年10个超炫酷的前端 3D 开源项目,那几个你用?

本文将分享 10 个超炫酷的前端 3D 开源项目。从令人惊叹的视觉效果到富有创新概念的交互体验,这些项目展示了前端技术的无限可能。无论你是新手还是经验丰富的开发者,都值得一探究竟!

蛋仔派对(three.js版)

利用 React + threejs 技术栈构建的第三人称Q版闯关类游戏。

图片

Github:https://github.com/Steve245270533/react-three-egg

历史时间线

通过 3D 地球的形式直观地显示各个历史时间段及历史地图。

图片

Github:https://github.com/gonnavis/Timeline

3D 球体抽奖程序

年会抽奖程序,基于 Express + Three.js 的 3D 球体抽奖程序,奖品,文字,图片,抽奖规则均可配置,抽奖人员信息Excel一键导入,抽奖结果Excel导出,给你的抽奖活动带来全新酷炫体验。

图片

Github:https://github.com/moshang-xc/lottery

three-sokoban-live

基于 Vite、TypeScript、Three.js 的 3D 推箱子游戏。

图片

 

3d-earth

使用 Webpack 5 + TypeScript + Threejs 搭建的 3D 地球。

图片

Github:https://github.com/ertugrulcetin/racing-game-cljs

T-Rex Run

T-Rex Run 3D 是一款模仿 Google Chrome 霸王龙快跑而制作的 ThreeJS WebGL 游戏。

图片

Github:https://github.com/Priler/dino3d

Rubik Cube

ThreeJs 制作的魔方游戏,支持自定义魔方阶级(目前界面上只开放 2 - 10 阶魔方)。

图片

Github:https://github.com/pengfeiw/rubiks-cube

3D 模型查看器

使用 Vue 3 、Three.js 的 3D 模型查看器。

图片

Github:https://github.com/hujiulong/vue-3d-model

探索three.js

一个免费的 Three.js 入门书籍:《探索 three.js》

图片

在线阅读:https://discoverthreejs.com/zh/book/

喜欢的话点点赞收藏一下谢谢

总结:在不通的场景使用不同的事情。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/503745.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HotFix原理学习 IL2CPP 学习

原文链接:Unity 游戏用XLua的HotFix实现热更原理揭秘-CSDN博客 本文通过对XLua的HoxFix使用原理的研究揭示出来这样的一套方法。这个方法的 第一步:通过对C#的类与函数设置Hotfix标签。来标识需要支持热更的类和函数。第二步:生成函数连接器…

Node.js基础---Express中间件

1. 概念 1.什么是中间件 中间件(Middleware),特指业务流程的中间处理环节 2. Express 中间件的调用流程 当一个请求到达 Express 的服务器后,可以连续调用多个中间件,从而对这次请求进行预处理 3. Express 中间件格式 Express 的中间件&…

基于ssm游泳会员管理系统+vue论文

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统游泳会员信息管理难度大,容错率低&#xff0c…

什么是VR虚拟现实|虚拟科技博物馆|VR设备购买

虚拟现实(Virtual Reality,简称VR)是一种通过计算机技术模拟出的一种全新的人机交互方式。它可以通过专门的设备(如头戴式显示器)将用户带入一个计算机生成的虚拟环境之中,使用户能够与这个虚拟环境进行交互…

【Linux实践室】Linux初体验

🌈个人主页:聆风吟 🔥系列专栏:Linux实践室、网络奇遇记 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 一. ⛳️任务描述二. ⛳️相关知识2.1 🔔Linux 目录结构介绍2.2 🔔Linux …

vue 使用vue-scroller 列表滑动到底部加载更多数据

安装插件 npm install vue-scroller -dmain.js import VueScroller from vue-scroller Vue.use(VueScroller)<template><div class"wrap"><div class"footer"><div class"btn" click"open true">新增</d…

vue2 开发记录

el-select 如何修改选择项的样式/el-select-dropdown__item 文字上下显示 测试代码 <div stylemargin-left: 100px><!-- 测试代码--><el-select filterablesizemini><div classxxx-el-select><el-optionv-foritem in [{key:1,des:2,…

【重温设计模式】装饰模式及其Java示例

装饰模式的介绍 在众多设计模式中&#xff0c;有一种叫做装饰模式&#xff0c;它以一种独特的方式赋予了代码更多的灵活性。 装饰模式是一种结构型设计模式&#xff0c;它允许我们在运行时动态地为对象添加新的行为。这就像是我们在装饰一个房间时&#xff0c;可以随意添加或更…

MySQL进阶之(三)InnoDB数据存储结构之数据页结构

三、InnoDB数据存储结构之数据页结构 3.1 数据库的存储结构3.1.1 MySQL 数据存储目录3.1.2 页的引入3.1.3 页的概述3.1.4 页的上层结构 3.2 数据页结构3.2.1 文件头和文件尾01、File Header&#xff08;文件头部&#xff09;02、File Trailer&#xff08;文件尾部&#xff09; …

构造pop链

反序列化视频笔记 第一步&#xff1a;找到目标触发echo调用$flag 第二步&#xff1a;触发_invoke函数调用appeng函数$varflag.php&#xff08;把对象当成函数&#xff09; 第三步&#xff1a;给$p赋值为对象&#xff0c;即function成为对象Modifier却被当成函数调用&#xff…

c++_leetcode_寻找峰值

目录 一、寻找峰值的示例 二、官方实现代码及解释 1、官方测试结果&#xff1a; 2、代码解释&#xff1a; 3、解题思路&#xff1a; 三、我的暴力解决 1、测试一&#xff1a; 2、测试二&#xff1a; 3、最终“暴力求解”代码&#xff1a; 4、官网提交测试通过&#xf…

《无线网络技术》考试版笔记

第一章 无线网络介绍 什么是多径效应&#xff0c;如何去克服&#xff1a; 在发射机和接收机之间没有明显的直线路径时&#xff0c;就会产生多径传播。如果两个信号彼此叠加&#xff0c;那么接收设备就无法正确解调信号&#xff0c;无法还原为它的原始数据形式。 可以稍微调整接…