├── LICENSE ├── README.md ├── cesium-cra ├── .gitignore ├── .vscode │ └── settings.json ├── README.md ├── craco.config.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── components │ │ └── CesiumScene │ │ │ ├── index.d.ts │ │ │ ├── index.module.css │ │ │ └── index.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── cesium-createvue ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── env.d.ts ├── index.html ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── components │ │ └── CesiumScene.vue │ ├── main.css │ ├── main.ts │ ├── router │ │ └── index.ts │ ├── store │ │ └── index.ts │ └── views │ │ ├── About.vue │ │ └── Home.vue ├── tsconfig.json └── vite.config.ts ├── cesium-nextjs ├── .eslintrc.json ├── .gitignore ├── .vscode │ └── settings.json ├── README.md ├── components │ └── CesiumScene │ │ ├── index.d.ts │ │ ├── index.module.css │ │ └── index.tsx ├── next-env.d.ts ├── next.config.js ├── next.lock │ ├── data │ │ └── http_cdn.staticfile.org │ │ │ └── cesium_1.87.1_Widgets_widgets_c73e405d371dbfe3120c.css │ └── lock.json ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ └── favicon.ico ├── styles │ ├── Home.module.css │ └── globals.css └── tsconfig.json ├── cesium-nuxt2 ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── README.md ├── components │ └── CesiumScene.vue ├── nuxt.config.js ├── package.json ├── pages │ └── index.vue ├── static │ └── favicon.ico ├── store │ └── README.md ├── stylelint.config.js └── tsconfig.json ├── cesium-nuxt3 ├── .gitignore ├── .vscode │ └── settings.json ├── README.md ├── components │ └── CesiumScene.vue ├── nuxt.config.ts ├── package.json ├── pages │ └── index.vue └── tsconfig.json ├── cesium-umi ├── .editorconfig ├── .env ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .umirc.ts ├── .vscode │ └── settings.json ├── README.md ├── mock │ └── .gitkeep ├── package.json ├── src │ ├── components │ │ └── CesiumScene │ │ │ ├── index.d.ts │ │ │ ├── index.less │ │ │ └── index.tsx │ └── pages │ │ ├── index.less │ │ └── index.tsx ├── tsconfig.json └── typings.d.ts ├── cesium-vite-reactts-tpl ├── .gitignore ├── .vscode │ └── settings.json ├── index.html ├── package.json ├── src │ ├── CesiumScene │ │ ├── index.css │ │ ├── index.d.ts │ │ └── index.tsx │ ├── favicon.svg │ ├── index.css │ ├── index.tsx │ └── vite-env.d.ts ├── tsconfig.json └── vite.config.ts ├── cesium-vite-vuets-tpl ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── components │ │ └── CesiumScene.vue │ ├── main.css │ ├── main.ts │ ├── shims-vue.d.ts │ └── vite-env.d.ts ├── tsconfig.json └── vite.config.ts ├── cesium-vuecli4 ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── CesiumScene.vue │ ├── main.less │ ├── main.ts │ ├── router │ │ └── index.ts │ ├── shims-vue.d.ts │ ├── store │ │ └── index.ts │ └── views │ │ ├── About.vue │ │ └── Home.vue ├── tsconfig.json └── vue.config.js ├── three-cra ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── components │ │ └── ThreeScene │ │ │ ├── index.css │ │ │ └── index.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── three-createvue ├── .gitignore ├── .vscode │ ├── extensions.json │ └── settings.json ├── README.md ├── env.d.ts ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── components │ │ └── ThreeScene.vue │ ├── main.css │ ├── main.ts │ ├── router │ │ └── index.ts │ ├── store │ │ └── index.ts │ └── views │ │ ├── About.vue │ │ └── Home.vue ├── tsconfig.json └── vite.config.ts ├── three-nextjs ├── .eslintrc.json ├── .gitignore ├── .vscode │ └── settings.json ├── README.md ├── components │ └── ThreeScene │ │ ├── index.module.css │ │ └── index.tsx ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ └── favicon.ico ├── styles │ ├── Home.module.css │ └── globals.css └── tsconfig.json ├── three-nuxt2 ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .husky │ ├── .gitignore │ ├── common.sh │ └── pre-commit ├── .prettierrc ├── .vscode │ └── settings.json ├── README.md ├── components │ └── ThreeScene.vue ├── nuxt.config.js ├── package.json ├── pages │ └── index.vue ├── static │ └── favicon.ico ├── store │ └── README.md ├── stylelint.config.js ├── tsconfig.json └── yarn.lock ├── three-nuxt3 ├── .gitignore ├── .vscode │ └── settings.json ├── README.md ├── components │ ├── ThreeScene.vue │ └── index.ts ├── nuxt.config.ts ├── package.json ├── pages │ └── index.vue ├── tsconfig.json └── yarn.lock ├── three-umi ├── .editorconfig ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .umirc.ts ├── .vscode │ └── settings.json ├── README.md ├── mock │ └── .gitkeep ├── package.json ├── pnpm-lock.yaml ├── src │ ├── components │ │ └── ThreeScene │ │ │ ├── index.less │ │ │ └── index.tsx │ └── pages │ │ ├── index.less │ │ └── index.tsx ├── tsconfig.json └── typings.d.ts ├── three-vite-reactts-tpl ├── .gitignore ├── index.html ├── package.json ├── src │ ├── ThreeScene │ │ ├── index.css │ │ └── index.tsx │ ├── favicon.svg │ ├── main.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json └── vite.config.ts ├── three-vite-vuets-tpl ├── .gitignore ├── README.md ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── components │ │ └── ThreeScene.vue │ ├── main.css │ ├── main.ts │ ├── shims-vue.d.ts │ └── vite-env.d.ts ├── tsconfig.json └── vite.config.ts └── three-vuecli4 ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .vscode └── settings.json ├── README.md ├── babel.config.js ├── package.json ├── pnpm-lock.yaml ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── ThreeScene.vue ├── main.less ├── main.ts ├── router │ └── index.ts ├── shims-vue.d.ts ├── store │ └── index.ts └── views │ ├── About.vue │ └── Home.vue ├── tsconfig.json └── vue.config.js /README.md: -------------------------------------------------------------------------------- 1 | # 项目说明 2 | 3 | 此项目包括了 ThreeJS、CesiumJS 在现代常用前端框架 Vue3、Vue2、React17+ 以及其打包环境、脚手架工具中的初始化项目，可作为模板使用。 4 | 5 | TODO：后续会使用 CDN 进行打包加速。 6 | 7 | ✅**所有案例全部使用 TypeScript。** 8 | 9 | 10 | 11 | ## Vue 系列说明 12 | 13 | - create-vue：是一个比较新的轻量级脚手架工具，能帮你快速搭建起 vite 为打包环境的 vue3 项目，通过命令行进行初始化项目，初始化时允许增加 vue 生态的一些库，例如 vue-router、vuex 等，与直接用 vite 的 vue3 模板开项目再手动配置需要的库是一样的； 14 | - vite 模板：使用到了 vue-ts 模板，创建出来的项目非常简单，只包含 vue3 本身和 typescript，需要任何其他库都要自己添加； 15 | - @vue/cli：cli 使用最新版，创建 vue3 的项目。@vue/cli 比较成熟，基于 webpack 这个工具进行开发和打包，配置非常完备，本质上是一个丰富的脚手架工具，仍不具备约定式配置等框架级功能； 16 | - nuxt2/3：使用 vue 进行 web 前端开发的框架，版本 2 比较成熟，主要使用 webpack 进行开发与打包，版本 3 比较新，默认使用 vite 进行开发与打包，支持 SSR、约定式配置，省去很多配置工作，只需在其提供的项目目录中进行约定式开发即可完成一个健壮的 web 前端程序。 17 | 18 | 19 | 20 | ## React 系列说明 21 | 22 | - vite 模板：使用到了 react-ts 模板，创建出来的项目只包含 react、react-dom 和 typescript，状态管理、路由等完全没有，也因为简单所以看起来很方便； 23 | - next.js & umi.js：与 nuxt2/3 是同概念的东西，两个开发框架，目前 next.js 和 umi.js 的最新稳定版均基于 webpack 来完成开发服务器伺服和打包，SSR、状态管理等配置一应俱全； 24 | - create-react-app：它的作用很像脚手架，但是比脚手架还弱，省去自己配置 webpack 和 react、react-dom 的过程，简单开启一个基于 webpack 的项目。 25 | 26 | 27 | 28 | ## 共同说明 29 | 30 | 无论是 ThreeJS，还是 CesiumJS，都以封装一个组件的方法，展示如何在这些框架、库、脚手架项目中使用这两个三维库。 31 | 32 | 33 | 34 | # 1. Vue + ThreeJS 35 | 36 | 进度表 37 | 38 | | 项目 | 可显示 | 说明文档 | CDN化 | 39 | | ------------- | ------ | -------- | ----- | 40 | | create-vue | ✅ | 50% | NO | 41 | | vite2.x vue3 | ✅ | 50% | NO | 42 | | @vue/cli vue3 | ✅ | 80% | NO | 43 | | nuxt2 | ✅ | 80% | NO | 44 | | nuxt3 | ✅ | 80% | NO | 45 | 46 | 47 | 48 | 在初始化项目完成后，统一安装命令： 49 | 50 | ``` sh 51 | pnpm add three && pnpm add @types/three -D 52 | ``` 53 | 54 | 你也可以使用等价的 npm 或 yarn 命令。 55 | 56 | 57 | 58 | ## ① create-vue 59 | 60 | 使用如下任意一条命令创建项目： 61 | 62 | ``` sh 63 | pnpm init vue@next 64 | pnpx create-vue@next 65 | 66 | # or use your prefer package manager 67 | npm init vue@next 68 | npx create-vue@next 69 | yarn create vue@next 70 | ``` 71 | 72 | ### 功能的选用 73 | 74 | | 名称 | 状态 | 75 | | ---------- | -------------- | 76 | | vue-router | 已安装，未使用 | 77 | | vuex | 已安装，未使用 | 78 | 79 | 80 | 81 | ## ② vite with vue ts template 82 | 83 | 使用如下任意一条命令创建项目： 84 | 85 | ``` sh 86 | # I prefer 87 | pnpm init vite 88 | # or 89 | pnpx create-vite 90 | 91 | # or u can use 92 | npm init vite 93 | npx create-vite 94 | yarn create vite 95 | ``` 96 | 97 | 之后安装依赖我选用 pnpm，此处选择 vue-ts 模板。 98 | 99 | 这个其实就是 ① 去掉了 vuex、vue-router 的简易版本。 100 | 101 | 102 | 103 | ## ③ @vue/cli with vue3 104 | 105 | cli 版本是最新版的 4.x，创建项目时，版本是 4.5.15. 106 | 107 | ``` sh 108 | # 确保你已经全局安装了 @vue/cli 109 | vue --version 110 | ``` 111 | 112 | 目前，推荐遵循官方文档的安装步骤，来安装 @vue/cli. 113 | 114 | 创建项目： 115 | 116 | ``` sh 117 | vue create three-vuecli4 118 | ``` 119 | 120 | 选择的配置有： 121 | 122 | | 名称 | 说明 | 123 | | ----------------- | ------------------------------------------------------------ | 124 | | vue 版本 | 3.x | 125 | | ESLint + Prettier | 启用，只在 commit 时启动 Lint，用不到可以不加这个，配置文件在独立文件中 | 126 | | 包管理器 | pnpm，你可以用 yarn、npm | 127 | | CSS 预处理器 | 启用，使用 Less，你也可以用 Sass/SCSS | 128 | | Babel | 启用 | 129 | | 组件命名风格 | 大驼峰 | 130 | 131 | 132 | 133 | ## ④ nuxt3 134 | 135 | nuxi 版本：0.10.1 136 | 137 | nuxt 版本：3.0.0-27268729.5b8e10f 138 | 139 | ``` sh 140 | npx nuxi init three-nuxt3 141 | pnpx nuxi init three-nuxt3 142 | ``` 143 | 144 | nuxt3 目前使用 pnpm@6.20 下载依赖无法正常运行，改用 yarn 或 npm 是可以的 145 | 146 | ``` sh 147 | yarn 148 | 149 | # or 150 | npm install 151 | ``` 152 | 153 | 154 | 155 | ## ⑤ nuxt2 156 | 157 | create-nuxt-app 版本： 158 | 159 | nuxt版本： 160 | 161 | 使用如下任意一条命令创建项目（选用你喜欢的包管理器）： 162 | 163 | ``` sh 164 | pnpm init nuxt-app three-nuxt2 165 | pnpx create-nuxt-app three-nuxt2 166 | 167 | # or 168 | npm init nuxt-app three-nuxt2 169 | npx create-nuxt-app three-nuxt2 170 | yarn create nuxt-app three-nuxt2 171 | ``` 172 | 173 | 但是安装依赖只能随着脚手架的提示文字来了，目前只有 yarn 或者 npm。 174 | 175 | 选择的配置有： 176 | 177 | ``` 178 | create-nuxt-app v3.7.1 179 | ✨ Generating Nuxt.js project in three-nuxt2 180 | ? Project name: cesium-nuxt2 181 | ? Programming language: TypeScript 182 | ? Package manager: Yarn 183 | ? UI framework: None 184 | ? Nuxt.js modules: (Press to select, to toggle all, to invert selection) 185 | ? Linting tools: ESLint, Prettier, StyleLint 186 | ? Testing framework: None 187 | ? Rendering mode: Single Page App 188 | ? Deployment target: Server (Node.js hosting) 189 | ? Development tools: (Press to select, to toggle all, to invert selection) 190 | ? Continuous integration: None 191 | ? Version control system: Git 192 | ``` 193 | 194 | 有需要的后期可以试试 SSR 模式 195 | 196 | 197 | 198 | # 2. Vue + CesiumJS 199 | 200 | 201 | 202 | 进度表 203 | 204 | | 项目 | 可显示 | 说明文档 | CDN化 | 205 | | ------------- | ------ | -------- | ----- | 206 | | create-vue | ✅ | 50% | NO | 207 | | vite2.x vue3 | ✅ | 50% | NO | 208 | | @vue/cli vue3 | ✅ | 80% | NO | 209 | | nuxt2 | ✅ | 80% | NO | 210 | | nuxt3 | ✅ | 80% | NO | 211 | 212 | 213 | 214 | ## ① create-vue 215 | 216 | 项目命名为：`cesium-createvue` 217 | 218 | 使用如下任意一条命令创建项目： 219 | 220 | ``` sh 221 | pnpm init vue@next 222 | pnpx create-vue@next 223 | 224 | # or use your prefer package manager 225 | npm init vue@next 226 | npx create-vue@next 227 | yarn create vue@next 228 | ``` 229 | 230 | ### 功能的选用 231 | 232 | | 名称 | 状态 | 233 | | ---------- | -------------- | 234 | | vue-router | 已安装，未使用 | 235 | | vuex | 已安装，未使用 | 236 | 237 | 238 | 239 | ## ② vite with vue ts template 240 | 241 | 项目命名为：`cesium-vite-vuets-tpl` 242 | 243 | 使用如下任意一条命令创建项目： 244 | 245 | ``` sh 246 | # I prefer 247 | pnpm init vite 248 | # or 249 | pnpx create-vite 250 | 251 | # or u can use 252 | npm init vite 253 | npx create-vite 254 | yarn create vite 255 | ``` 256 | 257 | 之后安装依赖我选用 pnpm，此处选择 vue-ts 模板。 258 | 259 | 这个其实就是 ① 去掉了 vuex、vue-router 的简易版本。 260 | 261 | 262 | 263 | ## ③ @vue/cli with vue3 264 | 265 | cli 版本是最新版的 4.x，创建项目时，版本是 4.5.15. 266 | 267 | ``` sh 268 | # 确保你已经全局安装了 @vue/cli 269 | vue --version 270 | ``` 271 | 272 | 目前，推荐遵循官方文档的安装步骤，来安装 @vue/cli. 273 | 274 | 创建项目： 275 | 276 | ``` sh 277 | vue create cesium-vuecli4 278 | ``` 279 | 280 | 选择的配置有： 281 | 282 | | 名称 | 说明 | 283 | | ----------------- | ------------------------------------------------------------ | 284 | | vue 版本 | 3.x | 285 | | ESLint + Prettier | 启用，只在 commit 时启动 Lint，用不到可以不加这个，配置文件在独立文件中 | 286 | | 包管理器 | pnpm，你可以用 yarn、npm | 287 | | CSS 预处理器 | 启用，使用 Less，你也可以用 Sass/SCSS | 288 | | Babel | 启用 | 289 | | 组件命名风格 | 大驼峰 | 290 | 291 | ### 踩坑点 292 | 293 | 若让 webpack 介入打包过程，根据报错来看，与 create-react-app 中遇到的问题是一样的，也需要对 webpack 进行配置。 294 | 295 | 但处理完相同的问题后，我尝试使用 build 进行打包，报 “Syntax Error: Thread Loader”问题，查资料后发现社区有人遇到过，是线程加载器的问题，仍需修改 webpack。 296 | 297 | 最后，一份能跑在 webpack4.x for @vue/cli4 的配置如下： 298 | 299 | ``` js 300 | // vue.config.js 301 | 302 | /** 303 | * @type {import('@vue/cli-service').ProjectOptions} 304 | */ 305 | module.exports = { 306 | /* ... */ 307 | chainWebpack: (config) => { 308 | config.module.rules.forEach(v => { 309 | if (v.use) { 310 | const idx = v.use.findIndex(w => w.loader.includes('thread-loader')) 311 | if (idx !== -1) v.use.splice(idx, 1) 312 | } 313 | }); 314 | config.amd = { ...config.amd, toUrlUndefined: true }; 315 | config.plugins.push( 316 | new DefinePlugin({ 317 | CESIUM_BASE_URL: JSON.stringify('./Cesium/'), 318 | }), 319 | new CopyWebpackPlugin({ 320 | patterns: [ 321 | { 322 | from: path.join( 323 | __dirname, 324 | 'node_modules/cesium/Build/Cesium/Workers' 325 | ), 326 | to: './Cesium/Workers', 327 | }, 328 | { 329 | from: path.join( 330 | __dirname, 331 | 'node_modules/cesium/Build/Cesium/ThirdParty' 332 | ), 333 | to: './Cesium/ThirdParty', 334 | }, 335 | { 336 | from: path.join( 337 | __dirname, 338 | 'node_modules/cesium/Build/Cesium/Assets' 339 | ), 340 | to: './Cesium/Assets', 341 | }, 342 | { 343 | from: path.join( 344 | __dirname, 345 | 'node_modules/cesium/Build/Cesium/Widgets' 346 | ), 347 | to: './Cesium/Widgets', 348 | }, 349 | ], 350 | }) 351 | ); 352 | //#region 解决 Webpack4 打包 CesiumWorker 的问题 353 | config.module.rules.push({ 354 | test: /\.js$/, 355 | use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') } 356 | }); 357 | //#endregion 358 | //#region 解决 Webpack 打包 Cesium 在控制台报警告的问题 359 | config.module.unknownContextRegExp = /^('|')\.\/.*?\1$/; 360 | config.module.unknownContextCritical = false 361 | //#endregion 362 | } 363 | }; 364 | ``` 365 | 366 | **切记，chainWebpack 若为函数，不要返回 config。** 367 | 368 | 有时候用 HTTP 服务器看打包后的成果，发现仍不能运行，检查 `CESIUM_BASE_URL` 即可发现 Cesium 的基本路径没配好，这一点需要根据环境变量来配置了。 369 | 370 | ### 参考 371 | 372 | https://github.com/vuejs/vue-cli/issues/2171 373 | 374 | 375 | 376 | ## ④ nuxt3 377 | 378 | nuxi 版本：0.10.1 379 | 380 | nuxt 版本：v3.0.0-27287661.1e0e881 381 | 382 | ``` sh 383 | npx nuxi init three-nuxt3 384 | pnpx nuxi init three-nuxt3 385 | ``` 386 | 387 | nuxt3 目前（文档最后更新时：2021年11月19日）使用 pnpm@6.20 下载依赖无法正常运行，改用 yarn 或 npm 是可以的 388 | 389 | ``` sh 390 | yarn 391 | 392 | # or 393 | npm install 394 | ``` 395 | 396 | ### 踩坑点 397 | 398 | 让 vite 打包 cesium，仍然是静态文件的问题，开发时可以勉强用 node_modules 下的包来凑数，否则打包后四大金刚文件夹仍然是找不到的。 399 | 400 | 能尽量别让打包器打包 cesium 就不要走这条路。 401 | 402 | 403 | 404 | ## ⑤ nuxt2 405 | 406 | create-nuxt-app 版本： 407 | 408 | nuxt版本： 409 | 410 | 使用如下任意一条命令创建项目（选用你喜欢的包管理器）： 411 | 412 | ``` sh 413 | pnpm init nuxt-app cesium-nuxt2 414 | pnpx create-nuxt-app cesium-nuxt2 415 | 416 | # or 417 | npm init nuxt-app cesium-nuxt2 418 | npx create-nuxt-app cesium-nuxt2 419 | yarn create nuxt-app cesium-nuxt2 420 | ``` 421 | 422 | 但是安装依赖只能随着脚手架的提示文字来了，目前只有 yarn 或者 npm。 423 | 424 | 选择的配置有： 425 | 426 | ``` 427 | create-nuxt-app v3.7.1 428 | ✨ Generating Nuxt.js project in cesium-nuxt2 429 | ? Project name: cesium-nuxt2 430 | ? Programming language: TypeScript 431 | ? Package manager: Yarn 432 | ? UI framework: None 433 | ? Nuxt.js modules: (Press to select, to toggle all, to invert selection) 434 | ? Linting tools: ESLint, Prettier, StyleLint 435 | ? Testing framework: None 436 | ? Rendering mode: Single Page App 437 | ? Deployment target: Server (Node.js hosting) 438 | ? Development tools: (Press to select, to toggle all, to invert selection) 439 | ? Continuous integration: None 440 | ? Version control system: Git 441 | ``` 442 | 443 | 有需要的后期可以试试 SSR 模式。 444 | 445 | ### 踩坑点 446 | 447 | 仍旧是 webpack4 的配置，在 `nuxt.config.js` 中，要对 build 进行扩展。 448 | 449 | 而且，与其他的工程不太一样的是，静态资源使用 `copy-webpack-plugin` 复制到的地方是 `./dist/_nuxt/` 目录，而不是 `./dist/` 目录，所以对 `CESIUM_BASE_URL` 的配置（即 `definePlugin`）需要小心。 450 | 451 | 452 | 453 | # 3. React + ThreeJS 454 | 455 | 456 | 457 | 进度表 458 | 459 | | 项目 | 可显示 | 说明文档 | CDN化 | 460 | | ----------------- | ------ | -------- | ----- | 461 | | vite2.x react17ts | ✅ | 50% | NO | 462 | | next.js 12 | ✅ | 90% | NO | 463 | | umi 3.5 | ✅ | 90% | ✅ | 464 | | cra 2.x webpack4 | ✅ | 70% | NO | 465 | 466 | 467 | 468 | ## ① vite with react ts template 469 | 470 | 创建项目： 471 | 472 | ``` sh 473 | # prefer 474 | pnpm init vite 475 | pnpx create-vite 476 | 477 | # or u can use 478 | npm init vite 479 | npx create-vite 480 | yarn create vite 481 | ``` 482 | 483 | 选择其中 react-ts 模板即可。 484 | 485 | 486 | 487 | ## ② next.js 488 | 489 | 请注意，使用 `npm init` 或 `pnpm init` 创建项目，经测试，`--ts` 及 `--typescript` 参数是无效的。 490 | 491 | 所以推荐用 `yarn create`、`npx`、`pnpx` 来创建项目。 492 | 493 | 创建项目： 494 | 495 | ``` sh 496 | pnpx create-next-app --ts 497 | ``` 498 | 499 | 也可以用其他的包管理器 500 | 501 | ``` sh 502 | npx create-next-app --ts 503 | 504 | # yarn 505 | yarn create next-app --ts 506 | ``` 507 | 508 | 若使用 `yarn create`、`pnpx`、`pnpm init` 创建项目，会在创建完项目后，自动调用 yarn 下载依赖；若使用 `npx`、`npm init`，会在创建完项目后，自动调用 npm 下载依赖。 509 | 510 | 为了保持统一，我使用 pnpm 重新下载了一遍依赖。 511 | 512 | 513 | 514 | ## ③ umi.js 515 | 516 | umi.js 开项目要先建文件夹，然后在文件夹下初始化。 517 | 518 | ``` sh 519 | mkdir three-umi 520 | cd ./three-umi/ 521 | 522 | # 使用你喜欢的包管理器初始化项目 523 | 524 | # -- pnpm -- 525 | pnpm init @umijs/umi-app 526 | # or use pnpx 527 | pnpx @umijs/create-umi-app 528 | 529 | # -- yarn -- 530 | yarn create @umijs/umi-app 531 | 532 | # -- npm or npx -- 533 | npx @umijs/create-umi-app 534 | # or use npm@6.x 535 | npm init @umijs/umi-app 536 | ``` 537 | 538 | 随后就是安装依赖、安装 three 和 three 的类型提示库即可。 539 | 540 | 541 | 542 | ## ④ create-react-app 543 | 544 | 创建项目： 545 | 546 | ``` sh 547 | pnpx create-react-app three-cra --template typescript 548 | 549 | # use pnpm init 550 | pnpm init react-app three-cra --template typescript 551 | ``` 552 | 553 | 你也可以用其他包管理器的初始化功能： 554 | 555 | ``` sh 556 | # use npm/npx 557 | npm init react-app three-cra --template typescript 558 | npx create-react-app three-cra --template typescript 559 | 560 | # use yarn 561 | yarn create react-app three-cra --template typescript 562 | ``` 563 | 564 | 无论是上面哪一个命令创建的项目，都会使用 yarn 来安装依赖，除非显示指定参数 `--use-npm`，才会用 npm 安装。很遗憾，cra 目前还不支持 pnpm。 565 | 566 | 我为了统一，将 lock 文件忽略并重新使用 pnpm 安装依赖，你可以选择你喜欢的包管理器。 567 | 568 | 569 | 570 | # 4. React + CesiumJS 571 | 572 | 573 | 574 | 进度表 575 | 576 | | 项目 | 可显示 | 说明文档 | CDN化 | 577 | | ----------------- | ------ | -------- | ----- | 578 | | vite2.x react17ts | ✅ | 50% | NO | 579 | | next.js 12 | ✅ | 90% | NO | 580 | | umi 3.5 | ✅ | 90% | ✅ | 581 | | cra 2.x webpack4 | ✅ | 70% | NO | 582 | 583 | 584 | 585 | ## ① vite with react ts template 586 | 587 | 创建项目： 588 | 589 | ``` sh 590 | # prefer 591 | pnpm init vite 592 | pnpx create-vite 593 | 594 | # or u can use 595 | npm init vite 596 | npx create-vite 597 | yarn create vite 598 | ``` 599 | 600 | 选择其中 react-ts 模板即可。 601 | 602 | 603 | 604 | ## ② next.js 605 | 606 | 请注意，使用 `npm init` 或 `pnpm init` 创建项目，经测试，`--ts` 及 `--typescript` 参数是无效的。 607 | 608 | 所以推荐用 `yarn create`、`npx`、`pnpx` 来创建项目。 609 | 610 | 创建项目： 611 | 612 | ``` sh 613 | pnpx create-next-app --ts 614 | ``` 615 | 616 | 也可以用其他的包管理器 617 | 618 | ``` sh 619 | # npx 620 | npx create-next-app --ts 621 | 622 | # yarn 623 | yarn create next-app --ts 624 | ``` 625 | 626 | 若使用 `yarn create`、`pnpx`、`pnpm init` 创建项目，会在创建完项目后，自动调用 yarn 下载依赖；若使用 `npx`、`npm init`，会在创建完项目后，自动调用 npm 下载依赖。 627 | 628 | 为了保持统一，我使用 pnpm 重新下载了一遍依赖。 629 | 630 | next.js 中对 Cesium 的组件不能使用服务端渲染，有可能是我不会。 631 | 632 | 当前配置为让 webpack 打包，暂未引入 Cesium CDN，待后续增补。 633 | 634 | ### 踩坑点 635 | 636 | - Cesium 场景组件使用动态导入，并禁用 ssr 637 | 638 | ``` ts 639 | const CesiumScene = dynamic(() => import('../components/CesiumScene'), { 640 | ssr: false, 641 | }) 642 | ``` 643 | 644 | - 配置 next.config.js 使用 NodeJS 的 cmd 模块化，不能使用 ts，若使用 es 模块化，则改后缀 `.mjs`；对于 webpack 打包 cesium 的方式，要配置 `CopyWebpackPlugin`，把 `Widgets`、`Assets`、`ThirdParty`、`Workers` 四大目录复制到 public 目录下；尤其注意一点，`to` 的相对路径是 `./.next`，而不是 `./`（项目根目录）。 645 | 646 | ### 参考 647 | 648 | https://github.com/willwill96/cesium-nextjs-example 649 | 650 | 651 | 652 | ## ③ umi.js 653 | 654 | 创建项目： 655 | 656 | ``` sh 657 | mkdir cesium-umi 658 | cd ./cesium-umi/ 659 | 660 | pnpm init @umijs/umi-app 661 | # or use pnpx 662 | pnpx @umijs/create-umi-app 663 | ``` 664 | 665 | 如果你使用 yarn 或者 npx/npm，你可以这么做： 666 | 667 | ``` sh 668 | # or use yarn 669 | yarn create @umijs/umi-app 670 | # or use npx 671 | npx @umijs/create-umi-app 672 | # or use npm@6.x 673 | npm init @umijs/umi-app 674 | ``` 675 | 676 | 会提示是否安装初始化项目用的包： 677 | 678 | ``` sh 679 | Need to install the following packages: 680 | @umijs/create-umi-app 681 | Ok to proceed? (y) 682 | ``` 683 | 684 | 回车确认即可。 685 | 686 | umi.js 3.x 的项目需要在工程文件夹内操作，cli 不会帮你创建新的文件夹。 687 | 688 | ### 踩坑点 689 | 690 | Webpack 4 会在开发或打包时报 Cesium 的第三方依赖：Zip.js 打包错误，这个只需在 `.umirc.ts` 中开启 `webpack5` 即可。 691 | 692 | 开发时要配置 `.umirc.ts` 中的 `copy` 项，将 Cesium 的静态文件预先复制到 `public` 目录下，且要将 693 | 694 | 以上两个问题，可以一步到位，直接配置 CDN 免去 Cesium 的打包即可。 695 | 696 | 此示例项目使用了 CDN。 697 | 698 | 699 | 700 | ## ④ create-react-app 701 | 702 | 创建项目： 703 | 704 | ``` sh 705 | pnpx create-react-app cesium-cra --template typescript 706 | 707 | # use pnpm init 708 | pnpm init react-app cesium-cra --template typescript 709 | ``` 710 | 711 | 你也可以用其他包管理器的初始化功能： 712 | 713 | ``` sh 714 | # use npm/npx 715 | npm init react-app cesium-cra --template typescript 716 | npx create-react-app cesium-cra --template typescript 717 | 718 | # use yarn 719 | yarn create react-app cesium-cra --template typescript 720 | ``` 721 | 722 | 无论是上面哪一个命令创建的项目，都会使用 yarn 来安装依赖，除非显示指定参数 `--use-npm`，才会用 npm 安装。很遗憾，cra 目前还不支持 pnpm。 723 | 724 | 我为了统一，将 lock 文件忽略并重新使用 pnpm 安装依赖，你可以选择你喜欢的包管理器。 725 | 726 | create-react-app 就没 umi.js 那么多接地气的配置了，我按 CDN 的方式配置。 727 | 728 | ### webpack4 引发的 Cesium Zip.js 依赖错误问题 729 | 730 | Zip.js 用到了 WebWorker，而 cra 截至发稿前，react-scripts 似乎还在用 webpack4，只要切换成 webpack5 就没有这个问题了，因为 webpack5 内置了 WebWorker 的支持。 731 | 732 | 关于这个问题，官方龟速推进了一年还在摸鱼：https://github.com/facebook/create-react-app/issues/9994 733 | 734 | 可以自己替换掉 `package.json` 中 `scripts` 的 react-scripts，只需在 npmjs 官方网站上找找合适的包即可（至少在官方正式更新前只能这么干了）。 735 | 736 | 社区上有一个更好的解决方法： 737 | 738 | https://github.com/gildas-lormeau/zip.js/discussions/258#discussioncomment-1360408 739 | 740 | 但是使用 `@craco/craco` 去修改 webpack 的配置的话，仍然是在操作 webpack4，要确保 `copy-webpack-plugin` 的版本是 6.x 才可以。 741 | -------------------------------------------------------------------------------- /cesium-cra/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | yarn.lock 25 | pnpm-lock.yaml 26 | package-lock.json 27 | -------------------------------------------------------------------------------- /cesium-cra/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib" 3 | } -------------------------------------------------------------------------------- /cesium-cra/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /cesium-cra/craco.config.js: -------------------------------------------------------------------------------- 1 | const CopyWebpackPlugin = require('copy-webpack-plugin') 2 | const { DefinePlugin } = require('webpack') 3 | const path = require('path') 4 | 5 | module.exports = { 6 | webpack: { 7 | configure: (config) => { 8 | config.plugins.push(new CopyWebpackPlugin({ 9 | patterns: [ 10 | { 11 | from: path.join( 12 | __dirname, 13 | 'node_modules/cesium/Build/Cesium/Workers' 14 | ), 15 | to: './Cesium/Workers', 16 | }, 17 | { 18 | from: path.join( 19 | __dirname, 20 | 'node_modules/cesium/Build/Cesium/ThirdParty' 21 | ), 22 | to: './Cesium/ThirdParty', 23 | }, 24 | { 25 | from: path.join( 26 | __dirname, 27 | 'node_modules/cesium/Build/Cesium/Assets' 28 | ), 29 | to: './Cesium/Assets', 30 | }, 31 | { 32 | from: path.join( 33 | __dirname, 34 | 'node_modules/cesium/Build/Cesium/Widgets' 35 | ), 36 | to: './Cesium/Widgets', 37 | }, 38 | ], 39 | })); 40 | config.plugins.push(new DefinePlugin({ 41 | CESIUM_BASE_URL: JSON.stringify('./Cesium/'), 42 | })); 43 | 44 | //#region 解决 Webpack4 打包 CesiumWorker 的问题 45 | config.module.rules.push({ 46 | test: /\.js$/, 47 | use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') } 48 | }); 49 | //#endregion 50 | 51 | //#region 解决 Webpack 打包 Cesium 在控制台报警告的问题 52 | config.module['unknownContextRegExp'] = /^('|')\.\/.*?\1$/ 53 | config.module['unknownContextCritical'] = false 54 | config.amd = { 55 | ...config.amd, 56 | toUrlUndefined: true 57 | } 58 | //#endregion 59 | 60 | return config; 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /cesium-cra/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cesium-cra", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^17.0.0", 12 | "@types/react-dom": "^17.0.0", 13 | "cesium": "^1.87.1", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-scripts": "^4.0.3", 17 | "typescript": "^4.1.2", 18 | "web-vitals": "^1.0.1" 19 | }, 20 | "scripts": { 21 | "start": "craco start", 22 | "build": "craco build", 23 | "test": "craco test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "@craco/craco": "^6.4.0", 46 | "@open-wc/webpack-import-meta-loader": "^0.4.7", 47 | "copy-webpack-plugin": "6" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /cesium-cra/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-cra/public/favicon.ico -------------------------------------------------------------------------------- /cesium-cra/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /cesium-cra/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-cra/public/logo192.png -------------------------------------------------------------------------------- /cesium-cra/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-cra/public/logo512.png -------------------------------------------------------------------------------- /cesium-cra/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /cesium-cra/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /cesium-cra/src/components/CesiumScene/index.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | CESIUM_BASE_URL: string 3 | } -------------------------------------------------------------------------------- /cesium-cra/src/components/CesiumScene/index.module.css: -------------------------------------------------------------------------------- 1 | .cesiumContainer { 2 | height: 80vh; 3 | width: 80vw; 4 | } 5 | -------------------------------------------------------------------------------- /cesium-cra/src/components/CesiumScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | import { 3 | ArcGisMapServerImageryProvider, 4 | Viewer 5 | } from 'cesium' 6 | 7 | import '../../../node_modules/cesium/Build/Cesium/Widgets/widgets.css' 8 | import styles from './index.module.css' 9 | 10 | // eslint-disable-next-line 11 | let viewer: Viewer; 12 | const CesiumScene = () => { 13 | const cesiumViewerDivRef = useRef(null) 14 | 15 | useEffect(() => { 16 | viewer = new Viewer(cesiumViewerDivRef.current as Element, { 17 | imageryProvider: new ArcGisMapServerImageryProvider({ 18 | url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' 19 | }) 20 | }) 21 | }, []) 22 | 23 | return ( 24 |
25 | ) 26 | } 27 | 28 | export default CesiumScene -------------------------------------------------------------------------------- /cesium-cra/src/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #root { 7 | display: grid; 8 | place-items: center; 9 | height: 100vh; 10 | width: 100vw; 11 | } 12 | -------------------------------------------------------------------------------- /cesium-cra/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import CesiumScene from './components/CesiumScene'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | import './index.css'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /cesium-cra/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /cesium-cra/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /cesium-cra/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /cesium-cra/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /cesium-createvue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # Editor directories and files 20 | .idea 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | yarn.lock 28 | package-lock.json 29 | pnpm-lock.yaml 30 | -------------------------------------------------------------------------------- /cesium-createvue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /cesium-createvue/README.md: -------------------------------------------------------------------------------- 1 | # 说明 2 | 3 | 本示例为 `create-vue` 这个轻量级脚手架创建的 vue3 + ts + vue-router + vuex 的简易项目，提供了非 CDN 的 CesiumJS 简易模板。 4 | 5 | # 依赖安装与项目启动 6 | 7 | 建议使用 `yarn` 或 `pnpm` 安装并管理依赖。 8 | 9 | ``` sh 10 | pnpm install 11 | 12 | # or 13 | yarn 14 | ``` 15 | 16 | 随后即可启动 17 | 18 | ``` sh 19 | pnpm dev 20 | ``` 21 | 22 | # 场景组件 23 | 24 | 场景组件位于 `src/components/CesiumScene.vue`，组件挂载时用 cube 例子作演示，并将 scene 对象提交至 Vuex. 25 | -------------------------------------------------------------------------------- /cesium-createvue/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | // eslint-disable-next-line 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /cesium-createvue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /cesium-createvue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-project", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vue-tsc --noEmit && vite build", 7 | "preserve": "vite build", 8 | "serve": "vite preview --port 5050", 9 | "typecheck": "vue-tsc --noEmit" 10 | }, 11 | "dependencies": { 12 | "cesium": "^1.87.1", 13 | "vue": "^3.2.14", 14 | "vue-router": "^4.0.11", 15 | "vuex": "^4.0.2" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^1.9.3", 19 | "typescript": "~4.3.5", 20 | "vite": "^2.6.3", 21 | "vue-tsc": "^0.3.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /cesium-createvue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-createvue/public/favicon.ico -------------------------------------------------------------------------------- /cesium-createvue/src/App.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /cesium-createvue/src/components/CesiumScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 38 | 39 | 45 | -------------------------------------------------------------------------------- /cesium-createvue/src/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | width: 100vw; 6 | } 7 | 8 | body { 9 | display: grid; 10 | place-items: center; 11 | } 12 | -------------------------------------------------------------------------------- /cesium-createvue/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | import router from './router' 5 | import { store, key } from './store' 6 | 7 | import './main.css' 8 | 9 | const app = createApp(App) 10 | 11 | app.use(router) 12 | app.use(store, key) 13 | 14 | app.mount('#app') 15 | -------------------------------------------------------------------------------- /cesium-createvue/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import Home from '../views/Home.vue' 3 | 4 | const router = createRouter({ 5 | history: createWebHistory(import.meta.env.BASE_URL), 6 | routes: [ 7 | { 8 | path: '/', 9 | name: 'Home', 10 | component: Home 11 | }, 12 | { 13 | path: '/about', 14 | name: 'About', 15 | // route level code-splitting 16 | // this generates a separate chunk (About.[hash].js) for this route 17 | // which is lazy-loaded when the route is visited. 18 | component: () => import('../views/About.vue') 19 | } 20 | ] 21 | }) 22 | 23 | export default router 24 | -------------------------------------------------------------------------------- /cesium-createvue/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { Viewer } from 'cesium' 2 | import { InjectionKey } from 'vue' 3 | import { useStore as baseUseStore, createStore, Store } from 'vuex' 4 | 5 | export interface State { 6 | cesiumViewer: Viewer | null 7 | } 8 | 9 | export const key: InjectionKey> = Symbol() 10 | 11 | export const store = createStore({ 12 | state: { 13 | cesiumViewer: null 14 | }, 15 | mutations: { 16 | /** 17 | * 将 Cesium 的 Viewer 保存至中央状态库中 18 | * @param {State} state 19 | * @param {Scene} scene 20 | */ 21 | setCesiumViewer(state: State, cesiumViewer: Viewer) { 22 | state.cesiumViewer = cesiumViewer 23 | } 24 | }, 25 | actions: {}, 26 | modules: {} 27 | }) 28 | 29 | export const useStore = () => { 30 | return baseUseStore(key) 31 | } 32 | -------------------------------------------------------------------------------- /cesium-createvue/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /cesium-createvue/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /cesium-createvue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "target": "esnext", 5 | "useDefineForClassFields": true, 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "isolatedModules": true, 9 | "strict": true, 10 | "jsx": "preserve", 11 | "sourceMap": true, 12 | "resolveJsonModule": true, 13 | "esModuleInterop": true, 14 | "paths": { 15 | "@/*": ["src/*"] 16 | }, 17 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"], 18 | "skipLibCheck": true 19 | }, 20 | "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] 21 | } 22 | -------------------------------------------------------------------------------- /cesium-createvue/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | resolve: { 8 | alias: { 9 | '@/': new URL('./src/', import.meta.url).pathname 10 | } 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /cesium-nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /cesium-nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | 39 | # lock file 40 | pnpm-lock.yaml 41 | yarn.lock 42 | package-lock.json 43 | 44 | # public cesium static assets 45 | public/Cesium 46 | -------------------------------------------------------------------------------- /cesium-nextjs/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib" 3 | } -------------------------------------------------------------------------------- /cesium-nextjs/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /cesium-nextjs/components/CesiumScene/index.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | CESIUM_BASE_URL: string 3 | } 4 | -------------------------------------------------------------------------------- /cesium-nextjs/components/CesiumScene/index.module.css: -------------------------------------------------------------------------------- 1 | .cesiumContainer { 2 | height: 80vh; 3 | width: 80vw; 4 | } 5 | -------------------------------------------------------------------------------- /cesium-nextjs/components/CesiumScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react' 2 | import { 3 | Viewer, 4 | ArcGisMapServerImageryProvider 5 | } from 'cesium' 6 | 7 | import styles from './index.module.css' 8 | 9 | import './index.d' 10 | // window.CESIUM_BASE_URL = 'http://cdn.staticfile.org/cesium/1.87.1/' 11 | 12 | let viewer: Viewer 13 | const CesiumScene = () => { 14 | const cesiumViewerDivRef = useRef(null) 15 | 16 | useEffect(() => { 17 | viewer = new Viewer(cesiumViewerDivRef.current as Element, { 18 | animation: false, 19 | imageryProvider: new ArcGisMapServerImageryProvider({ 20 | url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' 21 | }) 22 | }) 23 | }, []) 24 | 25 | return ( 26 |
27 | ) 28 | } 29 | 30 | export default CesiumScene -------------------------------------------------------------------------------- /cesium-nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /cesium-nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin') 2 | const CopyWebpackPlugin = require('copy-webpack-plugin') 3 | const path = require('path') 4 | 5 | /** 6 | * @type {import('next').NextConfig} 7 | */ 8 | module.exports = { 9 | reactStrictMode: true, 10 | webpack: (config, { isServer, webpack }) => { 11 | if (!isServer) { 12 | config.plugins.push( 13 | new CopyWebpackPlugin({ 14 | patterns: [ 15 | { 16 | from: path.join( 17 | __dirname, 18 | 'node_modules/cesium/Build/Cesium/Workers' 19 | ), 20 | to: '../public/Cesium/Workers', 21 | }, 22 | { 23 | from: path.join( 24 | __dirname, 25 | 'node_modules/cesium/Build/Cesium/ThirdParty' 26 | ), 27 | to: '../public/Cesium/ThirdParty', 28 | }, 29 | { 30 | from: path.join( 31 | __dirname, 32 | 'node_modules/cesium/Build/Cesium/Assets' 33 | ), 34 | to: '../public/Cesium/Assets', 35 | }, 36 | { 37 | from: path.join( 38 | __dirname, 39 | 'node_modules/cesium/Build/Cesium/Widgets' 40 | ), 41 | to: '../public/Cesium/Widgets', 42 | }, 43 | ], 44 | }) 45 | ) 46 | } 47 | config.plugins.push( 48 | new webpack.DefinePlugin({ 49 | CESIUM_BASE_URL: JSON.stringify('./Cesium/'), 50 | }) 51 | ) 52 | config.resolve.exportsFields = [] 53 | 54 | return config 55 | }, 56 | experimental: { 57 | urlImports: ['http://cdn.staticfile.org/cesium/1.87.1/'] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /cesium-nextjs/next.lock/data/http_cdn.staticfile.org/cesium_1.87.1_Widgets_widgets_c73e405d371dbfe3120c.css: -------------------------------------------------------------------------------- 1 | .cesium-svgPath-svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.cesium-button{display:inline-block;position:relative;background:#303336;border:1px solid #444;color:#edffff;fill:#edffff;border-radius:4px;padding:5px 12px;margin:2px 3px;cursor:pointer;overflow:hidden;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cesium-button:focus{color:#fff;fill:#fff;border-color:#ea4;outline:0}.cesium-button:hover{color:#fff;fill:#fff;background:#48b;border-color:#aef;box-shadow:0 0 8px #fff}.cesium-button:active{color:#000;fill:#000;background:#adf;border-color:#fff;box-shadow:0 0 8px #fff}.cesium-button-disabled,.cesium-button-disabled:active,.cesium-button-disabled:focus,.cesium-button-disabled:hover,.cesium-button:disabled{background:#303336;border-color:#444;color:#646464;fill:#646464;box-shadow:none;cursor:default}.cesium-button option{background-color:#000;color:#eee}.cesium-button option:disabled{color:#777}.cesium-button input,.cesium-button label{cursor:pointer}.cesium-button input{vertical-align:sub}.cesium-toolbar-button{box-sizing:border-box;width:32px;height:32px;border-radius:14%;padding:0;vertical-align:middle;z-index:0}.cesium-performanceDisplay-defaultContainer{position:absolute;top:50px;right:10px;text-align:right}.cesium-performanceDisplay{background-color:rgba(40,40,40,.7);padding:7px;border-radius:5px;border:1px solid #444;font:bold 12px sans-serif}.cesium-performanceDisplay-fps{color:#e52}.cesium-performanceDisplay-throttled{color:#a42}.cesium-performanceDisplay-ms{color:#de3}.cesium-animation-theme{visibility:hidden;display:block;position:absolute;z-index:-100}.cesium-animation-themeNormal{color:#222}.cesium-animation-themeHover{color:#4488b0}.cesium-animation-themeSelect{color:#242}.cesium-animation-themeDisabled{color:#333}.cesium-animation-themeKnob{color:#222}.cesium-animation-themePointer{color:#2e2}.cesium-animation-themeSwoosh{color:#8ac}.cesium-animation-themeSwooshHover{color:#aef}.cesium-animation-svgText{fill:#edffff;font-family:Sans-Serif;font-size:15px;text-anchor:middle}.cesium-animation-blank{fill:#000;fill-opacity:.01;stroke:none}.cesium-animation-rectButton{cursor:pointer;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cesium-animation-rectButton .cesium-animation-buttonGlow{fill:#fff;stroke:none;display:none}.cesium-animation-rectButton:hover .cesium-animation-buttonGlow{display:block}.cesium-animation-rectButton .cesium-animation-buttonPath{fill:#edffff}.cesium-animation-rectButton .cesium-animation-buttonMain{stroke:#444;stroke-width:1.2}.cesium-animation-rectButton:hover .cesium-animation-buttonMain{stroke:#aef}.cesium-animation-rectButton:active .cesium-animation-buttonMain{fill:#abd6ff}.cesium-animation-buttonDisabled{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cesium-animation-buttonDisabled .cesium-animation-buttonMain{stroke:#555}.cesium-animation-buttonDisabled .cesium-animation-buttonPath{fill:#818181}.cesium-animation-buttonDisabled .cesium-animation-buttonGlow{display:none}.cesium-animation-buttonToggled .cesium-animation-buttonGlow{display:block;fill:#2e2}.cesium-animation-buttonToggled .cesium-animation-buttonMain{stroke:#2e2}.cesium-animation-buttonToggled:hover .cesium-animation-buttonGlow{fill:#fff}.cesium-animation-buttonToggled:hover .cesium-animation-buttonMain{stroke:#2e2}.cesium-animation-shuttleRingG{cursor:pointer}.cesium-animation-shuttleRingPointer{cursor:pointer}.cesium-animation-shuttleRingPausePointer{cursor:pointer}.cesium-animation-shuttleRingBack{fill:#181818;fill-opacity:.8;stroke:#333;stroke-width:1.2}.cesium-animation-shuttleRingSwoosh line{stroke:#8ac;stroke-width:3;stroke-opacity:.2;stroke-linecap:round}.cesium-animation-knobOuter{cursor:pointer;stroke:#444;stroke-width:1.2}.cesium-animation-knobInner{cursor:pointer}.cesium-baseLayerPicker-selected{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.cesium-baseLayerPicker-dropDown{display:block;position:absolute;box-sizing:content-box;top:auto;right:0;width:320px;max-height:500px;margin-top:5px;background-color:rgba(38,38,38,.75);border:1px solid #444;padding:6px;overflow:auto;border-radius:10px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;transform:translate(0,-20%);visibility:hidden;opacity:0;transition:visibility 0s .2s,opacity .2s ease-in,transform .2s ease-in}.cesium-baseLayerPicker-dropDown-visible{transform:translate(0,0);visibility:visible;opacity:1;transition:opacity .2s ease-out,transform .2s ease-out}.cesium-baseLayerPicker-sectionTitle{display:block;font-family:sans-serif;font-size:16pt;text-align:left;color:#edffff;margin-bottom:4px}.cesium-baseLayerPicker-choices{margin-bottom:5px}.cesium-baseLayerPicker-categoryTitle{color:#edffff;font-size:11pt}.cesium-baseLayerPicker-choices{display:block;border:1px solid #888;border-radius:5px;padding:5px 0}.cesium-baseLayerPicker-item{display:inline-block;vertical-align:top;margin:2px 5px;width:64px;text-align:center;cursor:pointer}.cesium-baseLayerPicker-itemLabel{display:block;font-family:sans-serif;font-size:8pt;text-align:center;vertical-align:middle;color:#edffff;cursor:pointer;word-wrap:break-word}.cesium-baseLayerPicker-item:focus .cesium-baseLayerPicker-itemLabel,.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemLabel{text-decoration:underline}.cesium-baseLayerPicker-itemIcon{display:inline-block;position:relative;width:inherit;height:auto;background-size:100% 100%;border:solid 1px #444;border-radius:9px;color:#edffff;margin:0;padding:0;cursor:pointer;box-sizing:border-box}.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemIcon{border-color:#fff;box-shadow:0 0 8px #fff,0 0 8px #fff}.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemLabel{color:#bdecf8}.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemIcon{border:double 4px #bdecf8}.cesium-widget{position:relative}.cesium-widget,.cesium-widget canvas{width:100%;height:100%;touch-action:none}.cesium-widget-credits{display:block;position:absolute;bottom:0;left:0;color:#fff;font-size:10px;text-shadow:0 0 2px #000;padding-right:5px}.cesium-widget-credits a,.cesium-widget-credits a:visited{color:#fff}.cesium-widget-errorPanel{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;background:rgba(0,0,0,.7);z-index:99999}.cesium-widget-errorPanel:before{display:inline-block;vertical-align:middle;height:100%;content:""}.cesium-widget-errorPanel-content{width:75%;max-width:500px;display:inline-block;text-align:left;vertical-align:middle;border:1px solid #510c00;border-radius:7px;background-color:#f0d9d5;font-size:14px;color:#510c00}.cesium-widget-errorPanel-content.expanded{max-width:75%}.cesium-widget-errorPanel-header{font-size:18px;font-family:"Open Sans",Verdana,Geneva,sans-serif;background:#d69d93;border-bottom:2px solid #510c00;padding-bottom:10px;border-radius:3px 3px 0 0;padding:15px}.cesium-widget-errorPanel-scroll{overflow:auto;font-family:"Open Sans",Verdana,Geneva,sans-serif;white-space:pre-wrap;padding:0 15px;margin:10px 0 20px 0}.cesium-widget-errorPanel-buttonPanel{padding:0 15px;margin:10px 0 20px 0;text-align:right}.cesium-widget-errorPanel-buttonPanel button{border-color:#510c00;background:#d69d93;color:#202020;margin:0}.cesium-widget-errorPanel-buttonPanel button:focus{border-color:#510c00;background:#f0d9d5;color:#510c00}.cesium-widget-errorPanel-buttonPanel button:hover{border-color:#510c00;background:#f0d9d5;color:#510c00}.cesium-widget-errorPanel-buttonPanel button:active{border-color:#510c00;background:#b17b72;color:#510c00}.cesium-widget-errorPanel-more-details{text-decoration:underline;cursor:pointer}.cesium-widget-errorPanel-more-details:hover{color:#2b0700}.cesium-cesiumInspector{border-radius:5px;transition:width ease-in-out .25s;background:rgba(48,51,54,.8);border:1px solid #444;color:#edffff;display:inline-block;position:relative;padding:4px 12px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.cesium-cesiumInspector-button{text-align:center;font-size:11pt}.cesium-cesiumInspector-visible .cesium-cesiumInspector-button{border-bottom:1px solid #aaa;padding-bottom:3px}.cesium-cesiumInspector input:enabled,.cesium-cesiumInspector-button{cursor:pointer}.cesium-cesiumInspector-visible{width:185px;height:auto}.cesium-cesiumInspector-hidden{width:122px;height:17px}.cesium-cesiumInspector-sectionContent{max-height:500px}.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent{max-height:0;padding:0!important;overflow:hidden}.cesium-cesiumInspector-dropDown{margin:5px 0;font-family:sans-serif;font-size:10pt;width:185px}.cesium-cesiumInspector-frustumStatistics{padding-left:10px;padding:5px;background-color:rgba(80,80,80,.75)}.cesium-cesiumInspector-pickButton{background-color:rgba(0,0,0,.3);border:1px solid #444;color:#edffff;border-radius:5px;padding:3px 7px;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;margin:0 auto}.cesium-cesiumInspector-pickButton:focus{outline:0}.cesium-cesiumInspector-pickButton:active,.cesium-cesiumInspector-pickButtonHighlight{color:#000;background:#adf;border-color:#fff;box-shadow:0 0 8px #fff}.cesium-cesiumInspector-center{text-align:center}.cesium-cesiumInspector-sectionHeader{font-weight:700;font-size:10pt;margin:0;cursor:pointer}.cesium-cesiumInspector-pickSection{border:1px solid #aaa;border-radius:5px;padding:3px;margin-bottom:5px}.cesium-cesiumInspector-sectionContent{margin-bottom:10px;transition:max-height .25s}.cesium-cesiumInspector-tileText{padding-bottom:10px;border-bottom:1px solid #aaa}.cesium-cesiumInspector-relativeText{padding-top:10px}.cesium-cesiumInspector-sectionHeader::before{margin-right:5px;content:"-";width:1ch;display:inline-block}.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before{content:"+"}ul.cesium-cesiumInspector-statistics{margin:0;padding-top:3px;padding-bottom:3px}ul.cesium-cesiumInspector-statistics+ul.cesium-cesiumInspector-statistics{border-top:1px solid #aaa}.cesium-cesiumInspector-slider{margin-top:5px}.cesium-cesiumInspector-slider input[type=number]{text-align:left;background-color:#222;outline:0;border:1px solid #444;color:#edffff;width:100px;border-radius:3px;padding:1px;margin-left:10px;cursor:auto}.cesium-cesiumInspector-slider input[type=number]::-webkit-inner-spin-button,.cesium-cesiumInspector-slider input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cesium-cesiumInspector-slider input[type=range]{margin-left:5px;vertical-align:middle}.cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor{display:none}.cesium-cesiumInspector-styleEditor{padding:10px;border-radius:5px;background:rgba(48,51,54,.8);border:1px solid #444}.cesium-cesiumInspector-styleEditor textarea{width:100%;height:300px;background:0 0;color:#edffff;border:none;padding:0;white-space:pre;overflow-wrap:normal;overflow-x:auto}.cesium-3DTilesInspector{width:300px;pointer-events:all}.cesium-3DTilesInspector-statistics{font-size:11px}.cesium-3DTilesInspector div,.cesium-3DTilesInspector input[type=range]{width:100%;box-sizing:border-box}.cesium-cesiumInspector-error{color:#ff9e9e;overflow:auto}.cesium-3DTilesInspector .cesium-cesiumInspector-section{margin-top:3px}.cesium-3DTilesInspector .cesium-cesiumInspector-sectionHeader+.cesium-cesiumInspector-show{border-top:1px solid #fff}input.cesium-cesiumInspector-url{overflow:hidden;white-space:nowrap;overflow-x:scroll;background-color:transparent;color:#fff;outline:0;border:none;height:1em;width:100%}.cesium-cesiumInspector .field-group{display:table}.cesium-cesiumInspector .field-group>label{display:table-cell;font-weight:700}.cesium-cesiumInspector .field-group>.field{display:table-cell;width:100%}.cesium-button.cesium-fullscreenButton{display:block;width:100%;height:100%;margin:0;border-radius:0}.cesium-button.cesium-vrButton{display:block;width:100%;height:100%;margin:0;border-radius:0}.cesium-viewer-geocoderContainer .cesium-geocoder-input{border:solid 1px #444;background-color:rgba(40,40,40,.7);color:#fff;display:inline-block;vertical-align:middle;width:0;height:32px;margin:0;padding:0 32px 0 0;border-radius:0;box-sizing:border-box;transition:width ease-in-out .25s,background-color .2s ease-in-out;-webkit-appearance:none}.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input{border-color:#aef;box-shadow:0 0 8px #fff}.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus{border-color:#ea4;background-color:rgba(15,15,15,.9);box-shadow:none;outline:0}.cesium-viewer-geocoderContainer .cesium-geocoder-input-wide,.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus,.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input{padding-left:4px;width:250px}.cesium-viewer-geocoderContainer .search-results{position:absolute;background-color:#000;color:#eee;overflow-y:auto;opacity:.8;width:100%}.cesium-viewer-geocoderContainer .search-results ul{list-style-type:none;margin:0;padding:0}.cesium-viewer-geocoderContainer .search-results ul li{font-size:14px;padding:3px 10px}.cesium-viewer-geocoderContainer .search-results ul li:hover{cursor:pointer}.cesium-viewer-geocoderContainer .search-results ul li.active{background:#48b}.cesium-geocoder-searchButton{background-color:#303336;display:inline-block;position:absolute;cursor:pointer;width:32px;top:1px;right:1px;height:30px;vertical-align:middle;fill:#edffff}.cesium-geocoder-searchButton:hover{background-color:#48b}.cesium-infoBox{display:block;position:absolute;top:50px;right:0;width:40%;max-width:480px;background:rgba(38,38,38,.95);color:#edffff;border:1px solid #444;border-right:none;border-top-left-radius:7px;border-bottom-left-radius:7px;box-shadow:0 0 10px 1px #000;transform:translate(100%,0);visibility:hidden;opacity:0;transition:visibility 0s .2s,opacity .2s ease-in,transform .2s ease-in}.cesium-infoBox-visible{transform:translate(0,0);visibility:visible;opacity:1;transition:opacity .2s ease-out,transform .2s ease-out}.cesium-infoBox-title{display:block;height:20px;padding:5px 30px 5px 25px;background:#545454;border-top-left-radius:7px;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:content-box}.cesium-infoBox-bodyless .cesium-infoBox-title{border-bottom-left-radius:7px}button.cesium-infoBox-camera{display:block;position:absolute;top:4px;left:4px;width:22px;height:22px;background:0 0;border-color:transparent;border-radius:3px;padding:0 5px;margin:0}button.cesium-infoBox-close{display:block;position:absolute;top:5px;right:5px;height:20px;background:0 0;border:none;border-radius:2px;font-weight:700;font-size:16px;padding:0 5px;margin:0;color:#edffff}button.cesium-infoBox-close:focus{background:rgba(238,136,0,.44);outline:0}button.cesium-infoBox-close:hover{background:#888;color:#000}button.cesium-infoBox-close:active{background:#a00;color:#000}.cesium-infoBox-bodyless .cesium-infoBox-iframe{display:none}.cesium-infoBox-iframe{border:none;width:100%;width:calc(100% - 2px)}span.cesium-sceneModePicker-wrapper{display:inline-block;position:relative;margin:0 3px}.cesium-sceneModePicker-visible{visibility:visible;opacity:1;transition:opacity .25s linear}.cesium-sceneModePicker-hidden{visibility:hidden;opacity:0;transition:visibility 0s .25s,opacity .25s linear}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-none{display:none}.cesium-sceneModePicker-slide-svg{transition:left 2s;top:0;left:0}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon{box-sizing:border-box;padding:0;margin:3px 0}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D,.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D,.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView{margin:0 0 3px 0}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-icon2D{left:100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-iconColumbusView{left:200%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon3D{left:-200%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon2D{left:-100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-icon3D{left:-100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-iconColumbusView{left:100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-selected{border-color:#2e2;box-shadow:0 0 8px #fff,0 0 8px #fff}span.cesium-projectionPicker-wrapper{display:inline-block;position:relative;margin:0 3px}.cesium-projectionPicker-visible{visibility:visible;opacity:1;transition:opacity .25s linear}.cesium-projectionPicker-hidden{visibility:hidden;opacity:0;transition:visibility 0s .25s,opacity .25s linear}.cesium-projectionPicker-wrapper .cesium-projectionPicker-none{display:none}.cesium-projectionPicker-wrapper .cesium-projectionPicker-dropDown-icon{box-sizing:border-box;padding:0;margin:3px 0}.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic,.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective{margin:0 0 3px 0}.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective .cesium-projectionPicker-iconOrthographic{left:100%}.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic .cesium-projectionPicker-iconPerspective{left:-100%}.cesium-projectionPicker-wrapper .cesium-projectionPicker-selected{border-color:#2e2;box-shadow:0 0 8px #fff,0 0 8px #fff}.cesium-performance-watchdog-message-area{position:relative;background-color:#ff0;color:#000;padding:10px}.cesium-performance-watchdog-message{margin-right:30px}.cesium-performance-watchdog-message-dismiss{position:absolute;right:0;margin:0 10px 0 0}.cesium-navigationHelpButton-wrapper{position:relative;display:inline-block}.cesium-navigation-help{visibility:hidden;position:absolute;top:38px;right:2px;width:250px;border-radius:10px;transform:scale(.01);transform-origin:234px -10px;transition:visibility 0s .25s,transform .25s ease-in}.cesium-navigation-help-visible{visibility:visible;transform:scale(1);transition:transform .25s ease-out}.cesium-navigation-help-instructions{border:1px solid #444;background-color:rgba(38,38,38,.75);padding-bottom:5px;border-radius:0 0 10px 10px}.cesium-click-navigation-help{display:none}.cesium-touch-navigation-help{display:none;padding-top:5px}.cesium-click-navigation-help-visible{display:block}.cesium-touch-navigation-help-visible{display:block}.cesium-navigation-help-pan{color:#6cf;font-weight:700}.cesium-navigation-help-zoom{color:#65fd00;font-weight:700}.cesium-navigation-help-rotate{color:#ffd800;font-weight:700}.cesium-navigation-help-tilt{color:#d800d8;font-weight:700}.cesium-navigation-help-details{color:#fff}.cesium-navigation-button{color:#fff;background-color:transparent;border-bottom:none;border-top:1px solid #444;border-right:1px solid #444;margin:0;width:50%;cursor:pointer}.cesium-navigation-button-icon{vertical-align:middle;padding:5px 1px}.cesium-navigation-button:focus{outline:0}.cesium-navigation-button-left{border-radius:10px 0 0 0;border-left:1px solid #444}.cesium-navigation-button-right{border-radius:0 10px 0 0;border-left:none}.cesium-navigation-button-selected{background-color:rgba(38,38,38,.75)}.cesium-navigation-button-unselected{background-color:rgba(0,0,0,.75)}.cesium-navigation-button-unselected:hover{background-color:rgba(76,76,76,.75)}.cesium-selection-wrapper{position:absolute;width:160px;height:160px;pointer-events:none;visibility:hidden;opacity:0;transition:visibility 0s .2s,opacity .2s ease-in}.cesium-selection-wrapper-visible{visibility:visible;opacity:1;transition:opacity .2s ease-out}.cesium-selection-wrapper svg{fill:#2e2;stroke:#000;stroke-width:1.1px}.cesium-timeline-main{position:relative;left:0;bottom:0;overflow:hidden;border:solid 1px #888}.cesium-timeline-trackContainer{width:100%;overflow:auto;border-top:solid 1px #888;position:relative;top:0;left:0}.cesium-timeline-tracks{position:absolute;top:0;left:0;width:100%}.cesium-timeline-needle{position:absolute;left:0;top:1.7em;bottom:0;width:1px;background:red}.cesium-timeline-bar{position:relative;left:0;top:0;overflow:hidden;cursor:pointer;width:100%;height:1.7em;background:linear-gradient(to bottom,rgba(116,117,119,.8) 0,rgba(58,68,82,.8) 11%,rgba(46,50,56,.8) 46%,rgba(53,53,53,.8) 81%,rgba(53,53,53,.8) 100%)}.cesium-timeline-ruler{visibility:hidden;white-space:nowrap;font-size:80%;z-index:-200}.cesium-timeline-highlight{position:absolute;bottom:0;left:0;background:#08f}.cesium-timeline-ticLabel{position:absolute;top:0;left:0;white-space:nowrap;font-size:80%;color:#eee}.cesium-timeline-ticMain{position:absolute;bottom:0;left:0;width:1px;height:50%;background:#eee}.cesium-timeline-ticSub{position:absolute;bottom:0;left:0;width:1px;height:33%;background:#aaa}.cesium-timeline-ticTiny{position:absolute;bottom:0;left:0;width:1px;height:25%;background:#888}.cesium-timeline-icon16{display:block;position:absolute;width:16px;height:16px;background-image:url(Images/TimelineIcons.png);background-repeat:no-repeat}.cesium-viewer{font-family:sans-serif;font-size:16px;overflow:hidden;display:block;position:relative;top:0;left:0;width:100%;height:100%}.cesium-viewer-cesiumWidgetContainer{width:100%;height:100%}.cesium-viewer-bottom{display:block;position:absolute;bottom:0;left:0;padding-right:5px}.cesium-viewer .cesium-widget-credits{display:inline;position:static;bottom:auto;left:auto;padding-right:0;color:#fff;font-size:10px;text-shadow:0 0 2px #000}.cesium-viewer-timelineContainer{position:absolute;bottom:0;left:169px;right:29px;height:27px;padding:0;margin:0;overflow:hidden;font-size:14px}.cesium-viewer-animationContainer{position:absolute;bottom:0;left:0;padding:0;width:169px;height:112px}.cesium-viewer-fullscreenContainer{position:absolute;bottom:0;right:0;padding:0;width:29px;height:29px;overflow:hidden}.cesium-viewer-vrContainer{position:absolute;bottom:0;right:0;padding:0;width:29px;height:29px;overflow:hidden}.cesium-viewer-toolbar{display:block;position:absolute;top:5px;right:5px}.cesium-viewer-cesiumInspectorContainer{display:block;position:absolute;top:50px;right:10px}.cesium-viewer-geocoderContainer{position:relative;display:inline-block;margin:0 3px}.cesium-viewer-cesium3DTilesInspectorContainer{display:block;position:absolute;top:50px;right:10px;max-height:calc(100% - 120px);box-sizing:border-box;overflow-y:auto;overflow-x:hidden} -------------------------------------------------------------------------------- /cesium-nextjs/next.lock/lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "http://cdn.staticfile.org/cesium/1.87.1/Widgets/widgets.css": { "integrity": "sha512-h9djTljMpI/36vV9pOtaO/bqarwzjbD6eYjE1ISRhnPDkJ3IWNpEUnSyqUUepEPDno/k6Mv+Cm179z1O1qYAJA==", "contentType": "text/css; charset=utf-8" }, 3 | "version": 1 4 | } 5 | -------------------------------------------------------------------------------- /cesium-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cesium-nextjs", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "cesium": "^1.87.1", 12 | "next": "12.0.4", 13 | "react": "17.0.2", 14 | "react-dom": "17.0.2" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "16.11.7", 18 | "@types/react": "17.0.35", 19 | "copy-webpack-plugin": "^10.0.0", 20 | "eslint": "7", 21 | "eslint-config-next": "12.0.4", 22 | "html-webpack-externals-plugin": "^3.8.0", 23 | "html-webpack-plugin": "^5.5.0", 24 | "typescript": "4.5.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /cesium-nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | // import 'http://cdn.staticfile.org/cesium/1.87.1/Widgets/widgets.css' 3 | import 'cesium/Build/Cesium/Widgets/widgets.css' 4 | 5 | import type { AppProps } from 'next/app' 6 | 7 | function MyApp({ Component, pageProps }: AppProps) { 8 | return 9 | } 10 | 11 | export default MyApp 12 | -------------------------------------------------------------------------------- /cesium-nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /cesium-nextjs/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic' 2 | import Head from 'next/head' 3 | 4 | import styles from '../styles/Home.module.css' 5 | 6 | const CesiumScene = dynamic(() => import('../components/CesiumScene'), { 7 | ssr: false, 8 | }) 9 | 10 | const Home = () => { 11 | return ( 12 |
13 | 14 | Cesium With NextJs 15 | 16 | 17 | 18 | 19 |
20 | ) 21 | } 22 | 23 | export default Home 24 | -------------------------------------------------------------------------------- /cesium-nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-nextjs/public/favicon.ico -------------------------------------------------------------------------------- /cesium-nextjs/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 100vw; 3 | height: 100vh; 4 | 5 | display: grid; 6 | place-items: center; 7 | } 8 | -------------------------------------------------------------------------------- /cesium-nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | } 6 | -------------------------------------------------------------------------------- /cesium-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /cesium-nuxt2/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /cesium-nuxt2/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | extends: [ 8 | '@nuxtjs/eslint-config-typescript', 9 | 'plugin:nuxt/recommended', 10 | 'prettier' 11 | ], 12 | plugins: [ 13 | ], 14 | // add your custom rules here 15 | rules: {} 16 | } 17 | -------------------------------------------------------------------------------- /cesium-nuxt2/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | 92 | # lock file 93 | yarn.lock 94 | package-lock.json 95 | 96 | -------------------------------------------------------------------------------- /cesium-nuxt2/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /cesium-nuxt2/README.md: -------------------------------------------------------------------------------- 1 | # cesium-nuxt2 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org). 21 | 22 | ## Special Directories 23 | 24 | You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality. 25 | 26 | ### `assets` 27 | 28 | The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts. 29 | 30 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets). 31 | 32 | ### `components` 33 | 34 | The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components. 35 | 36 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components). 37 | 38 | ### `layouts` 39 | 40 | Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop. 41 | 42 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts). 43 | 44 | 45 | ### `pages` 46 | 47 | This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically. 48 | 49 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing). 50 | 51 | ### `plugins` 52 | 53 | The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`. 54 | 55 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins). 56 | 57 | ### `static` 58 | 59 | This directory contains your static files. Each file inside this directory is mapped to `/`. 60 | 61 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 62 | 63 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static). 64 | 65 | ### `store` 66 | 67 | This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex. 68 | 69 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store). 70 | -------------------------------------------------------------------------------- /cesium-nuxt2/components/CesiumScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 39 | 40 | 46 | -------------------------------------------------------------------------------- /cesium-nuxt2/nuxt.config.js: -------------------------------------------------------------------------------- 1 | import CopyWebpackPlugin from 'copy-webpack-plugin' 2 | import { DefinePlugin } from 'webpack' 3 | import path from 'path' 4 | 5 | export default { 6 | // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode 7 | ssr: false, 8 | 9 | // Global page headers: https://go.nuxtjs.dev/config-head 10 | head: { 11 | title: 'cesium-nuxt2', 12 | htmlAttrs: { 13 | lang: 'en' 14 | }, 15 | meta: [ 16 | { charset: 'utf-8' }, 17 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 18 | { hid: 'description', name: 'description', content: '' }, 19 | { name: 'format-detection', content: 'telephone=no' } 20 | ], 21 | link: [ 22 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 23 | ] 24 | }, 25 | 26 | // Global CSS: https://go.nuxtjs.dev/config-css 27 | css: [ 28 | ], 29 | 30 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 31 | plugins: [ 32 | ], 33 | 34 | // Auto import components: https://go.nuxtjs.dev/config-components 35 | components: true, 36 | 37 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 38 | buildModules: [ 39 | // https://go.nuxtjs.dev/typescript 40 | '@nuxt/typescript-build', 41 | // https://go.nuxtjs.dev/stylelint 42 | '@nuxtjs/stylelint-module', 43 | ], 44 | 45 | // Modules: https://go.nuxtjs.dev/config-modules 46 | modules: [ 47 | ], 48 | 49 | // Build Configuration: https://go.nuxtjs.dev/config-build 50 | build: { 51 | plugins: [ 52 | new CopyWebpackPlugin({ 53 | patterns: [ 54 | { 55 | from: path.join( 56 | __dirname, 57 | 'node_modules/cesium/Build/Cesium/Workers' 58 | ), 59 | to: './Cesium/Workers', 60 | }, 61 | { 62 | from: path.join( 63 | __dirname, 64 | 'node_modules/cesium/Build/Cesium/ThirdParty' 65 | ), 66 | to: './Cesium/ThirdParty', 67 | }, 68 | { 69 | from: path.join( 70 | __dirname, 71 | 'node_modules/cesium/Build/Cesium/Assets' 72 | ), 73 | to: './Cesium/Assets', 74 | }, 75 | { 76 | from: path.join( 77 | __dirname, 78 | 'node_modules/cesium/Build/Cesium/Widgets' 79 | ), 80 | to: './Cesium/Widgets', 81 | }, 82 | ], 83 | }), 84 | new DefinePlugin({ 85 | CESIUM_BASE_URL: JSON.stringify('./_nuxt/Cesium/'), 86 | }), 87 | ], 88 | extend(config) { 89 | //#region 解决 Webpack4 打包 CesiumWorker 的问题 90 | config.module.rules.push({ 91 | test: /\.js$/, 92 | use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') }, 93 | }); 94 | //#endregion 95 | 96 | //#region 解决 Webpack 打包 Cesium 在控制台报警告的问题 97 | config.module['unknownContextRegExp'] = /^('|')\.\/.*?\1$/ 98 | config.module['unknownContextCritical'] = false 99 | config.amd = { 100 | ...config.amd, 101 | toUrlUndefined: true 102 | } 103 | //#endregion 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /cesium-nuxt2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cesium-nuxt2", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .", 11 | "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore", 12 | "lint": "yarn lint:js && yarn lint:style" 13 | }, 14 | "dependencies": { 15 | "cesium": "^1.87.1", 16 | "core-js": "^3.15.1", 17 | "nuxt": "^2.15.7" 18 | }, 19 | "devDependencies": { 20 | "@babel/eslint-parser": "^7.14.7", 21 | "@nuxt/types": "^2.15.7", 22 | "@nuxt/typescript-build": "^2.1.0", 23 | "@nuxtjs/eslint-config-typescript": "^6.0.1", 24 | "@nuxtjs/eslint-module": "^3.0.2", 25 | "@nuxtjs/stylelint-module": "^4.0.0", 26 | "@open-wc/webpack-import-meta-loader": "^0.4.7", 27 | "copy-webpack-plugin": "6.x", 28 | "eslint": "^7.29.0", 29 | "eslint-config-prettier": "^8.3.0", 30 | "eslint-plugin-nuxt": "^2.0.0", 31 | "eslint-plugin-vue": "^7.12.1", 32 | "prettier": "^2.3.2", 33 | "stylelint": "^13.13.1", 34 | "stylelint-config-prettier": "^8.0.2", 35 | "stylelint-config-standard": "^22.0.0", 36 | "worker-loader": "^3.0.8" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /cesium-nuxt2/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 32 | -------------------------------------------------------------------------------- /cesium-nuxt2/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-nuxt2/static/favicon.ico -------------------------------------------------------------------------------- /cesium-nuxt2/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /cesium-nuxt2/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'stylelint-config-standard', 4 | 'stylelint-config-prettier' 5 | ], 6 | // add your custom config here 7 | // https://stylelint.io/user-guide/configuration 8 | rules: {} 9 | } 10 | -------------------------------------------------------------------------------- /cesium-nuxt2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": [ 7 | "ESNext", 8 | "ESNext.AsyncIterable", 9 | "DOM" 10 | ], 11 | "esModuleInterop": true, 12 | "allowJs": true, 13 | "sourceMap": true, 14 | "strict": true, 15 | "noEmit": true, 16 | "experimentalDecorators": true, 17 | "baseUrl": ".", 18 | "paths": { 19 | "~/*": [ 20 | "./*" 21 | ], 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "types": [ 27 | "@nuxt/types", 28 | "@types/node" 29 | ] 30 | }, 31 | "exclude": [ 32 | "node_modules", 33 | ".nuxt", 34 | "dist" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /cesium-nuxt3/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .nuxt 4 | nuxt.d.ts 5 | .output 6 | yarn.lock 7 | package-lock.json 8 | -------------------------------------------------------------------------------- /cesium-nuxt3/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /cesium-nuxt3/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org). 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies 8 | 9 | ```bash 10 | yarn install 11 | ``` 12 | 13 | ## Development 14 | 15 | Start the development server on http://localhost:3000 16 | 17 | ```bash 18 | yarn dev 19 | ``` 20 | 21 | ## Production 22 | 23 | Build the application for production: 24 | 25 | ```bash 26 | yarn build 27 | ``` 28 | 29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment). -------------------------------------------------------------------------------- /cesium-nuxt3/components/CesiumScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | 35 | 41 | -------------------------------------------------------------------------------- /cesium-nuxt3/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtConfig } from 'nuxt3' 2 | 3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config 4 | export default defineNuxtConfig({ 5 | 6 | }) 7 | -------------------------------------------------------------------------------- /cesium-nuxt3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "nuxi dev", 5 | "build": "nuxi build", 6 | "start": "node .output/server/index.mjs" 7 | }, 8 | "devDependencies": { 9 | "nuxt3": "latest" 10 | }, 11 | "dependencies": { 12 | "cesium": "^1.87.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /cesium-nuxt3/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /cesium-nuxt3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://v3.nuxtjs.org/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /cesium-umi/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /cesium-umi/.env: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-umi/.env -------------------------------------------------------------------------------- /cesium-umi/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /npm-debug.log* 6 | /yarn-error.log 7 | /yarn.lock 8 | /package-lock.json 9 | /pnpm-lock.yaml 10 | 11 | # production 12 | /dist 13 | 14 | # misc 15 | .DS_Store 16 | 17 | # umi 18 | /src/.umi 19 | /src/.umi-production 20 | /src/.umi-test 21 | /.env.local 22 | -------------------------------------------------------------------------------- /cesium-umi/.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.md 2 | **/*.svg 3 | **/*.ejs 4 | **/*.html 5 | package.json 6 | .umi 7 | .umi-production 8 | .umi-test 9 | -------------------------------------------------------------------------------- /cesium-umi/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "printWidth": 80, 5 | "overrides": [ 6 | { 7 | "files": ".prettierrc", 8 | "options": { "parser": "json" } 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /cesium-umi/.umirc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'umi'; 2 | 3 | export default defineConfig({ 4 | nodeModulesTransform: { 5 | type: 'none', 6 | }, 7 | routes: [ 8 | { path: '/', component: '@/pages/index' }, 9 | ], 10 | fastRefresh: {}, 11 | mfsu: {}, // 会开启 webpack5 12 | workerLoader: {}, 13 | 14 | //#region 不打包 Cesium，使用 CDN 引入 15 | externals: { 16 | cesium: 'window.Cesium' 17 | }, 18 | scripts: [ 19 | // `http://cdn.staticfile.org/cesium/1.87.1/Cesium.js`, // 未压缩版本 20 | `http://cdn.staticfile.org/cesium/1.87.1/Cesium.min.js` // 使用已压缩版本 21 | ], 22 | //#endregion 23 | 24 | //#region 若使用 webpack5 打包 cesium，则需要复制 Cesium 三大金刚目录 25 | /* 26 | copy: [ 27 | { 28 | from: './node_modules/cesium/Build/CesiumUnminified/Assets/', 29 | to: 'Assets' 30 | }, 31 | { 32 | from: './node_modules/cesium/Build/CesiumUnminified/Workers/', 33 | to: 'Workers' 34 | }, 35 | { 36 | from: './node_modules/cesium/Build/CesiumUnminified/Widgets/', 37 | to: 'Widgets' 38 | } 39 | ], 40 | */ 41 | //#endregion 42 | 43 | //#region 关于 cesium 公共的 css，可以从 CDN 导入，也可以从 copy 的 Widgets 目录中导入 44 | links: [ 45 | /* 46 | // 从 copy 的 Widgets 目录中导入，要配置 copy 47 | { rel: 'stylesheet', href: './Widgets/widgets.css' }, 48 | */ 49 | 50 | // 从 cdn 导入 51 | { rel: 'stylesheet', href: 'http://cdn.staticfile.org/cesium/1.87.1/Widgets/widgets.css' }, 52 | ] 53 | //#endregion 54 | }); 55 | -------------------------------------------------------------------------------- /cesium-umi/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib" 3 | } -------------------------------------------------------------------------------- /cesium-umi/README.md: -------------------------------------------------------------------------------- 1 | # umi project 2 | 3 | ## Getting Started 4 | 5 | Install dependencies, 6 | 7 | ```bash 8 | $ yarn 9 | ``` 10 | 11 | Start the dev server, 12 | 13 | ```bash 14 | $ yarn start 15 | ``` 16 | -------------------------------------------------------------------------------- /cesium-umi/mock/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-umi/mock/.gitkeep -------------------------------------------------------------------------------- /cesium-umi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "start": "umi dev", 5 | "build": "umi build", 6 | "postinstall": "umi generate tmp", 7 | "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", 8 | "test": "umi-test", 9 | "test:coverage": "umi-test --coverage" 10 | }, 11 | "gitHooks": { 12 | "pre-commit": "lint-staged" 13 | }, 14 | "lint-staged": { 15 | "*.{js,jsx,less,md,json}": [ 16 | "prettier --write" 17 | ], 18 | "*.ts?(x)": [ 19 | "prettier --parser=typescript --write" 20 | ] 21 | }, 22 | "dependencies": { 23 | "@ant-design/pro-layout": "^6.5.0", 24 | "cesium": "^1.87.1", 25 | "react": "17.x", 26 | "react-dom": "17.x", 27 | "umi": "^3.5.13" 28 | }, 29 | "devDependencies": { 30 | "@types/react": "^17.0.0", 31 | "@types/react-dom": "^17.0.0", 32 | "@umijs/preset-react": "1.x", 33 | "@umijs/test": "^3.5.13", 34 | "lint-staged": "^10.0.7", 35 | "prettier": "^2.2.0", 36 | "typescript": "^4.1.2", 37 | "yorkie": "^2.0.0" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /cesium-umi/src/components/CesiumScene/index.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | CESIUM_BASE_URL: string 3 | } -------------------------------------------------------------------------------- /cesium-umi/src/components/CesiumScene/index.less: -------------------------------------------------------------------------------- 1 | .cesiumContainer { 2 | height: 80vh; 3 | width: 80vw; 4 | } -------------------------------------------------------------------------------- /cesium-umi/src/components/CesiumScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react' 2 | import { 3 | ArcGisMapServerImageryProvider, 4 | Viewer 5 | } from 'cesium' 6 | 7 | //#region 为 CESIUM_BASE_URL 补充定义 8 | import './index.d' 9 | /* 10 | 因为在 umi.js 项目中使用了 copy 配置，所以 `CESIUM_BASE_URL` 与其他项目略有不同 11 | */ 12 | // window.CESIUM_BASE_URL = './' 13 | window.CESIUM_BASE_URL = 'http://cdn.staticfile.org/cesium/1.87.1/' 14 | //#endregion 15 | 16 | /* 17 | 不同的包管理器此 css 文件的路径不同 18 | 若不在组件中导入，则需要在 .umirc.ts 中的 link 配置增加 widgets.css 的引用 19 | 20 | 当前配置是从 public 下获取 cesium 的公共 css，配置在 `.umirc.ts > links` 项中。 21 | */ 22 | // import '../../../node_modules/.pnpm/cesium@1.87.1/node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css' 23 | import './index.less' 24 | 25 | let viewer: Viewer; 26 | const CesiumScene = () => { 27 | const cesiumViewerDivRef = useRef(null) 28 | 29 | useEffect(() => { 30 | viewer = new Viewer(cesiumViewerDivRef.current as Element, { 31 | imageryProvider: new ArcGisMapServerImageryProvider({ 32 | url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' 33 | }) 34 | }) 35 | }, []) 36 | 37 | return
38 | } 39 | 40 | export default CesiumScene 41 | -------------------------------------------------------------------------------- /cesium-umi/src/pages/index.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #root { 7 | display: grid; 8 | place-items: center; 9 | height: 100vh; 10 | width: 100vw; 11 | } 12 | -------------------------------------------------------------------------------- /cesium-umi/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CesiumScene from '@/components/CesiumScene' 3 | import './index.less' 4 | 5 | export default function IndexPage() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /cesium-umi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "resolveJsonModule": true, 7 | "importHelpers": true, 8 | "jsx": "react-jsx", 9 | "esModuleInterop": true, 10 | "sourceMap": true, 11 | "baseUrl": "./", 12 | "strict": true, 13 | "paths": { 14 | "@/*": ["src/*"], 15 | "@@/*": ["src/.umi/*"] 16 | }, 17 | "allowSyntheticDefaultImports": true 18 | }, 19 | "include": [ 20 | "mock/**/*", 21 | "src/**/*", 22 | "config/**/*", 23 | ".umirc.ts", 24 | "typings.d.ts" 25 | ], 26 | "exclude": [ 27 | "node_modules", 28 | "lib", 29 | "es", 30 | "dist", 31 | "typings", 32 | "**/__test__", 33 | "test", 34 | "docs", 35 | "tests" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /cesium-umi/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css'; 2 | declare module '*.less'; 3 | declare module '*.png'; 4 | declare module '*.svg' { 5 | export function ReactComponent( 6 | props: React.SVGProps, 7 | ): React.ReactElement; 8 | const url: string; 9 | export default url; 10 | } 11 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | pnpm-lock.yaml 7 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib" 3 | } -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cesium-vite-reactts-tpl", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "tsc && vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "cesium": "^1.87.1", 11 | "react": "^17.0.0", 12 | "react-dom": "^17.0.0" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^17.0.0", 16 | "@types/react-dom": "^17.0.0", 17 | "@vitejs/plugin-react-refresh": "^1.3.1", 18 | "typescript": "^4.3.2", 19 | "vite": "^2.4.4" 20 | } 21 | } -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/src/CesiumScene/index.css: -------------------------------------------------------------------------------- 1 | .cesiumContainer { 2 | height: 80vh; 3 | width: 80vw; 4 | } -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/src/CesiumScene/index.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | CESIUM_BASE_URL: string 3 | } -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/src/CesiumScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react' 2 | import { 3 | Viewer, 4 | ArcGisMapServerImageryProvider 5 | } from 'cesium' 6 | import '../../node_modules/cesium/Source/Widgets/widgets.css' 7 | import './index.css' 8 | 9 | //#region 为 CESIUM_BASE_URL 补充定义 10 | import './index.d' 11 | window.CESIUM_BASE_URL = './node_modules/cesium/Build/CesiumUnminified/' 12 | //#endregion 13 | 14 | let viewer: Viewer; 15 | function CesiumScene() { 16 | const cesiumContainerRef = useRef(null) 17 | 18 | useEffect(() => { 19 | viewer = new Viewer(cesiumContainerRef.current as Element, { 20 | animation: false, 21 | imageryProvider: new ArcGisMapServerImageryProvider({ 22 | url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' 23 | }) 24 | }) 25 | }, []) 26 | 27 | return ( 28 |
29 | ) 30 | } 31 | 32 | export default CesiumScene 33 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/src/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | width: 100vw; 9 | display: grid; 10 | place-items: center; 11 | } 12 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import CesiumScene from './CesiumScene' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ) 12 | 13 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": false, 6 | "skipLibCheck": false, 7 | "esModuleInterop": false, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "ESNext", 12 | "moduleResolution": "Node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /cesium-vite-reactts-tpl/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import reactRefresh from '@vitejs/plugin-react-refresh' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [reactRefresh()] 7 | }) 8 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | pnpm-lock.yaml 8 | yarn.lock 9 | package-lock.json -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Typescript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and Typescript in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings! 8 | 9 | ### If Using ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cesium-vite-vuets-tpl", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vue-tsc --noEmit && vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "cesium": "^1.87.1", 11 | "vue": "^3.0.5" 12 | }, 13 | "devDependencies": { 14 | "@vitejs/plugin-vue": "^1.3.0", 15 | "@vue/compiler-sfc": "^3.0.5", 16 | "typescript": "^4.3.2", 17 | "vite": "^2.4.4", 18 | "vue-tsc": "^0.2.2" 19 | } 20 | } -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-vite-vuets-tpl/public/favicon.ico -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | 19 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/src/components/CesiumScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 33 | 34 | 40 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/src/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | width: 100vw; 6 | } 7 | 8 | body { 9 | display: grid; 10 | place-items: center; 11 | } 12 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | import './main.css' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue' 3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "jsx": "preserve", 8 | "sourceMap": true, 9 | "resolveJsonModule": true, 10 | "esModuleInterop": true, 11 | "lib": ["esnext", "dom"] 12 | }, 13 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 14 | } 15 | -------------------------------------------------------------------------------- /cesium-vite-vuets-tpl/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /cesium-vuecli4/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /cesium-vuecli4/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | "plugin:vue/vue3-essential", 8 | "eslint:recommended", 9 | "@vue/typescript/recommended", 10 | "@vue/prettier", 11 | "@vue/prettier/@typescript-eslint", 12 | ], 13 | parserOptions: { 14 | ecmaVersion: 2020, 15 | }, 16 | rules: { 17 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 18 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /cesium-vuecli4/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | 24 | yarn.lock 25 | pnpm-lock.yaml 26 | package-lock.json 27 | -------------------------------------------------------------------------------- /cesium-vuecli4/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /cesium-vuecli4/README.md: -------------------------------------------------------------------------------- 1 | # cesium-vuecli4 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /cesium-vuecli4/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /cesium-vuecli4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cesium-vuecli4", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "cesium": "^1.87.1", 12 | "core-js": "^3.6.5", 13 | "vue": "^3.0.0", 14 | "vue-router": "^4.0.0-0", 15 | "vuex": "^4.0.0-0" 16 | }, 17 | "devDependencies": { 18 | "@open-wc/webpack-import-meta-loader": "^0.4.7", 19 | "@typescript-eslint/eslint-plugin": "^4.18.0", 20 | "@typescript-eslint/parser": "^4.18.0", 21 | "@vue/cli-plugin-babel": "~4.5.0", 22 | "@vue/cli-plugin-eslint": "~4.5.0", 23 | "@vue/cli-plugin-router": "~4.5.0", 24 | "@vue/cli-plugin-typescript": "~4.5.0", 25 | "@vue/cli-plugin-vuex": "~4.5.0", 26 | "@vue/cli-service": "~4.5.0", 27 | "@vue/compiler-sfc": "^3.0.0", 28 | "@vue/eslint-config-prettier": "^6.0.0", 29 | "@vue/eslint-config-typescript": "^7.0.0", 30 | "copy-webpack-plugin": "6.x", 31 | "eslint": "^6.7.2", 32 | "eslint-plugin-prettier": "^3.3.1", 33 | "eslint-plugin-vue": "^7.0.0", 34 | "less": "^3.0.4", 35 | "less-loader": "^5.0.0", 36 | "lint-staged": "^9.5.0", 37 | "prettier": "^2.2.1", 38 | "typescript": "~4.1.5" 39 | }, 40 | "gitHooks": { 41 | "pre-commit": "lint-staged" 42 | }, 43 | "lint-staged": { 44 | "*.{js,jsx,vue,ts,tsx}": [ 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /cesium-vuecli4/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-vuecli4/public/favicon.ico -------------------------------------------------------------------------------- /cesium-vuecli4/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/App.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 13 | 14 | 31 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/cesium-vuecli4/src/assets/logo.png -------------------------------------------------------------------------------- /cesium-vuecli4/src/components/CesiumScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 38 | 39 | 45 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/main.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #app { 7 | display: grid; 8 | place-items: center; 9 | height: 100vh; 10 | width: 100vw; 11 | } 12 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import { key, store } from "./store"; 5 | 6 | import './main.less' 7 | 8 | const app = createApp(App) 9 | .use(store, key) 10 | .use(router) 11 | 12 | app.mount("#app") 13 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; 2 | import Home from "../views/Home.vue"; 3 | 4 | const routes: Array = [ 5 | { 6 | path: "/", 7 | name: "Home", 8 | component: Home, 9 | }, 10 | { 11 | path: "/about", 12 | name: "About", 13 | // route level code-splitting 14 | // this generates a separate chunk (about.[hash].js) for this route 15 | // which is lazy-loaded when the route is visited. 16 | component: () => 17 | import(/* webpackChunkName: "about" */ "../views/About.vue"), 18 | }, 19 | ]; 20 | 21 | const router = createRouter({ 22 | history: createWebHistory(process.env.BASE_URL), 23 | routes, 24 | }); 25 | 26 | export default router; 27 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | declare module '*.vue' { 3 | import type { DefineComponent } from 'vue' 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { Viewer } from 'cesium' 2 | import { InjectionKey } from 'vue' 3 | import { useStore as baseUseStore, createStore, Store } from 'vuex' 4 | 5 | export interface State { 6 | cesiumViewer: Viewer | null 7 | } 8 | 9 | export const key: InjectionKey> = Symbol() 10 | 11 | export const store = createStore({ 12 | state: { 13 | cesiumViewer: null 14 | }, 15 | mutations: { 16 | /** 17 | * 将 Cesium 的 Viewer 保存至中央状态库中 18 | * @param {State} state 19 | * @param {Scene} scene 20 | */ 21 | setCesiumViewer(state: State, cesiumViewer: Viewer) { 22 | state.cesiumViewer = cesiumViewer 23 | } 24 | }, 25 | actions: {}, 26 | modules: {} 27 | }) 28 | 29 | export const useStore = () => { 30 | return baseUseStore(key) 31 | } 32 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /cesium-vuecli4/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /cesium-vuecli4/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /cesium-vuecli4/vue.config.js: -------------------------------------------------------------------------------- 1 | const { DefinePlugin } = require('webpack') 2 | const CopyWebpackPlugin = require('copy-webpack-plugin') 3 | const path = require('path') 4 | 5 | /** 6 | * @type {import('@vue/cli-service').ProjectOptions} 7 | */ 8 | module.exports = { 9 | lintOnSave: false, 10 | configureWebpack: (config) => { 11 | config.module.rules.forEach(v => { 12 | if (v.use) { 13 | const idx = v.use.findIndex(w => w.loader.includes('thread-loader')) 14 | if (idx !== -1) v.use.splice(idx, 1) 15 | } 16 | }); 17 | config.amd = { ...config.amd, toUrlUndefined: true }; 18 | config.plugins.push( 19 | new DefinePlugin({ 20 | CESIUM_BASE_URL: JSON.stringify('./Cesium/'), 21 | }), 22 | new CopyWebpackPlugin({ 23 | patterns: [ 24 | { 25 | from: path.join( 26 | __dirname, 27 | 'node_modules/cesium/Build/Cesium/Workers' 28 | ), 29 | to: './Cesium/Workers', 30 | }, 31 | { 32 | from: path.join( 33 | __dirname, 34 | 'node_modules/cesium/Build/Cesium/ThirdParty' 35 | ), 36 | to: './Cesium/ThirdParty', 37 | }, 38 | { 39 | from: path.join( 40 | __dirname, 41 | 'node_modules/cesium/Build/Cesium/Assets' 42 | ), 43 | to: './Cesium/Assets', 44 | }, 45 | { 46 | from: path.join( 47 | __dirname, 48 | 'node_modules/cesium/Build/Cesium/Widgets' 49 | ), 50 | to: './Cesium/Widgets', 51 | }, 52 | ], 53 | }) 54 | ); 55 | //#region 解决 Webpack4 打包 CesiumWorker 的问题 56 | config.module.rules.push({ 57 | test: /\.js$/, 58 | use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') } 59 | }); 60 | //#endregion 61 | //#region 解决 Webpack 打包 Cesium 在控制台报警告的问题 62 | config.module.unknownContextRegExp = /^('|')\.\/.*?\1$/; 63 | config.module.unknownContextCritical = false 64 | //#endregion 65 | }, 66 | }; 67 | -------------------------------------------------------------------------------- /three-cra/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | yarn.lock 26 | pnpm-lock.yaml 27 | package-lock.json 28 | -------------------------------------------------------------------------------- /three-cra/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /three-cra/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-cra", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^17.0.0", 12 | "@types/react-dom": "^17.0.0", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-scripts": "4.0.3", 16 | "three": "^0.134.0", 17 | "typescript": "^4.1.2", 18 | "web-vitals": "^1.0.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "@types/three": "^0.134.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /three-cra/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-cra/public/favicon.ico -------------------------------------------------------------------------------- /three-cra/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /three-cra/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-cra/public/logo192.png -------------------------------------------------------------------------------- /three-cra/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-cra/public/logo512.png -------------------------------------------------------------------------------- /three-cra/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /three-cra/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /three-cra/src/components/ThreeScene/index.css: -------------------------------------------------------------------------------- 1 | .sceneContainer { 2 | width: 80vw; 3 | height: 75vh; 4 | } 5 | -------------------------------------------------------------------------------- /three-cra/src/components/ThreeScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useCallback } from 'react' 2 | import { 3 | PerspectiveCamera, 4 | Scene, 5 | BoxGeometry, 6 | MeshNormalMaterial, 7 | Mesh, 8 | WebGLRenderer, 9 | } from 'three' 10 | 11 | import './index.css' 12 | 13 | let camera: PerspectiveCamera | null = null 14 | let scene: Scene | null = null 15 | let renderer: WebGLRenderer | null = null 16 | let geometry: BoxGeometry | null = null 17 | let material: MeshNormalMaterial | null = null 18 | let mesh: Mesh | null = null 19 | 20 | /** 21 | * ThreeJS 的场景组件，绘制一个 cube 22 | */ 23 | const ThreeScene = () => { 24 | const sceneDivRef = useRef(null) 25 | 26 | const animation = useCallback((timeSpan: number) => { 27 | const refDiv = sceneDivRef.current 28 | if (!mesh || !camera || !renderer || !scene || !refDiv) return 29 | 30 | 31 | mesh.rotation.x = timeSpan / 2000 32 | mesh.rotation.y = timeSpan / 1000 33 | 34 | camera.aspect = +refDiv.clientWidth / +refDiv.clientHeight 35 | camera.updateProjectionMatrix() 36 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 37 | 38 | renderer.render(scene, camera) 39 | }, []) 40 | 41 | const initScene = useCallback(() => { 42 | const refDiv = sceneDivRef.current 43 | if (!refDiv) return 44 | 45 | camera = new PerspectiveCamera(70, +refDiv.clientWidth / +refDiv.clientHeight, 0.01, 10) 46 | camera.position.z = 1 47 | 48 | scene = new Scene() 49 | 50 | geometry = new BoxGeometry(0.2, 0.2, 0.2) 51 | material = new MeshNormalMaterial() 52 | 53 | mesh = new Mesh(geometry, material) 54 | scene.add(mesh) 55 | 56 | renderer = new WebGLRenderer({ 57 | antialias: true 58 | }) 59 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 60 | renderer.setAnimationLoop(animation) 61 | 62 | refDiv.appendChild(renderer.domElement) 63 | }, []) 64 | 65 | useEffect(() => { 66 | initScene() 67 | }, []) 68 | 69 | return ( 70 |
71 | ) 72 | } 73 | 74 | export default ThreeScene 75 | -------------------------------------------------------------------------------- /three-cra/src/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #root { 7 | width: 100vw; 8 | height: 100vh; 9 | 10 | display: grid; 11 | place-items: center; 12 | } 13 | -------------------------------------------------------------------------------- /three-cra/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import ThreeScene from './components/ThreeScene'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /three-cra/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /three-cra/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /three-cra/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /three-cra/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /three-createvue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # Editor directories and files 20 | .idea 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /three-createvue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /three-createvue/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /three-createvue/README.md: -------------------------------------------------------------------------------- 1 | # 说明 2 | 3 | 本示例为 `create-vue` 这个轻量级脚手架创建的 vue3 + ts + vue-router + vuex 的简易项目，提供了非 CDN 的 ThreeJS 简易模板。 4 | 5 | # 依赖安装与项目启动 6 | 7 | 建议使用 `yarn` 或 `pnpm` 安装并管理依赖。 8 | 9 | ``` sh 10 | pnpm install 11 | 12 | # or 13 | yarn 14 | ``` 15 | 16 | 随后即可启动 17 | 18 | ``` sh 19 | pnpm dev 20 | ``` 21 | 22 | # 场景组件 23 | 24 | 场景组件位于 `src/components/ThreeScene.vue`，组件挂载时用 cube 例子作演示，并将 scene 对象提交至 Vuex. 25 | -------------------------------------------------------------------------------- /three-createvue/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | // eslint-disable-next-line 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /three-createvue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /three-createvue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-project", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vue-tsc --noEmit && vite build", 7 | "preserve": "vite build", 8 | "serve": "vite preview --port 5050", 9 | "typecheck": "vue-tsc --noEmit" 10 | }, 11 | "dependencies": { 12 | "three": "^0.134.0", 13 | "vue": "^3.2.14", 14 | "vue-router": "^4.0.11", 15 | "vuex": "^4.0.2" 16 | }, 17 | "devDependencies": { 18 | "@types/three": "^0.133.1", 19 | "@vitejs/plugin-vue": "^1.9.3", 20 | "typescript": "~4.3.5", 21 | "vite": "^2.6.3", 22 | "vue-tsc": "^0.3.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /three-createvue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-createvue/public/favicon.ico -------------------------------------------------------------------------------- /three-createvue/src/App.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /three-createvue/src/components/ThreeScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 74 | 75 | -------------------------------------------------------------------------------- /three-createvue/src/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | width: 100vw; 6 | } 7 | 8 | body { 9 | display: grid; 10 | place-items: center; 11 | } 12 | -------------------------------------------------------------------------------- /three-createvue/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | import router from './router' 5 | import { store, key } from './store' 6 | 7 | import './main.css' 8 | 9 | const app = createApp(App) 10 | 11 | app.use(router) 12 | app.use(store, key) 13 | 14 | app.mount('#app') 15 | -------------------------------------------------------------------------------- /three-createvue/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import Home from '../views/Home.vue' 3 | 4 | const router = createRouter({ 5 | history: createWebHistory(import.meta.env.BASE_URL), 6 | routes: [ 7 | { 8 | path: '/', 9 | name: 'Home', 10 | component: Home 11 | }, 12 | { 13 | path: '/about', 14 | name: 'About', 15 | // route level code-splitting 16 | // this generates a separate chunk (About.[hash].js) for this route 17 | // which is lazy-loaded when the route is visited. 18 | component: () => import('../views/About.vue') 19 | } 20 | ] 21 | }) 22 | 23 | export default router 24 | -------------------------------------------------------------------------------- /three-createvue/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { Scene } from 'three' 2 | import { InjectionKey } from 'vue' 3 | import { useStore as baseUseStore, createStore, Store } from 'vuex' 4 | 5 | export interface State { 6 | scene: Scene | null 7 | } 8 | 9 | export const key: InjectionKey> = Symbol() 10 | 11 | export const store = createStore({ 12 | state: { 13 | scene: null 14 | }, 15 | mutations: { 16 | /** 17 | * 将 Scene 保存至中央状态库中 18 | * @param {State} state 19 | * @param {Scene} scene 20 | */ 21 | setScene(state: State, scene: Scene) { 22 | state.scene = scene 23 | } 24 | }, 25 | actions: {}, 26 | modules: {} 27 | }) 28 | 29 | export const useStore = () => { 30 | return baseUseStore(key) 31 | } 32 | -------------------------------------------------------------------------------- /three-createvue/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /three-createvue/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /three-createvue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "target": "esnext", 5 | "useDefineForClassFields": true, 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "isolatedModules": true, 9 | "strict": true, 10 | "jsx": "preserve", 11 | "sourceMap": true, 12 | "resolveJsonModule": true, 13 | "esModuleInterop": true, 14 | "paths": { 15 | "@/*": ["src/*"] 16 | }, 17 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"], 18 | "skipLibCheck": true 19 | }, 20 | "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] 21 | } 22 | -------------------------------------------------------------------------------- /three-createvue/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | resolve: { 8 | alias: { 9 | '@/': new URL('./src/', import.meta.url).pathname 10 | } 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /three-nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /three-nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | 39 | # lock file 40 | pnpm-lock.yaml 41 | yarn.lock 42 | package-lock.json 43 | -------------------------------------------------------------------------------- /three-nextjs/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib" 3 | } -------------------------------------------------------------------------------- /three-nextjs/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /three-nextjs/components/ThreeScene/index.module.css: -------------------------------------------------------------------------------- 1 | .sceneContainer { 2 | width: 80vw; 3 | height: 75vh; 4 | } 5 | -------------------------------------------------------------------------------- /three-nextjs/components/ThreeScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useCallback } from 'react' 2 | import { 3 | PerspectiveCamera, 4 | Scene, 5 | BoxGeometry, 6 | MeshNormalMaterial, 7 | Mesh, 8 | WebGLRenderer, 9 | } from 'three' 10 | 11 | import styles from './index.module.css' 12 | 13 | let camera: PerspectiveCamera | null = null 14 | let scene: Scene | null = null 15 | let renderer: WebGLRenderer | null = null 16 | let geometry: BoxGeometry | null = null 17 | let material: MeshNormalMaterial | null = null 18 | let mesh: Mesh | null = null 19 | 20 | /** 21 | * ThreeJS 的场景组件，绘制一个 cube 22 | */ 23 | const ThreeScene = () => { 24 | const sceneDivRef = useRef(null) 25 | 26 | const animation = useCallback((timeSpan: number) => { 27 | const refDiv = sceneDivRef.current 28 | if (!mesh || !camera || !renderer || !scene || !refDiv) return 29 | 30 | 31 | mesh.rotation.x = timeSpan / 2000 32 | mesh.rotation.y = timeSpan / 1000 33 | 34 | camera.aspect = +refDiv.clientWidth / +refDiv.clientHeight 35 | camera.updateProjectionMatrix() 36 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 37 | 38 | renderer.render(scene, camera) 39 | }, []) 40 | 41 | const initScene = useCallback(() => { 42 | const refDiv = sceneDivRef.current 43 | if (!refDiv) return 44 | 45 | camera = new PerspectiveCamera(70, +refDiv.clientWidth / +refDiv.clientHeight, 0.01, 10) 46 | camera.position.z = 1 47 | 48 | scene = new Scene() 49 | 50 | geometry = new BoxGeometry(0.2, 0.2, 0.2) 51 | material = new MeshNormalMaterial() 52 | 53 | mesh = new Mesh(geometry, material) 54 | scene.add(mesh) 55 | 56 | renderer = new WebGLRenderer({ 57 | antialias: true 58 | }) 59 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 60 | renderer.setAnimationLoop(animation) 61 | 62 | refDiv.appendChild(renderer.domElement) 63 | }, []) 64 | 65 | useEffect(() => { 66 | initScene() 67 | }, []) 68 | 69 | return ( 70 |
71 | ) 72 | } 73 | 74 | export default ThreeScene 75 | -------------------------------------------------------------------------------- /three-nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /three-nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | } 5 | -------------------------------------------------------------------------------- /three-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-nextjs", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "next": "12.0.4", 12 | "react": "17.0.2", 13 | "react-dom": "17.0.2", 14 | "three": "^0.134.0" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "16.11.8", 18 | "@types/react": "17.0.35", 19 | "@types/three": "^0.134.0", 20 | "eslint": "7", 21 | "eslint-config-next": "12.0.4", 22 | "typescript": "4.5.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /three-nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /three-nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /three-nextjs/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from 'next/dynamic' 2 | import Head from 'next/head' 3 | 4 | import styles from '../styles/Home.module.css' 5 | 6 | const ThreeScene = dynamic(() => import('../components/ThreeScene'), { 7 | ssr: false, 8 | }) 9 | const Home = () => { 10 | return ( 11 |
12 | 13 | Create Next App 14 | 15 | 16 | 17 | 18 |
19 | ) 20 | } 21 | 22 | export default Home 23 | -------------------------------------------------------------------------------- /three-nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-nextjs/public/favicon.ico -------------------------------------------------------------------------------- /three-nextjs/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 100vw; 3 | height: 100vh; 4 | 5 | display: grid; 6 | place-items: center; 7 | } 8 | -------------------------------------------------------------------------------- /three-nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | } 6 | -------------------------------------------------------------------------------- /three-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /three-nuxt2/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /three-nuxt2/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | extends: [ 8 | '@nuxtjs/eslint-config-typescript', 9 | 'plugin:nuxt/recommended', 10 | 'prettier' 11 | ], 12 | plugins: [ 13 | ], 14 | // add your custom rules here 15 | rules: {} 16 | } 17 | -------------------------------------------------------------------------------- /three-nuxt2/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /three-nuxt2/.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /three-nuxt2/.husky/common.sh: -------------------------------------------------------------------------------- 1 | command_exists () { 2 | command -v "$1" >/dev/null 2>&1 3 | } 4 | 5 | # Workaround for Windows 10, Git Bash and Yarn 6 | if command_exists winpty && test -t 1; then 7 | exec < /dev/tty 8 | fi 9 | -------------------------------------------------------------------------------- /three-nuxt2/.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | . "$(dirname "$0")/common.sh" 4 | 5 | yarn lint-staged 6 | -------------------------------------------------------------------------------- /three-nuxt2/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /three-nuxt2/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /three-nuxt2/README.md: -------------------------------------------------------------------------------- 1 | # three-nuxt2 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org). 21 | 22 | ## Special Directories 23 | 24 | You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality. 25 | 26 | ### `assets` 27 | 28 | The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts. 29 | 30 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets). 31 | 32 | ### `components` 33 | 34 | The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components. 35 | 36 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components). 37 | 38 | ### `layouts` 39 | 40 | Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop. 41 | 42 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts). 43 | 44 | 45 | ### `pages` 46 | 47 | This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically. 48 | 49 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing). 50 | 51 | ### `plugins` 52 | 53 | The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`. 54 | 55 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins). 56 | 57 | ### `static` 58 | 59 | This directory contains your static files. Each file inside this directory is mapped to `/`. 60 | 61 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 62 | 63 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static). 64 | 65 | ### `store` 66 | 67 | This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex. 68 | 69 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store). 70 | -------------------------------------------------------------------------------- /three-nuxt2/components/ThreeScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 74 | 75 | 81 | -------------------------------------------------------------------------------- /three-nuxt2/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode 3 | ssr: false, 4 | 5 | // Global page headers: https://go.nuxtjs.dev/config-head 6 | head: { 7 | title: 'three-nuxt2', 8 | htmlAttrs: { 9 | lang: 'zh-cn' 10 | }, 11 | meta: [ 12 | { charset: 'utf-8' }, 13 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 14 | { hid: 'description', name: 'description', content: '' }, 15 | { name: 'format-detection', content: 'telephone=no' } 16 | ], 17 | link: [ 18 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 19 | ] 20 | }, 21 | 22 | // Global CSS: https://go.nuxtjs.dev/config-css 23 | css: [ 24 | ], 25 | 26 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 27 | plugins: [ 28 | ], 29 | 30 | // Auto import components: https://go.nuxtjs.dev/config-components 31 | components: true, 32 | 33 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 34 | buildModules: [ 35 | // https://go.nuxtjs.dev/typescript 36 | '@nuxt/typescript-build', 37 | // https://go.nuxtjs.dev/stylelint 38 | '@nuxtjs/stylelint-module', 39 | ], 40 | 41 | // Modules: https://go.nuxtjs.dev/config-modules 42 | modules: [ 43 | ], 44 | 45 | // Build Configuration: https://go.nuxtjs.dev/config-build 46 | build: { 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /three-nuxt2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-nuxt2", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .", 11 | "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore", 12 | "prepare": "husky install", 13 | "lint": "yarn lint:js && yarn lint:style" 14 | }, 15 | "lint-staged": { 16 | "*.{js,vue}": "eslint", 17 | "*.{css,vue}": "stylelint" 18 | }, 19 | "dependencies": { 20 | "core-js": "^3.15.1", 21 | "nuxt": "^2.15.7", 22 | "three": "^0.134.0" 23 | }, 24 | "devDependencies": { 25 | "@babel/eslint-parser": "^7.14.7", 26 | "@nuxt/types": "^2.15.7", 27 | "@nuxt/typescript-build": "^2.1.0", 28 | "@nuxtjs/eslint-config-typescript": "^6.0.1", 29 | "@nuxtjs/eslint-module": "^3.0.2", 30 | "@nuxtjs/stylelint-module": "^4.0.0", 31 | "@types/three": "^0.133.1", 32 | "eslint": "^7.29.0", 33 | "eslint-config-prettier": "^8.3.0", 34 | "eslint-plugin-nuxt": "^2.0.0", 35 | "eslint-plugin-vue": "^7.12.1", 36 | "husky": "^6.0.0", 37 | "lint-staged": "^10.5.4", 38 | "prettier": "^2.3.2", 39 | "stylelint": "^13.13.1", 40 | "stylelint-config-prettier": "^8.0.2", 41 | "stylelint-config-standard": "^22.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /three-nuxt2/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /three-nuxt2/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-nuxt2/static/favicon.ico -------------------------------------------------------------------------------- /three-nuxt2/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /three-nuxt2/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'stylelint-config-standard', 4 | 'stylelint-config-prettier' 5 | ], 6 | // add your custom config here 7 | // https://stylelint.io/user-guide/configuration 8 | rules: {} 9 | } 10 | -------------------------------------------------------------------------------- /three-nuxt2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": [ 7 | "ESNext", 8 | "ESNext.AsyncIterable", 9 | "DOM" 10 | ], 11 | "esModuleInterop": true, 12 | "allowJs": true, 13 | "sourceMap": true, 14 | "strict": true, 15 | "noEmit": true, 16 | "experimentalDecorators": true, 17 | "baseUrl": ".", 18 | "paths": { 19 | "~/*": [ 20 | "./*" 21 | ], 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "types": [ 27 | "@nuxt/types", 28 | "@types/node" 29 | ] 30 | }, 31 | "exclude": [ 32 | "node_modules", 33 | ".nuxt", 34 | "dist" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /three-nuxt3/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .nuxt 4 | nuxt.d.ts 5 | .output 6 | -------------------------------------------------------------------------------- /three-nuxt3/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /three-nuxt3/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org). 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies 8 | 9 | ```bash 10 | yarn install 11 | ``` 12 | 13 | ## Development 14 | 15 | Start the development server on http://localhost:3000 16 | 17 | ```bash 18 | yarn dev 19 | ``` 20 | 21 | ## Production 22 | 23 | Build the application for production: 24 | 25 | ```bash 26 | yarn build 27 | ``` 28 | 29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment). -------------------------------------------------------------------------------- /three-nuxt3/components/ThreeScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 68 | 69 | -------------------------------------------------------------------------------- /three-nuxt3/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ThreeScene } from './ThreeScene.vue' -------------------------------------------------------------------------------- /three-nuxt3/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtConfig } from 'nuxt3' 2 | 3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config 4 | export default defineNuxtConfig({ 5 | 6 | }) 7 | -------------------------------------------------------------------------------- /three-nuxt3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "nuxi dev", 5 | "build": "nuxi build", 6 | "start": "node .output/server/index.mjs" 7 | }, 8 | "devDependencies": { 9 | "@types/three": "^0.133.1", 10 | "nuxt3": "^3.0.0-27268729.5b8e10f" 11 | }, 12 | "dependencies": { 13 | "three": "^0.134.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /three-nuxt3/pages/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /three-nuxt3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://v3.nuxtjs.org/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /three-umi/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /three-umi/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /npm-debug.log* 6 | /yarn-error.log 7 | /yarn.lock 8 | /package-lock.json 9 | 10 | # production 11 | /dist 12 | 13 | # misc 14 | .DS_Store 15 | 16 | # umi 17 | /src/.umi 18 | /src/.umi-production 19 | /src/.umi-test 20 | /.env.local 21 | -------------------------------------------------------------------------------- /three-umi/.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.md 2 | **/*.svg 3 | **/*.ejs 4 | **/*.html 5 | package.json 6 | .umi 7 | .umi-production 8 | .umi-test 9 | -------------------------------------------------------------------------------- /three-umi/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "printWidth": 80, 5 | "overrides": [ 6 | { 7 | "files": ".prettierrc", 8 | "options": { "parser": "json" } 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /three-umi/.umirc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'umi'; 2 | 3 | export default defineConfig({ 4 | nodeModulesTransform: { 5 | type: 'none', 6 | }, 7 | routes: [ 8 | { path: '/', component: '@/pages/index' }, 9 | ], 10 | fastRefresh: {}, 11 | mfsu: {}, // 会开启 webpack5 12 | workerLoader: {}, 13 | 14 | //#region 不打包 Three，CDN 引入，减少约 500 KB 体积（Gzip 后减小至少130KB） 15 | externals: { 16 | three: 'window.THREE' 17 | }, 18 | scripts: [ 19 | // `https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.js`, // 未压缩版本 20 | `https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js` // 使用已压缩版本 21 | ], 22 | //#endregion 23 | }); 24 | -------------------------------------------------------------------------------- /three-umi/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules\\typescript\\lib" 3 | } -------------------------------------------------------------------------------- /three-umi/README.md: -------------------------------------------------------------------------------- 1 | # umi project 2 | 3 | ## Getting Started 4 | 5 | Install dependencies, 6 | 7 | ```bash 8 | $ yarn 9 | ``` 10 | 11 | Start the dev server, 12 | 13 | ```bash 14 | $ yarn start 15 | ``` 16 | -------------------------------------------------------------------------------- /three-umi/mock/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-umi/mock/.gitkeep -------------------------------------------------------------------------------- /three-umi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "start": "umi dev", 5 | "build": "umi build", 6 | "postinstall": "umi generate tmp", 7 | "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", 8 | "test": "umi-test", 9 | "test:coverage": "umi-test --coverage" 10 | }, 11 | "gitHooks": { 12 | "pre-commit": "lint-staged" 13 | }, 14 | "lint-staged": { 15 | "*.{js,jsx,less,md,json}": [ 16 | "prettier --write" 17 | ], 18 | "*.ts?(x)": [ 19 | "prettier --parser=typescript --write" 20 | ] 21 | }, 22 | "dependencies": { 23 | "@ant-design/pro-layout": "^6.5.0", 24 | "react": "17.x", 25 | "react-dom": "17.x", 26 | "three": "^0.134.0", 27 | "umi": "^3.5.13" 28 | }, 29 | "devDependencies": { 30 | "@types/react": "^17.0.0", 31 | "@types/react-dom": "^17.0.0", 32 | "@types/three": "^0.134.0", 33 | "@umijs/preset-react": "1.x", 34 | "@umijs/test": "^3.5.13", 35 | "lint-staged": "^10.0.7", 36 | "prettier": "^2.2.0", 37 | "typescript": "^4.1.2", 38 | "yorkie": "^2.0.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /three-umi/src/components/ThreeScene/index.less: -------------------------------------------------------------------------------- 1 | .sceneContainer { 2 | width: 80vw; 3 | height: 75vh; 4 | } 5 | -------------------------------------------------------------------------------- /three-umi/src/components/ThreeScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useCallback } from 'react' 2 | import { 3 | PerspectiveCamera, 4 | Scene, 5 | BoxGeometry, 6 | MeshNormalMaterial, 7 | Mesh, 8 | WebGLRenderer, 9 | } from 'three' 10 | 11 | import styles from './index.less' 12 | 13 | let camera: PerspectiveCamera | null = null 14 | let scene: Scene | null = null 15 | let renderer: WebGLRenderer | null = null 16 | let geometry: BoxGeometry | null = null 17 | let material: MeshNormalMaterial | null = null 18 | let mesh: Mesh | null = null 19 | 20 | /** 21 | * ThreeJS 的场景组件，绘制一个 cube 22 | */ 23 | const ThreeScene = () => { 24 | const sceneDivRef = useRef(null) 25 | 26 | const animation = useCallback((timeSpan: number) => { 27 | const refDiv = sceneDivRef.current 28 | if (!mesh || !camera || !renderer || !scene || !refDiv) return 29 | 30 | 31 | mesh.rotation.x = timeSpan / 2000 32 | mesh.rotation.y = timeSpan / 1000 33 | 34 | camera.aspect = +refDiv.clientWidth / +refDiv.clientHeight 35 | camera.updateProjectionMatrix() 36 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 37 | 38 | renderer.render(scene, camera) 39 | }, []) 40 | 41 | const initScene = useCallback(() => { 42 | const refDiv = sceneDivRef.current 43 | if (!refDiv) return 44 | 45 | camera = new PerspectiveCamera(70, +refDiv.clientWidth / +refDiv.clientHeight, 0.01, 10) 46 | camera.position.z = 1 47 | 48 | scene = new Scene() 49 | 50 | geometry = new BoxGeometry(0.2, 0.2, 0.2) 51 | material = new MeshNormalMaterial() 52 | 53 | mesh = new Mesh(geometry, material) 54 | scene.add(mesh) 55 | 56 | renderer = new WebGLRenderer({ 57 | antialias: true 58 | }) 59 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 60 | renderer.setAnimationLoop(animation) 61 | 62 | refDiv.appendChild(renderer.domElement) 63 | }, []) 64 | 65 | useEffect(() => { 66 | initScene() 67 | }, []) 68 | 69 | return ( 70 |
71 | ) 72 | } 73 | 74 | export default ThreeScene 75 | -------------------------------------------------------------------------------- /three-umi/src/pages/index.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #root { 7 | display: grid; 8 | place-items: center; 9 | height: 100vh; 10 | width: 100vw; 11 | } 12 | -------------------------------------------------------------------------------- /three-umi/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import ThreeScene from '@/components/ThreeScene'; 2 | import './index.less'; 3 | 4 | export default function IndexPage() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /three-umi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "resolveJsonModule": true, 7 | "importHelpers": true, 8 | "jsx": "react-jsx", 9 | "esModuleInterop": true, 10 | "sourceMap": true, 11 | "baseUrl": "./", 12 | "strict": true, 13 | "paths": { 14 | "@/*": ["src/*"], 15 | "@@/*": ["src/.umi/*"] 16 | }, 17 | "allowSyntheticDefaultImports": true 18 | }, 19 | "include": [ 20 | "mock/**/*", 21 | "src/**/*", 22 | "config/**/*", 23 | ".umirc.ts", 24 | "typings.d.ts" 25 | ], 26 | "exclude": [ 27 | "node_modules", 28 | "lib", 29 | "es", 30 | "dist", 31 | "typings", 32 | "**/__test__", 33 | "test", 34 | "docs", 35 | "tests" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /three-umi/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css'; 2 | declare module '*.less'; 3 | declare module '*.png'; 4 | declare module '*.svg' { 5 | export function ReactComponent( 6 | props: React.SVGProps, 7 | ): React.ReactElement; 8 | const url: string; 9 | export default url; 10 | } 11 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | package-lock.json 8 | yarn.lock 9 | pnpm-lock.yaml 10 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite ReactTs Three Demo 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-vite-reactts-tpl", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "tsc && vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "react": "^17.0.0", 11 | "react-dom": "^17.0.0", 12 | "three": "^0.134.0" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^17.0.0", 16 | "@types/react-dom": "^17.0.0", 17 | "@types/three": "^0.134.0", 18 | "@vitejs/plugin-react-refresh": "^1.3.1", 19 | "typescript": "^4.3.2", 20 | "vite": "^2.4.4" 21 | } 22 | } -------------------------------------------------------------------------------- /three-vite-reactts-tpl/src/ThreeScene/index.css: -------------------------------------------------------------------------------- 1 | .sceneContainer { 2 | width: 80vw; 3 | height: 75vh; 4 | } 5 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/src/ThreeScene/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useCallback } from 'react' 2 | import { 3 | PerspectiveCamera, 4 | Scene, 5 | BoxGeometry, 6 | MeshNormalMaterial, 7 | Mesh, 8 | WebGLRenderer, 9 | } from 'three' 10 | 11 | import './index.css' 12 | 13 | let camera: PerspectiveCamera | null = null 14 | let scene: Scene | null = null 15 | let renderer: WebGLRenderer | null = null 16 | let geometry: BoxGeometry | null = null 17 | let material: MeshNormalMaterial | null = null 18 | let mesh: Mesh | null = null 19 | 20 | /** 21 | * ThreeJS 的场景组件，绘制一个 cube 22 | */ 23 | const ThreeScene = () => { 24 | const sceneDivRef = useRef(null) 25 | 26 | const animation = useCallback((timeSpan: number) => { 27 | const refDiv = sceneDivRef.current 28 | if (!mesh || !camera || !renderer || !scene || !refDiv) return 29 | 30 | 31 | mesh.rotation.x = timeSpan / 2000 32 | mesh.rotation.y = timeSpan / 1000 33 | 34 | camera.aspect = +refDiv.clientWidth / +refDiv.clientHeight 35 | camera.updateProjectionMatrix() 36 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 37 | 38 | renderer.render(scene, camera) 39 | }, []) 40 | 41 | const initScene = useCallback(() => { 42 | const refDiv = sceneDivRef.current 43 | if (!refDiv) return 44 | 45 | camera = new PerspectiveCamera(70, +refDiv.clientWidth / +refDiv.clientHeight, 0.01, 10) 46 | camera.position.z = 1 47 | 48 | scene = new Scene() 49 | 50 | geometry = new BoxGeometry(0.2, 0.2, 0.2) 51 | material = new MeshNormalMaterial() 52 | 53 | mesh = new Mesh(geometry, material) 54 | scene.add(mesh) 55 | 56 | renderer = new WebGLRenderer({ 57 | antialias: true 58 | }) 59 | renderer.setSize(+refDiv.clientWidth, +refDiv.clientHeight) 60 | renderer.setAnimationLoop(animation) 61 | 62 | refDiv.appendChild(renderer.domElement) 63 | }, []) 64 | 65 | useEffect(() => { 66 | initScene() 67 | }, []) 68 | 69 | return ( 70 |
71 | ) 72 | } 73 | 74 | export default ThreeScene 75 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/src/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #root { 7 | width: 100vw; 8 | height: 100vh; 9 | 10 | display: grid; 11 | place-items: center; 12 | } 13 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './main.css' 4 | import ThreeScene from './ThreeScene' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ) 12 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": false, 6 | "skipLibCheck": false, 7 | "esModuleInterop": false, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "ESNext", 12 | "moduleResolution": "Node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /three-vite-reactts-tpl/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import reactRefresh from '@vitejs/plugin-react-refresh' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [reactRefresh()] 7 | }) 8 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/README.md: -------------------------------------------------------------------------------- 1 | # 说明 2 | 3 | 本示例为 `vite` 中 vue3 + ts 模板创建的简易项目，提供了非 CDN 的 ThreeJS 简易模板。 4 | 5 | # 依赖安装与项目启动 6 | 7 | 建议使用 `yarn` 或 `pnpm` 安装并管理依赖。 8 | 9 | ``` sh 10 | pnpm install 11 | 12 | # or 13 | yarn 14 | ``` 15 | 16 | 随后即可启动 17 | 18 | ``` sh 19 | pnpm dev 20 | ``` 21 | 22 | # 场景组件 23 | 24 | 场景组件位于 `src/components/ThreeScene.vue`，组件挂载时用 cube 例子作演示。 25 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-vite-vuets-tpl", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vue-tsc --noEmit && vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "three": "^0.134.0", 11 | "vue": "^3.0.5" 12 | }, 13 | "devDependencies": { 14 | "@types/three": "^0.133.1", 15 | "@vitejs/plugin-vue": "^1.3.0", 16 | "@vue/compiler-sfc": "^3.0.5", 17 | "typescript": "^4.3.2", 18 | "vite": "^2.4.4", 19 | "vue-tsc": "^0.2.2" 20 | } 21 | } -------------------------------------------------------------------------------- /three-vite-vuets-tpl/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-vite-vuets-tpl/public/favicon.ico -------------------------------------------------------------------------------- /three-vite-vuets-tpl/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 11 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/src/components/ThreeScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 68 | 69 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/src/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | width: 100vw; 6 | } 7 | 8 | body { 9 | display: grid; 10 | place-items: center; 11 | } 12 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | import './main.css' 5 | 6 | const app = createApp(App) 7 | app.mount('#app') 8 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue' 3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "jsx": "preserve", 8 | "sourceMap": true, 9 | "resolveJsonModule": true, 10 | "esModuleInterop": true, 11 | "lib": ["esnext", "dom"] 12 | }, 13 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 14 | } 15 | -------------------------------------------------------------------------------- /three-vite-vuets-tpl/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /three-vuecli4/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /three-vuecli4/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | "plugin:vue/vue3-essential", 8 | "eslint:recommended", 9 | "@vue/typescript/recommended", 10 | "@vue/prettier", 11 | "@vue/prettier/@typescript-eslint", 12 | ], 13 | parserOptions: { 14 | ecmaVersion: 2020, 15 | }, 16 | rules: { 17 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 18 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /three-vuecli4/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | 24 | yarn.lock 25 | pnpm-lock.yaml 26 | package-lock.json 27 | -------------------------------------------------------------------------------- /three-vuecli4/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /three-vuecli4/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /three-vuecli4/README.md: -------------------------------------------------------------------------------- 1 | # three-vuecli4 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /three-vuecli4/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /three-vuecli4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three-vuecli4", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "three": "^0.134.0", 13 | "vue": "^3.2.21", 14 | "vue-router": "^4.0.11", 15 | "vuex": "^4.0.2" 16 | }, 17 | "devDependencies": { 18 | "@types/three": "^0.133.1", 19 | "@typescript-eslint/eslint-plugin": "^4.18.0", 20 | "@typescript-eslint/parser": "^4.18.0", 21 | "@vue/cli-plugin-babel": "~4.5.0", 22 | "@vue/cli-plugin-eslint": "~4.5.0", 23 | "@vue/cli-plugin-router": "~4.5.0", 24 | "@vue/cli-plugin-typescript": "~4.5.0", 25 | "@vue/cli-plugin-vuex": "~4.5.15", 26 | "@vue/cli-service": "~4.5.0", 27 | "@vue/compiler-sfc": "^3.0.0", 28 | "@vue/eslint-config-prettier": "^6.0.0", 29 | "@vue/eslint-config-typescript": "^7.0.0", 30 | "eslint": "^6.7.2", 31 | "eslint-plugin-prettier": "^3.3.1", 32 | "eslint-plugin-vue": "^7.0.0", 33 | "less": "^3.0.4", 34 | "less-loader": "^5.0.0", 35 | "lint-staged": "^9.5.0", 36 | "prettier": "^2.2.1", 37 | "typescript": "4.3" 38 | }, 39 | "gitHooks": { 40 | "pre-commit": "lint-staged" 41 | }, 42 | "lint-staged": { 43 | "*.{js,jsx,vue,ts,tsx}": [ 44 | "vue-cli-service lint", 45 | "git add" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /three-vuecli4/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-vuecli4/public/favicon.ico -------------------------------------------------------------------------------- /three-vuecli4/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /three-vuecli4/src/App.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 13 | 14 | 31 | -------------------------------------------------------------------------------- /three-vuecli4/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wewindy/lib3d-template/3146961ff5881f33ae938bfa998b946e666b66e6/three-vuecli4/src/assets/logo.png -------------------------------------------------------------------------------- /three-vuecli4/src/components/ThreeScene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 74 | 75 | -------------------------------------------------------------------------------- /three-vuecli4/src/main.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | width: 100vw; 6 | } 7 | 8 | body { 9 | display: grid; 10 | place-items: center; 11 | } 12 | -------------------------------------------------------------------------------- /three-vuecli4/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import { key, store } from "./store"; 5 | 6 | import './main.less' 7 | 8 | const app = createApp(App) 9 | app.use(store, key) 10 | app.use(router) 11 | app.mount("#app") 12 | -------------------------------------------------------------------------------- /three-vuecli4/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; 2 | import Home from "../views/Home.vue"; 3 | 4 | const routes: Array = [ 5 | { 6 | path: "/", 7 | name: "Home", 8 | component: Home, 9 | }, 10 | { 11 | path: "/about", 12 | name: "About", 13 | // route level code-splitting 14 | // this generates a separate chunk (about.[hash].js) for this route 15 | // which is lazy-loaded when the route is visited. 16 | component: () => 17 | import(/* webpackChunkName: "page_about" */ "../views/About.vue"), 18 | }, 19 | ]; 20 | 21 | const router = createRouter({ 22 | history: createWebHistory(process.env.BASE_URL), 23 | routes, 24 | }); 25 | 26 | export default router; 27 | -------------------------------------------------------------------------------- /three-vuecli4/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | declare module '*.vue' { 3 | import type { DefineComponent } from 'vue' 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /three-vuecli4/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { Scene } from 'three' 2 | import { InjectionKey } from 'vue' 3 | import { useStore as baseUseStore, createStore, Store } from 'vuex' 4 | 5 | export interface State { 6 | scene: Scene | null 7 | } 8 | 9 | export const key: InjectionKey> = Symbol() 10 | 11 | export const store = createStore({ 12 | state: { 13 | scene: null 14 | }, 15 | mutations: { 16 | /** 17 | * 将 Scene 保存至中央状态库中 18 | * @param {State} state 19 | * @param {Scene} scene 20 | */ 21 | setScene(state: State, scene: Scene) { 22 | state.scene = scene 23 | } 24 | }, 25 | actions: {}, 26 | modules: {} 27 | }) 28 | 29 | export const useStore = () => { 30 | return baseUseStore(key) 31 | } 32 | -------------------------------------------------------------------------------- /three-vuecli4/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /three-vuecli4/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /three-vuecli4/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /three-vuecli4/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | }; 4 | --------------------------------------------------------------------------------