Three.js 的前端 WebGL 页面开发合集
「30 Three.js 的前端 WebGL 页面合集（日本 开源项目）」
/~46363Y8ZWf~:/
链接：https://pan.quark.cn/s/1644aa234f1f
项目简介
本项目是一个使用 Three.js 进行前端 3D 图形开发的示例集合。每个子页面都是一个独立的创意或技术实现，旨在展示 WebGL 和 Three.js 在各种场景下的应用能力。
为了方便学习和参考，每个子页面在
src/containers对应的目录下，都配有详细的README.md文件，其中包含了该页面的开发说明和核心技术点总结。在线访问地址
您可以在以下地址预览所有页面效果：
内容概览
项目包含以下丰富多样的 3D 示例（持续更新中）：
元人类 (开发优化中)
奥运主题冰墩墩雪容融
海岛
地球
数字地球
艾尔登法环
阿狸的多元宇宙
悬浮文字
3D漫画
基于滚动的3D布局
数字城市 (开发优化中)
脸书 Meta Logo
虎年春节创意
全景侦探小游戏
SegmentFault突破1000粉纪念
虚拟主播 (开发优化中)
动植物细胞结构 (开发优化中)
车 (开发优化中)
塞尔达：旷野之息林克 (开发优化中)
标注"⚠"的页面表示正在开发和优化中。
项目运行与开发
本项目使用 Create React App 脚手架构建。
可用脚本
在项目目录中，你可以运行：
yarn start在开发模式下运行应用。打开 http://localhost:3000在浏览器中查看。当你做出更改时，页面会重新加载。你可以在控制台中看到任何 lint 错误。
yarn test在交互式监听模式下启动测试运行器。有关详细信息，请参阅关于运行测试的章节。
yarn build将应用构建到
build文件夹以用于生产环境。它会将 React 正确地打包为生产模式并优化构建以获得最佳性能。构建文件会被压缩，文件名包含哈希值。你的应用已准备好部署！有关详细信息，请参阅关于部署的章节。
yarn eject注意：这是一个单向操作。一旦
eject，你将无法返回！如果你对构建工具和配置选择不满意，可以随时
eject。此命令将从你的项目中移除单一的构建依赖。相反，它会将所有配置文件和传递性依赖（webpack、Babel、ESLint 等）直接复制到你的项目中，以便你完全控制它们。除了eject之外的所有命令仍然有效，但它们将指向复制后的脚本，以便你可以对其进行调整。此时，你将独立进行所有操作。你无需强制使用
eject。精简的功能集适用于中小型部署，你不必觉得有义务使用此功能。然而，我们理解当你准备好时，如果无法自定义配置，这个工具将不那么有用。了解更多
你可以在 Create React App 文档中了解更多信息。
要学习 React，请查看 React 文档。
其他核心主题
代码分割：此部分已移至此处。
分析打包大小：此部分已移至此处。
制作渐进式 Web 应用：此部分已移至此处。
高级配置：此部分已移至此处。
部署：此部分已移至此处。
yarn build压缩失败：此部分已移至此处。版权声明
页面中涉及的图文和模型素材仅用于个人学习、研究和欣赏，请勿进行二次修改、非法传播、转载、出版、商用及进行其他任何形式的获利行为。
本项目是一个基于Three.js的3D图形开发示例集合，包含元人类、奥运吉祥物、数字地球等多样化的WebGL应用展示。项目采用CreateReactApp构建，提供开发、测试和部署脚本。每个示例都配有详细说明文档，部分页面仍在优化中。项目强调学习用途，禁止商用或二次修改。在线演示地址提供实时预览功能。Content overview ・ コンテンツの詳細
1\]. [元人类 ・ Metahuman ・ メタヒューマン](https://dragonir.github.io/3d/#/human "元人类 ・ Metahuman ・ メタヒューマン")
3\]. [海岛 ・ IsLand ・ 小島](https://dragonir.github.io/3d/#/ocean "海岛 ・ IsLand ・ 小島")
5\]. [数字地球 ・ Digital Earth ・ デジタルグローブ](https://dragonir.github.io/3d/#/earthDigital "数字地球 ・ Digital Earth ・ デジタルグローブ")
7\]. [阿狸的多元宇宙 ・ Running Fox ・ アリの多元宇宙](https://dragonir.github.io/3d/#/metaverse "阿狸的多元宇宙 ・ Running Fox ・ アリの多元宇宙")
9\]. [3D漫画 ・ Three-dimensional Comics ・ 立体漫画](https://dragonir.github.io/3d/#/comic "3D漫画 ・ Three-dimensional Comics ・ 立体漫画")
11\]. [⚠ 数字城市 ・ Digital City ・ デジタルシティ](https://dragonir.github.io/3d/#/city "⚠ 数字城市 ・ Digital City ・ デジタルシティ")
13\]. [虎年春节创意 ・ Chinese Year of Tiger ・ 虎の旧正月](https://dragonir.github.io/3d/#/lunar "虎年春节创意 ・ Chinese Year of Tiger ・ 虎の旧正月")
15\]. [SegmentFault突破1000粉纪念 ・ 1000 Fans ・ 千人の信者](https://dragonir.github.io/3d/#/segmentfault "SegmentFault突破1000粉纪念 ・ 1000 Fans ・ 千人の信者")
17\]. [⚠ 动植物细胞结构 ・ Cell Structure ・ 細胞構造](https://dragonir.github.io/3d/#/cell "⚠ 动植物细胞结构 ・ Cell Structure ・ 細胞構造")
19\]. [⚠ 塞尔达：旷野之息林克 ・ Zelda: Breath of the Wild ・ ゼルダ：ブレスオブザワイルド](https://dragonir.github.io/3d/#/car "⚠ 塞尔达：旷野之息林克 ・ Zelda: Breath of the Wild ・ ゼルダ：ブレスオブザワイルド")
⚠：正在开发优化中 ・ Under development and optimization ・ 開発中および最適化中
