💎 Three.js 和 Cesium.js 案例 - 为爱发电 - 只做开源 -

Web3D TOP1 - 👋 - 分享知识 - ⭐ - 点星助力 - ⚡ - 更新到死

三维开发者学习、分享、展示、交流、合作🤝。(接单创业、加入管理仓库联系作者🍉)

• 最新案例仓库 - 预览地址 https://openthree.github.io/three-github-examples/ (频繁更新)

• 此仓库更新较少，最新频繁更新的仓库已经迁移到 https://github.com/OpenThree/three-github-examples/

• github dev 分支实时预览 http://z2586300277.github.io/three-cesium-examples

• 在线投稿 https://z2586300277.github.io/submit/submit.html (分享你的案例，让更多人看到✨)

• 人生旅程中的 Web3D 知识记录, 复习回顾, 高效查阅, 资源共享, 为爱发电。(fork 一下提交自己作品🍀)

• 注：尽量不要提交超过200k的文件，image 控制压缩到 10k，在线压缩 - 链接

👋 作者链接 （自行添加开发者的主页）

🌳 创作

• ✋ 如果这些里面有案例帮助了您，有意的话您可以提交您的作品，让爱传递给更多开发者

• 👏 加入管理仓库的开发者，可自行创建自己的分支，或者在 dev 分支直接开发

• 📑 fork 仓库开发 - 增加用户信息 - 提交代码 - 合并到 dev

🌿 分布式仓库开发模式 https://github.com/z2586300277/three-cesium-examples-self

• 运行框架 - 确保联网(three、gsap等依赖引入) - 服务端口指向index.html 如nginx apache liveServer等

1. 创作者可以在 config/author.js 录入你的开发者信息,然后你提交的案例关联上 id 就会展示作者信息。

2. 将案例 js 放入目录 cesiumExamples/threeExamples 中的文件夹中 如 threeExamples/basic 中放入 test.js, test.jpg, 或者目录 test[test.js, test.jpg]

3. 在 config 目录下 找到 threeExamples 录入案例信息, 内部的资源指向与你的 js 和 image 资源路径对应

4. 注: 为保证轻量化 案例展示图片资源使用 - https://yasuo.xunjiepdf.com/img/ (自定义压缩至 10k 以内)

5. 涉及其他依赖 js,可将 module.js 放到 js 目录 如 dat.gui,gasp ,注入方式 config/config.js 可见

6. 音视频模型存储等一些可以公用的资源 files 文件夹下,涉及文件资源尽量引用外部 url,保证仓库轻量化

目录结构
├── assets/             # 运行框架
├── threeExamples/      # three.js 案例代码目录
├── cesiumExamples/     # cesium 案例代码目录
├── js/                 # 第三方js依赖存放处
├── files/              # 模型、图片等资源
├── config/             # 配置项
│   ├── site            # 网站配置
│   ├── host            # 主机配置
│   ├── links           # 导航链接
│   ├── lang            # 语言配置
│   ├── author          # 作者信息
│   ├── three-examples  # three 案例配置
│   ├── cesium-example  # cesium 案例配置
│   └── config          # 总配置
├── .gitignore          # git 忽略文件
├── index.html          # 入口页面
├── LICENSE             # 开源协议
└── README.md           # 项目说明

// HOST 自动获取 当前域名/ip 防止部署环境不同 资源引用失效
{
    id: '列表唯一id',
    name: '名称',
    name_en: '英文名',
    tag: '标签名字-背景颜色-字体大小',
    tip: '提示信息',
    author: '作者id',
    referUrl: '案例参考来源地址', // 如 没有可不配置
    downloadUrl: '附带下载的url', // 如three.js => 高级案例 => 桃花亭 配置后refer将不显示
    imporver: '优化作者', // 优化作者的id
    links: [{ url: '连接', name: '名称' }] //配置link imporver 将不显示
    image: HOST + 'threeExamples/basic/test.jpg', // 对应窗口图
    codeUrl: HOST + 'threeExamples/basic/test.js', // js module格式 大多数案例形式
    htmlUrl: HOST + 'threeExamples/test/test.html' // html 在线格式 如 three案例 => 粒子 => 随机粒子 粒子行星
    openUrl: '预览外联地址url', // openurl 和 codeurl 为二选一形式 如 可见桃花亭 su7 案例
    githubUrl: '附带github 仓库的url', // 如 three.js => 开源作品 => su7
    meta: {
        title: '此案例网站标题',
        keywords: '搜索引擎关键字',
        description: '此案例页面描述'
    }
}

🏠 搭建自己的分布式存储仓库

• 架构设计是以请求资源形式访问代码,如codeUrl image，等资源文件不局限于存储在本仓库中，例如存储在你自己的服务器，然后 url 访问到你的文件即可，类似于请求接口。

• 然后在此仓库仅配置 案例信息即可, 可参考 three 案例 => 扩展功能 => 3D 地图 案例的配置

• 因github.io是https, https 访问限制 http 会被自动禁止, 建议搭建自己的 github page ,使用 github 充当自己的资源服务器。

• 如：我的一些分布式资源存储在 https://github.com/z2586300277/3d-file-server 仓库下 —— 访问服务: https://z2586300277.github.io/3d-file-server/

• github page 搭建 => 创建仓库 => 进入管理页面 => setting => pages => Build and deployment => source (depoly from a branch) => branch 选择对应分支 => save 即可

• 注： github page 搭建完成后 浏览器直接访问如 https://xxxx.github.io/xxxx/ 目录404正常现象，路径精确到文件后访问可正常

• 参考访问案例 如 cesium 案例 => 离线地图 => 内网高德

• 搭建视频可参照 https://www.bilibili.com/video/BV12T94YhEQA/

📦 自行部署 - 助力企业

• 可通过 config/links 文件修改 所有的链接和 logo, 替换成自己的官网或者链接地址。

💎 Three.js and Cesium.js Examples - Built with Passion, Open Source Forever

Web3D TOP1 - 👋 - Share Knowledge - ⭐ - Star to Support - ⚡ - Updated Continuously

A place for 3D developers to learn, share, showcase, connect, collaborate, and take projects 🤝. (Contact the author if you want to join repository management 🍉)

• GitHub dev branch live preview: http://z2586300277.github.io/three-cesium-examples
• Online submission: https://z2586300277.github.io/submit/submit.html (share your example and let more developers discover it ✨)
• A long-term Web3D knowledge log for review, fast lookup, and resource sharing. (fork and submit your work 🍀)
• Note: please avoid submitting files larger than 200 KB. Compress images to about 10 KB: link

🌳 Contribution Guide

• ✋ If any example helped you, you are welcome to submit your own work and pass it on.

• 👏 Developers in repository management can create their own branches, or contribute directly on dev.

• 📑 Standard flow: fork repository -> add contributor info -> submit code -> merge into dev.

• 🌿 Distributed repository model: https://github.com/z2586300277/three-cesium-examples-self

• Run with any static server (internet required for CDN dependencies like three.js and gsap), and point service root to index.html (nginx / apache / liveServer, etc.).

1. Add your author profile in config/author.js. When your example references your author ID, your info will be displayed automatically.
2. Put your example files under cesiumExamples/ or threeExamples/, for example threeExamples/basic/test.js with test.jpg.
3. Register your example in the corresponding config file under config/ (three-examples.js or cesium-examples.js), and ensure paths match your JS/image files.
4. Keep preview images lightweight. Recommended compression tool: https://yasuo.xunjiepdf.com/img/ (target size: <= 10 KB).
5. For extra JS dependencies, place files in js/ (such as dat.gui or gsap) and inject them via config/config.js.
6. Put shared assets (models/audio/video/textures) in files/. Prefer external URLs for large resources to keep this repo lightweight.

Directory structure
├── assets/             # Runtime framework
├── threeExamples/      # Three.js example sources
├── cesiumExamples/     # Cesium example sources
├── js/                 # Third-party JS dependencies
├── files/              # Shared models/textures/media assets
├── config/             # Configuration files
│   ├── site            # Site metadata
│   ├── host            # Host configuration
│   ├── links           # Navigation links
│   ├── lang            # Language configuration
│   ├── author          # Author registry
│   ├── three-examples  # Three.js examples
│   ├── cesium-example  # Cesium examples
│   └── config          # Main runtime config
├── .gitignore          # Git ignore file
├── index.html          # Entry page
├── LICENSE             # Open-source license
└── README.md           # Project documentation

// HOST is auto-resolved from current domain/IP to avoid broken asset paths across deployments.
{
    id: 'unique id in list',
    name: 'Chinese name',
    name_en: 'English name',
    tag: 'tag text-backgroundColor-fontSize',
    tip: 'tooltip message',
    author: 'author id',
    referUrl: 'reference source url', // optional
    downloadUrl: 'download url', // optional; if configured, referUrl is hidden
    imporver: 'improver id', // optional
    links: [{ url: 'link url', name: 'link name' }], // if configured, imporver is hidden
    image: HOST + 'threeExamples/basic/test.jpg', // preview thumbnail
    codeUrl: HOST + 'threeExamples/basic/test.js', // ES module style (most common)
    htmlUrl: HOST + 'threeExamples/test/test.html', // standalone HTML example
    openUrl: 'external preview url', // choose either openUrl or codeUrl
    githubUrl: 'github repository url', // optional
    meta: {
        title: 'page title',
        keywords: 'seo keywords',
        description: 'page description'
    }
}

🏠 Build Your Own Distributed Asset Repository

• This project uses URL-based resource loading (codeUrl, image, etc.), so files do not have to live in this repository.
• You can host assets on your own server or another repository, then reference them directly by URL in config.
• In this repository, you only need to maintain example metadata/config entries.
• Because GitHub Pages runs on HTTPS, mixed HTTP resources may be blocked. Use HTTPS asset URLs.
• Example distributed asset repo: https://github.com/z2586300277/3d-file-server
• Example asset service: https://z2586300277.github.io/3d-file-server/
• GitHub Pages quick setup: create repo -> settings -> pages -> build and deployment -> source (deploy from a branch) -> select branch -> save.
• If https://xxxx.github.io/xxxx/ returns 404, try a full file path first to confirm resources are deployed correctly.
• Reference case: Cesium -> Offline Map -> Intranet Gaode.
• Video guide: https://www.bilibili.com/video/BV12T94YhEQA/