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.mfbz.cn/a/422006.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安卓使用ExoPlayer出现膨胀类异常

1.导包 implementation com.google.android.exoplayer:exoplayer-core:2.15.1implementation com.google.android.exoplayer:exoplayer-ui:2.15.1 2.在Androidifest.xml加入权限&#xff0c;我这里加了忘了与读写权限 <uses-permission android:name"android.permissio…

Crime Scene Report 犯罪现场报告 Python字符串处理

Crime Scene Report 犯罪现场报告 Victim and Suspect were hiking along a remote trail in the Mojave Desert. By the time Victim and Suspect were able to hike back to the trailhead and receive medical attention, Victim was in critical condition. Suspect repor…

用HTML5的<canvas>元素实现刮刮乐游戏

用HTML5的&#xff1c;canvas&#xff1e;元素实现刮刮乐游戏 用HTML5的<canvas>元素实现刮刮乐&#xff0c;要求&#xff1a;将上面的“图层”的图像可用鼠标刮去&#xff0c;露出下面的“图层”的图像。 示例从简单到复杂。 简单示例 准备两张图像&#xff0c;我这…

鸿蒙学习day1基础语法 基础变量类型

在这里插入图片描述 什么是变量&#xff1a;变量就是一些数据 如125&#xff0c;‘字符串数据’ 通过一个符号来表示 变量的定义 方法 let 变量名&#xff1a;变量类型 ’ 各种数据’ ,let是关键字&#xff0c;系统给的用来定义变量的 let name: string 张亚洲; let age: …

《求生之路2》服务器如何选择合适的内存和CPU核心数,以避免丢包和延迟高?

根据求生之路2服务器的实际案例分析选择合适的内存和CPU核心数以避免丢包和延迟高的问题&#xff0c;首先需要考虑游戏的类型和对服务器配置的具体要求。《求生之路2》作为一款多人在线射击游戏&#xff0c;其服务器和网络优化对于玩家体验至关重要。 首先&#xff0c;考虑到游…

Flutter中Widget的生命周期

Widget生命周期&#xff1a; createState-initState-didChangeDependency-build-deactive-dispose 可通过WidgetsBinding类对widget生命周期的回调进行监控。 createState&#xff1a;StatefulWidget 中用于创建 State&#xff1b; initState&#xff1a;State 的初始化操作&am…

Ubuntu22.04下在Spark2.4.0中采用Local模式配置并启动pyspark

目录 一、前言 二、版本信息 三、配置相关文件 1.修改spark-env.sh文件 2.修改.bashrc文件 四、安装Python3.5.2并更改默认Python版本 1.查看当前默认Python版本 2.安装Python3.5.2 2.1 下载Python源码 2.2 解压源码 2.3 配置安装路径 2.4 编译和安装 2.5 验证安装…

【计算机网络_应用层】协议定制序列化反序列化

文章目录 1. TCP协议的通信流程2. 应用层协议定制3. 通过“网络计算器”的实现来实现应用层协议定制和序列化3.1 protocol3.2 序列化和反序列化3.2.1 手写序列化和反序列化3.2.2 使用Json库 3.3 数据包读取3.4 服务端设计3.5 最后的源代码和运行结果 1. TCP协议的通信流程 在之…

c++/c图的邻近矩阵表示

#include<iostream> using namespace std;#define MaxVerterNum 100 typedef char VerterType; typedef int EdgeType; typedef struct {VerterType vexs[MaxVerterNum]; // 存储顶点EdgeType edges[MaxVerterNum][MaxVerterNum]; // 存储邻接矩阵int n, e; // 顶点数和边…

基于粒子群优化算法的图象聚类识别matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于粒子群优化算法的图象聚类识别。通过PSO优化方法&#xff0c;将数字图片的特征进行聚类&#xff0c;从而识别出数字0~9. 2.测试软件版本以及运行结果展示 M…

【NTN 卫星通信】使用地面网络和卫星网络接入的终端应用场景

1 场景概述 卫星接入有广覆盖的特点&#xff0c; 可以改善地面接入网覆盖或无线条件差的地区(例如多径干扰)的服务可用性。对于高速移动中需要实时业务的终端&#xff0c;如IMS语音/视频会议&#xff0c;可以通过地面接入和卫星接入同时实现与5G系统的双连接&#xff0c;在地面…

HTML教程(3)——常用标签(1)

一、图片标签 1.场景&#xff1a;在网页中显示图片 2.基本写法&#xff1a; <img src""> 3.特点&#xff1a;单标签&#xff0c;img标签需要展示对应的效果&#xff0c;需要借助其属性进行设置 4常用属性&#xff1a; src&#xff1a;其属性值为目标图片…

爬取博客的图片并且将它存储到响应的目录

目录 前言 思想 注意 不多说解释了&#xff0c;贴代码吧 config.json Get_blog_img.py 把之前的写的代码也贴上 Get_blog_id.py 主函数 main.py 运行结果 前言 在上一篇博客中我们介绍了如何爬取博客链接 利用python爬取本站的所有博客链接-CSDN博客文章浏览阅读74…

Docker使用数据卷自定义镜像Dockerfile

文章目录 一、数据卷二、Dockerfile自定义centos 一、数据卷 数据卷(Data Volumes)是一个可供一个或多个容器使用的特殊目录&#xff0c;它将主机操作系统目录直接映射进容器&#xff0c;它可以提供很多有用的特性&#xff1a; 1.数据卷 可以在容器之间共享和重用 2.对数据卷的…

React富文本编辑器开发(二)

我们接着上一节的示例内容&#xff0c;现在有如下需求&#xff0c;我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能onKeyDown, 我们给 Editor添加事件&#xff1a; SDocor.jsx import { useState } from react; import { createEditor } from…

蓝桥杯练习系统(算法训练)ALGO-993 RP大冒险

资源限制 内存限制&#xff1a;64.0MB C/C时间限制&#xff1a;200ms Java时间限制&#xff1a;600ms Python时间限制&#xff1a;1.0s 问题描述 请尽情使用各种各样的函数来测试你的RP吧~~~ 输入格式 一个数N表示测点编号。 输出格式 一个0~9的数。 样例输入 0 样…

小乌龟操作Git

1、选择小乌龟作为git客户端 最近使用idea来操作git的时候频频出现问题&#xff0c;要么是提交代码的时候少了某些文件&#xff0c;导致克隆下来无法运行&#xff0c;要么是提交速度太慢。 反正是在idea中操作git体验非常不好&#xff0c;所以决定来换一种方式来操作git。从网…

利用FFMPEG 将RTSP流的音频G711 转码为AAC 并 推流到RTMP

之前我们的视频转码项目中 是没有加入音频的 现在 需要加入音频 &#xff0c;由于RTMP只支持AAC的 音频流 而有的RTSP流的音频编码并不是AAC 大多数都是G711编码 还分为G711A 和G711U 之前用ffmpeg命令行可以直接 完成转码 并推送到RTMP 但是考虑到无法获取更详细的状…

4.Java---方法+重载

方法 方法的调用是需要开辟内存的,方法调用结束内存就被销毁了. 下面将介绍一个经典的错误标准的0分的示意! 我们日常中写交换两个数字的代码的时候都会用如下的方法进行描述: 你是不是觉得自己写的特别对!终于可以独立写一个小小的函数了? 下面运行一下看看结果 哦莫!怎么…

解决ODOO12 恢复数据库提示内存不够报错

1. 现象 点击 ‘restore database’ 控制台报错&#xff1a; 2. 解决措施 a. 进入启动脚本的文件夹 cd odoo/odoo-12.0/输入命令 ./odoo-bin --addons-pathaddons --databaseodoo --db_userodoo --db_passwordodoo --db_hostlocalhost --db_port5432 -i INITb. 刷新页面…
最新文章