├── src
    ├── store
    │   ├── actions.ts
    │   ├── mutations.ts
    │   ├── getters.ts
    │   ├── index.ts
    │   └── modules
    │   │   └── app.ts
    ├── pages
    │   ├── index
    │   │   ├── App.vue
    │   │   ├── views
    │   │   │   ├── tutorial
    │   │   │   │   ├── index.vue
    │   │   │   │   ├── Hello.vue
    │   │   │   │   ├── Dismantling.vue
    │   │   │   │   └── Dismantling2.vue
    │   │   │   └── Home.vue
    │   │   ├── main.ts
    │   │   └── router
    │   │   │   └── index.ts
    │   └── second
    │   │   ├── views
    │   │       ├── About.vue
    │   │       └── Home.vue
    │   │   ├── main.ts
    │   │   ├── App.vue
    │   │   └── router
    │   │       └── index.ts
    ├── types
    │   ├── page.params.d.ts
    │   ├── api.params.d.ts
    │   └── http.response.d.ts
    ├── assets
    │   └── logo.png
    ├── shims-vue.d.ts
    ├── config
    │   ├── app.config.ts
    │   └── constant.d.ts
    ├── utils
    │   ├── type.parser.ts
    │   ├── index.ts
    │   └── request.ts
    └── components
    │   └── HelloWorld.vue
├── .eslintignore
├── babel.config.js
├── public
    ├── favicon.png
    ├── assets
    │   └── imgs
    │   │   ├── dismantling.gif
    │   │   └── dismantling2.gif
    ├── model
    │   └── motorcycle
    │   │   ├── disdk.jpeg
    │   │   ├── nomer.jpeg
    │   │   ├── rezina_3.jpeg
    │   │   ├── protector_2.jpeg
    │   │   └── motorcycle.mtl
    └── index.html
├── jest.config.js
├── .editorconfig
├── .gitignore
├── global.d.ts
├── .prettierrc.js
├── tests
    └── unit
    │   └── example.spec.ts
├── config
    └── build.js
├── .npmrc
├── tsconfig.json
├── LICENSE
├── .github
    └── workflows
    │   └── build.yml
├── README.md
├── package.json
├── .eslintrc.js
└── vue.config.js


/src/store/actions.ts:
--------------------------------------------------------------------------------
1 | export default {};
2 | 


--------------------------------------------------------------------------------
/src/store/mutations.ts:
--------------------------------------------------------------------------------
1 | export default {};
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /dist/**
2 | /docs/**
3 | /node_modules/**
4 | 
5 | 


--------------------------------------------------------------------------------
/src/pages/index/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/cli-plugin-babel/preset']
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/src/types/page.params.d.ts:
--------------------------------------------------------------------------------
1 | export declare interface IPageParams {
2 |   id?: number;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/pages/index/views/tutorial/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view />
3 | </template>
4 | ;
5 | 


--------------------------------------------------------------------------------
/src/types/api.params.d.ts:
--------------------------------------------------------------------------------
1 | export declare interface IContentsParams {
2 |   page: number;
3 |   perPage: number;
4 | }
5 | 


--------------------------------------------------------------------------------
/public/assets/imgs/dismantling.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/public/assets/imgs/dismantling.gif


--------------------------------------------------------------------------------
/public/assets/imgs/dismantling2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/public/assets/imgs/dismantling2.gif


--------------------------------------------------------------------------------
/public/model/motorcycle/disdk.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/public/model/motorcycle/disdk.jpeg


--------------------------------------------------------------------------------
/public/model/motorcycle/nomer.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/public/model/motorcycle/nomer.jpeg


--------------------------------------------------------------------------------
/public/model/motorcycle/rezina_3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/public/model/motorcycle/rezina_3.jpeg


--------------------------------------------------------------------------------
/public/model/motorcycle/protector_2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funnyzak/threejs-tutorial/HEAD/public/model/motorcycle/protector_2.jpeg


--------------------------------------------------------------------------------
/src/pages/second/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/store/getters.ts:
--------------------------------------------------------------------------------
1 | const getters = {
2 |   device: (state: any) => state.app.device,
3 |   status: (state: any) => state.app.status
4 | };
5 | export default getters;
6 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
3 |   transform: {
4 |     '^.+\\.vue$': 'vue-jest'
5 |   }
6 | };
7 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/pages/index/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | import router from './router';
4 | import store from '@/store';
5 | 
6 | createApp(App).use(store).use(router).mount('#app');
7 | 


--------------------------------------------------------------------------------
/src/pages/second/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | import router from './router';
4 | import store from '@/store';
5 | 
6 | createApp(App).use(store).use(router).mount('#app');
7 | 


--------------------------------------------------------------------------------
/src/config/app.config.ts:
--------------------------------------------------------------------------------
 1 | // App 名称
 2 | export const appName: string = 'APP Name';
 3 | 
 4 | // baseURl
 5 | export const baseURL: string = '';
 6 | 
 7 | export const staticBaseURL: string = 'https://static.domain.com';
 8 | 
 9 | // 加密Key
10 | export const apiKey: string = 'c340176a-99a0-4f275a1d8';
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | # need install => EditorConfig for VS Code
 3 | root = true
 4 | 
 5 | [*.{js,jsx,ts,tsx,vue}]
 6 | indent_style = space
 7 | indent_size = 2
 8 | end_of_line = lf
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | max_line_length = 100
12 | 
13 | [*.md]
14 | trim_trailing_whitespace = true
15 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import app from './modules/app';
 2 | import getters from './getters';
 3 | import actions from './actions';
 4 | import mutations from './mutations';
 5 | 
 6 | import { createStore } from 'vuex';
 7 | 
 8 | export default createStore({
 9 |   state: {},
10 |   mutations,
11 |   actions,
12 |   getters,
13 |   modules: {
14 |     app
15 |   }
16 | });
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /public/tmp
 5 | .eslintcache
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/global.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.png';
 2 | declare module '*.gif';
 3 | declare module '*.jpg';
 4 | declare module '*.jpeg';
 5 | declare module '*.svg';
 6 | declare module '*.css';
 7 | declare module '*.less';
 8 | declare module '*.scss';
 9 | declare module '*.sass';
10 | declare module '*.styl';
11 | declare module '*.txt';
12 | declare module '*.html';
13 | declare module '*.hbs';
14 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | // https://prettier.io/docs/en/options.html
 2 | module.exports = {
 3 |   // 尾后逗号
 4 |   trailingComma: 'none',
 5 | 
 6 |   tabWidth: 2,
 7 |   // 结尾分号
 8 |   semi: true,
 9 |   // Use single quotes instead of double quotes.
10 |   singleQuote: true,
11 |   // Change when properties in objects are quoted.
12 |   quoteProps: 'consistent',
13 |   bracketSpacing: true,
14 |   bracketSameLine: true
15 | };
16 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.ts:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils';
 2 | import HelloWorld from '@/components/HelloWorld.vue';
 3 | 
 4 | describe('HelloWorld.vue', () => {
 5 |   it('renders props.msg when passed', () => {
 6 |     const msg = 'new message';
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       props: { msg }
 9 |     });
10 |     expect(wrapper.text()).toMatch(msg);
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/utils/type.parser.ts:
--------------------------------------------------------------------------------
 1 | import { staticBaseURL } from '@/config/app.config';
 2 | 
 3 | /**
 4 |  * 转换静态地址
 5 |  * @param url 接口返回的地址
 6 |  * @returns
 7 |  */
 8 | export const parseStaticUrl = (url: string): string => {
 9 |   if (!url || url === null || url === '') return '';
10 |   return url.startsWith('/')
11 |     ? staticBaseURL + url
12 |     : url.startsWith('@')
13 |     ? staticBaseURL + url.substring(1)
14 |     : url;
15 | };
16 | 


--------------------------------------------------------------------------------
/src/config/constant.d.ts:
--------------------------------------------------------------------------------
 1 | export const HTTP_STATUS = {
 2 |   SUCCESS: 200,
 3 |   CLIENT_ERROR: 400,
 4 |   AUTHENTICATE: 401,
 5 |   FORBIDDEN: 403,
 6 |   NOT_FOUND: 404,
 7 |   SERVER_ERROR: 500,
 8 |   BAD_GATEWAY: 502,
 9 |   SERVICE_UNAVAILABLE: 503,
10 |   GATEWAY_TIMEOUT: 504
11 | };
12 | 
13 | // 定义可使用的Request方法
14 | export type RequestMethod =
15 |   | 'OPTIONS'
16 |   | 'GET'
17 |   | 'HEAD'
18 |   | 'POST'
19 |   | 'PUT'
20 |   | 'DELETE'
21 |   | 'TRACE'
22 |   | 'CONNECT';
23 | 


--------------------------------------------------------------------------------
/src/types/http.response.d.ts:
--------------------------------------------------------------------------------
 1 | // 内容返回数据
 2 | export declare interface IContentResponse {
 3 |   city: string;
 4 |   summary: string;
 5 |   author: string;
 6 |   source: string;
 7 |   top: boolean;
 8 |   recommend: boolean;
 9 |   hot: boolean;
10 |   color: boolean;
11 |   linkUrl?: string;
12 |   addDate: string;
13 |   id: number;
14 | }
15 | 
16 | // 内容列表返回数据
17 | export declare interface IContentsResponse {
18 |   totalCount: number;
19 |   contents: Array<IContentResponse>;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/pages/second/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo"
 4 |          src="@/assets/logo.png" />
 5 |     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { Options, Vue } from 'vue-class-component';
11 | import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
12 | 
13 | @Options({
14 |   components: {
15 |     HelloWorld
16 |   }
17 | })
18 | export default class Home extends Vue {}
19 | </script>
20 | 


--------------------------------------------------------------------------------
/config/build.js:
--------------------------------------------------------------------------------
 1 | const { run } = require('runjs');
 2 | const processArgs = require('minimist')(process.argv.slice(2));
 3 | 
 4 | // const { argv } = require('process')
 5 | // console.log(processArgs, argv)
 6 | 
 7 | const mode = processArgs.mode ? processArgs.mode : 'build';
 8 | 
 9 | const runService = () => {
10 |   if (processArgs._.length > 1) {
11 |     const action = processArgs._[0];
12 |     run(`npx vue-cli-service ${mode} --action=${action} --name=${processArgs._[1]}`);
13 |   } else {
14 |     run(`npx vue-cli-service ${mode}`);
15 |   }
16 | };
17 | 
18 | runService();
19 | 


--------------------------------------------------------------------------------
/src/store/modules/app.ts:
--------------------------------------------------------------------------------
 1 | import { Module } from 'vuex';
 2 | 
 3 | interface IState {
 4 |   device: string;
 5 |   status: string;
 6 | }
 7 | 
 8 | const module: Module<IState, unknown> = {
 9 |   namespaced: true,
10 |   state: {
11 |     status: process.env.NODE_ENV,
12 |     device: 'desktop'
13 |   },
14 |   mutations: {
15 |     TOGGLE_DEVICE: (state, device) => {
16 |       state.device = device;
17 |     }
18 |   },
19 |   actions: {
20 |     toggleDevice({ commit }, device) {
21 |       commit('TOGGLE_DEVICE', device);
22 |     }
23 |   }
24 | };
25 | 
26 | export default module;
27 | 


--------------------------------------------------------------------------------
/src/pages/index/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     {{ page.title }}
 4 |     <ul>
 5 |       <li v-for="route in $router.getRoutes()" :key="route.name">
 6 |         <router-link :to="{ name: route.name }">{{ route.name }}</router-link>
 7 |       </li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import { reactive } from 'vue';
14 | 
15 | export default {
16 |   setup() {
17 |     const page = reactive({ title: 'ThreeJS Toturial' });
18 |     return {
19 |       page
20 |     };
21 |   },
22 |   data() {
23 |     return {};
24 |   },
25 |   computed: {}
26 | };
27 | </script>
28 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
 1 | # 根据需要设置
 2 | 
 3 | # registry=https://registry.npm.taobao.org
 4 | # disturl=https://npm.taobao.org/dist
 5 | # sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
 6 | # phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
 7 | # electron_mirror=https://npm.taobao.org/mirrors/electron/
 8 | # chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
 9 | # operadriver_cdnurl=https://npm.taobao.org/mirrors/operadriver
10 | # selenium_cdnurl=https://npm.taobao.org/mirrors/selenium
11 | # node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector
12 | # fsevents_binary_host_mirror=http://npm.taobao.org/mirrors/fsevents/


--------------------------------------------------------------------------------
/src/pages/second/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="nav">
 3 |     <router-link to="/">Home</router-link> |
 4 |     <router-link to="/about">About</router-link>
 5 |   </div>
 6 |   <router-view />
 7 | </template>
 8 | 
 9 | <style lang="scss">
10 | #app {
11 |   font-family: Avenir, Helvetica, Arial, sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   text-align: center;
15 |   color: #2c3e50;
16 | }
17 | 
18 | #nav {
19 |   padding: 30px;
20 | 
21 |   a {
22 |     font-weight: bold;
23 |     color: #2c3e50;
24 | 
25 |     &.router-link-exact-active {
26 |       color: #42b983;
27 |     }
28 |   }
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/pages/second/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 2 | import Home from '../views/Home.vue';
 3 | 
 4 | const routes: Array<RouteRecordRaw> = [
 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: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
17 |   }
18 | ];
19 | 
20 | const router = createRouter({
21 |   history: createWebHashHistory(),
22 |   routes
23 | });
24 | 
25 | export default router;
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "sourceMap": true,
14 |     "baseUrl": ".",
15 |     "types": ["webpack-env", "jest"],
16 |     "paths": {
17 |       "@/*": ["src/*"]
18 |     },
19 |     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
20 |   },
21 |   "include": [
22 |     "global.d.ts",
23 |     "src/**/*.ts",
24 |     "src/**/*.tsx",
25 |     "src/**/*.vue",
26 |     "tests/**/*.ts",
27 |     "tests/**/*.tsx"
28 |   ],
29 |   "exclude": ["node_modules"]
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Leon
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
 1 | export function rangeArray(size: number) {
 2 |   let _array: Array<number> = [];
 3 |   for (let i = 0; i < size; i++) {
 4 |     _array[i] = i;
 5 |   }
 6 |   return _array;
 7 | }
 8 | 
 9 | export const queryString = (params?: Record<string, string>): string => {
10 |   if (!params || params === null) {
11 |     return '';
12 |   }
13 |   return (
14 |     '?' +
15 |     Object.keys(params)
16 |       .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
17 |       .join('&')
18 |   );
19 | };
20 | 
21 | /**
22 |  * 将http转为https
23 |  * @param url 链接
24 |  */
25 | export const parse2Https = (url: string) => {
26 |   if (!url) return;
27 |   return url.startsWith('https') ? url : url.replace('http', 'https');
28 | };
29 | 
30 | export const parseDate = function (date: string) {
31 |   var t = Date.parse(date);
32 |   if (typeof t === 'number') {
33 |     return new Date(Date.parse(date.replace(/-/g, '/')));
34 |   } else {
35 |     return new Date();
36 |   }
37 | };
38 | 
39 | export function parseWeekday(sDate: any) {
40 |   var dt = typeof sDate === 'string' ? new Date(sDate.replace(/-/g, '/')) : sDate;
41 |   var a = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
42 |   return a[dt.getDay()];
43 | }
44 | 


--------------------------------------------------------------------------------
/src/pages/index/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 2 | import Home from '../views/Home.vue';
 3 | import TutorialIndex from '../views/tutorial/index.vue';
 4 | import TutorialHello from '../views/tutorial/Hello.vue';
 5 | import TutoialDismantling from '../views/tutorial/Dismantling.vue';
 6 | import TutoialDismantling2 from '../views/tutorial/Dismantling2.vue';
 7 | 
 8 | const routes: Array<RouteRecordRaw> = [
 9 |   {
10 |     path: '/',
11 |     name: 'Home',
12 |     component: Home
13 |   },
14 |   {
15 |     path: '/tutorial',
16 |     name: 'Tutoria',
17 |     component: TutorialIndex,
18 |     redirect: '/tutorial/hello',
19 |     children: [
20 |       {
21 |         path: 'hello',
22 |         name: '正方体',
23 |         component: TutorialHello
24 |       },
25 |       {
26 |         path: 'dismantling',
27 |         name: '固定模型拆分效果',
28 |         component: TutoialDismantling
29 |       },
30 |       {
31 |         path: 'dismantling2',
32 |         name: '动态模型拆分效果',
33 |         component: TutoialDismantling2
34 |       }
35 |     ]
36 |   }
37 | ];
38 | 
39 | const router = createRouter({
40 |   history: createWebHashHistory(),
41 |   routes
42 | });
43 | 
44 | export default router;
45 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     tags: # 当我们提交代码为tag 是以'v'开头的时候才会触发自动部署到服务端 如 git push tag v0.1.0
 6 |       - 'v*'
 7 |   # Allows you to run this workflow manually from the Actions tab
 8 |   workflow_dispatch:
 9 | jobs:
10 |   release:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Check out Git repository
14 |         uses: actions/checkout@v2
15 |       - name: Install Node.js, NPM and Yarn
16 |         uses: actions/setup-node@v2
17 |         with:
18 |           node-version: '16.3.0'
19 |       - name: Restore Npm Cache
20 |         uses: actions/cache@v2
21 |         with:
22 |           path: ~/.npm
23 |           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
24 |           restore-keys: |
25 |             ${{ runner.os }}-node-
26 |       - name: Install && Build
27 |         working-directory: ./
28 |         run: |
29 |           npm install
30 |           npm run build
31 |       - name: Deploy GitHubPage
32 |         uses: JamesIves/github-pages-deploy-action@4.1.5
33 |         with:
34 |           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
35 |           branch: gh-pages # The branch the action should deploy to.
36 |           folder: dist
37 |       - name: Archive Dist
38 |         uses: papeloto/action-zip@v1
39 |         with:
40 |           files: dist/
41 |           recursive: false
42 |           dest: ${{ env.DIST_ARCHIVE_NAME }}.zip
43 |       - name: Release
44 |         uses: softprops/action-gh-release@v1
45 |         if: startsWith(github.ref, 'refs/tags/')
46 |         with:
47 |           files: |
48 |             ${{ env.DIST_ARCHIVE_NAME }}.zip
49 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta
 7 |       content="width=device-width,initial-scale=1,user-scalable=no"
 8 |       name="viewport" />
 9 |     <link
10 |       rel="icon shortcut"
11 |       href="<%= BASE_URL %>/favicon.png"
12 |       type="image/x-icon" />
13 |     <title><%= htmlWebpackPlugin.options.title %></title>
14 |     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
15 |     <meta name="apple-mobile-web-app-capable" content="yes" />
16 |     <meta name="apple-touch-fullscreen" content="yes" />
17 |     <link rel="apple-touch-icon-precomposed" href="favicon.png" />
18 |     <meta name="format-detection" content="telephone=no,address=no" />
19 |     <meta name="apple-mobile-web-app-status-bar-style" content="white" />
20 |     <meta
21 |       name="author"
22 |       content="<%= webpackConfig.externals.package.author %>" />
23 |     <meta name="build" content="<%= webpackConfig.externals.nowTimeString %>" />
24 |     <meta
25 |       name="version"
26 |       content="<%= webpackConfig.externals.gitInfo.VERSION %>" />
27 |     <meta
28 |       name="branch"
29 |       content="<%= webpackConfig.externals.gitInfo.BRANCH %>" />
30 |     <meta
31 |       name="hash"
32 |       content="<%= webpackConfig.externals.gitInfo.COMMITHASH %>" />
33 |   </head>
34 | 
35 |   <body style="margin: 0">
36 |     <noscript>
37 |       <strong
38 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
39 |         properly without JavaScript enabled. Please enable it to
40 |         continue.</strong
41 |       >
42 |     </noscript>
43 |     <div id="app"></div>
44 |     <!-- built files will be auto injected -->
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ThreeJS Tutorial
 2 | 
 3 | [![action][ci-image]][ci-url]
 4 | [![license][license-image]][repository-url]
 5 | [![GitHub last commit][last-commit-image]][repository-url]
 6 | [![GitHub commit activity][commit-activity-image]][repository-url]
 7 | 
 8 | 基于 ThreeJS 做的 一些演示案例。
 9 | 
10 | [所有示例快速预览。][github-pages-url]
11 | 
12 | ## 预览
13 | 
14 | - [模型自动拆分展示/爆炸效果](https://funnyzak.github.io/threejs-tutorial/#/tutorial/dismantling2)
15 |   ![效果预览](https://raw.githubusercontent.com/funnyzak/threejs-tutorial/dev/public/assets/imgs/dismantling2.gif)
16 | - [模型自动拆分展示/爆炸效果](https://funnyzak.github.io/threejs-tutorial/#/tutorial/dismantling)
17 |   ![效果预览](https://raw.githubusercontent.com/funnyzak/threejs-tutorial/dev/public/assets/imgs/dismantling.gif)
18 | 
19 | ## 使用
20 | 
21 | ```bash
22 | # 安装依赖
23 | npm install
24 | 
25 | # 默认启动（所有）
26 | npm run serve
27 | 
28 | # 全部构建（所有）
29 | npm run build
30 | 
31 | # 仅启动**second**页
32 | npm run serve:module second
33 | 
34 | # 仅构建**second**页
35 | npm run build:module second
36 | 
37 | # Lint 格式化/检查
38 | npm run eslint
39 | 
40 | # 运行 jest 测试
41 | npm run test:unit
42 | ```
43 | 
44 | ## 参考
45 | 
46 | - [threejs](https://github.com/mrdoob/three.js/tree/master)
47 | - [threejs-model-viewer](https://adjam93.github.io/threejs-model-viewer/#)
48 | 
49 | ## License
50 | 
51 | MIT License © 2021 [funnyzak](https://github.com/funnyzak)
52 | 
53 | [ci-image]: https://img.shields.io/github/actions/workflow/status/funnyzak/threejs-tutorial/build.yml
54 | [ci-url]: https://github.com/funnyzak/threejs-tutorial/actions
55 | [license-image]: https://img.shields.io/github/license/funnyzak/threejs-tutorial.svg?style=flat-square
56 | [repository-url]: https://github.com/funnyzak/threejs-tutorial
57 | [github-pages-image]: https://img.shields.io/github/pages/funnyzak/threejs-tutorial.svg?style=flat-square
58 | [github-pages-url]: https://funnyzak.github.io/threejs-tutorial/
59 | [commit-activity-image]: https://img.shields.io/github/commit-activity/m/funnyzak/threejs-tutorial?style=flat-square
60 | [last-commit-image]: https://img.shields.io/github/last-commit/funnyzak/threejs-tutorial?style=flat-square
61 | 


--------------------------------------------------------------------------------
/src/pages/index/views/tutorial/Hello.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <canvas id="container" style="width: 100vw; height: 100vh" />
 3 | </template>
 4 | <script>
 5 | import * as THREE from 'three';
 6 | 
 7 | export default {
 8 |   data() {
 9 |     return {
10 |       canvas: null,
11 |       renderer: null,
12 |       camera: null
13 |     };
14 |   },
15 |   computed: {},
16 |   mounted() {
17 |     this.rendererCanvas();
18 | 
19 |     window.onresize = this.onWindowResize;
20 |   },
21 |   unmounted() {
22 |     window.onresize = null;
23 |   },
24 |   methods: {
25 |     onWindowResize() {
26 |       this.camera.aspect = window.innerWidth / window.innerHeight; // 重新设置宽高比
27 |       this.camera.updateProjectionMatrix(); // 更新相机
28 |       this.renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染页面大小
29 |       this.renderer.setPixelRatio(window.devicePixelRatio);
30 |     },
31 |     // 渲染
32 |     rendererCanvas() {
33 |       const canvas = window.document.querySelector('#container');
34 |       const renderer = new THREE.WebGLRenderer({
35 |         canvas,
36 |         // 执行抗锯齿
37 |         antialias: true,
38 |         // 包含透明度
39 |         alpha: true,
40 |         // 设置为可缓存
41 |         preserveDrawingBuffer: true
42 |       });
43 |       renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染页面大小
44 |       renderer.setPixelRatio(window.devicePixelRatio);
45 | 
46 |       this.canvas = canvas;
47 |       this.renderer = renderer;
48 | 
49 |       const scene = new THREE.Scene();
50 | 
51 |       this.camera = new THREE.PerspectiveCamera(
52 |         70,
53 |         window.innerWidth / window.innerHeight,
54 |         0.01,
55 |         10
56 |       );
57 |       this.camera.position.z = 1;
58 | 
59 |       const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
60 |       const material = new THREE.MeshNormalMaterial();
61 | 
62 |       const mesh = new THREE.Mesh(geometry, material);
63 |       scene.add(mesh);
64 | 
65 |       this.renderer.setAnimationLoop((time) => {
66 |         mesh.rotation.x = time / 2000;
67 |         mesh.rotation.y = time / 1000;
68 |         this.renderer.render(scene, this.camera);
69 |       });
70 |     }
71 |   }
72 | };
73 | </script>
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "threejs-tutorial",
 3 |   "description": "some threejs tutorial",
 4 |   "version": "0.2.0",
 5 |   "private": true,
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/funnyzak/threejs-tutorial.git"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "typescript",
13 |     "webpack"
14 |   ],
15 |   "author": "funnyzak <silenceace@gmail.com>",
16 |   "license": "ISC",
17 |   "bugs": {
18 |     "url": "https://github.com/funnyzak/threejs-tutorial/issues"
19 |   },
20 |   "homepage": "https://github.com/funnyzak/threejs-tutorial#readme",
21 |   "scripts": {
22 |     "serve": "cross-env node ./config/build.js --mode=serve",
23 |     "build": "cross-env node ./config/build.js --mode=build",
24 |     "serve:module": "cross-env node ./config/build.js --mode=serve module",
25 |     "build:module": "cross-env node ./config/build.js --mode=build module",
26 |     "test:unit": "vue-cli-service test:unit",
27 |     "eslint": "eslint --fix --cache .",
28 |     "lint": "vue-cli-service lint"
29 |   },
30 |   "dependencies": {
31 |     "@tweenjs/tween.js": "^18.6.4",
32 |     "axios": "^0.23.0",
33 |     "core-js": "^3.6.5",
34 |     "minimist": "^1.2.5",
35 |     "three": "^0.135.0",
36 |     "vue": "^3.0.0",
37 |     "vue-class-component": "^8.0.0-0",
38 |     "vue-router": "^4.0.0-0",
39 |     "vuex": "^4.0.0-0"
40 |   },
41 |   "devDependencies": {
42 |     "@types/jest": "^24.0.19",
43 |     "@typescript-eslint/eslint-plugin": "^4.18.0",
44 |     "@typescript-eslint/parser": "^4.18.0",
45 |     "@vue/cli-plugin-babel": "~4.5.0",
46 |     "@vue/cli-plugin-eslint": "~4.5.0",
47 |     "@vue/cli-plugin-router": "~4.5.0",
48 |     "@vue/cli-plugin-typescript": "~4.5.0",
49 |     "@vue/cli-plugin-unit-jest": "~4.5.0",
50 |     "@vue/cli-plugin-vuex": "~4.5.0",
51 |     "@vue/cli-service": "~4.5.0",
52 |     "@vue/compiler-sfc": "^3.0.0",
53 |     "@vue/eslint-config-airbnb": "^5.0.2",
54 |     "@vue/eslint-config-typescript": "^7.0.0",
55 |     "@vue/test-utils": "^2.0.0-0",
56 |     "cross-env": "^7.0.3",
57 |     "eslint": "^6.8.0",
58 |     "eslint-plugin-import": "^2.20.2",
59 |     "eslint-plugin-vue": "^7.20.0",
60 |     "git-revision-webpack-plugin": "^3.0.6",
61 |     "lint-staged": "^9.5.0",
62 |     "prettier": "2.4.1",
63 |     "runjs": "^4.4.2",
64 |     "sass": "^1.26.5",
65 |     "sass-loader": "^8.0.2",
66 |     "typescript": "~4.1.5",
67 |     "vue-eslint-parser": "^7.11.0",
68 |     "vue-jest": "^5.0.0-0",
69 |     "webpack-bundle-analyzer": "^4.5.0"
70 |   },
71 |   "gitHooks": {
72 |     "pre-commit": "lint-staged"
73 |   },
74 |   "lint-staged": {
75 |     "*.{js,jsx,vue,ts,tsx}": [
76 |       "prettier --write",
77 |       "eslint --fix --cache",
78 |       "vue-cli-service lint",
79 |       "git add"
80 |     ],
81 |     "*.{md,html,json,css,less,scss,sass}": [
82 |       "prettier --write",
83 |       "git add"
84 |     ]
85 |   },
86 |   "browserslist": {
87 |     "production": [
88 |       ">0.2%",
89 |       "not dead",
90 |       "not op_mini all"
91 |     ],
92 |     "development": [
93 |       "last 2 chrome version",
94 |       "last 2 firefox version",
95 |       "last 2 safari version"
96 |     ]
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   root: true,
  3 |   env: {
  4 |     node: true
  5 |   },
  6 |   extends: ['@vue/airbnb', '@vue/typescript/recommended'],
  7 |   plugins: ['@typescript-eslint'],
  8 |   globals: {
  9 |     window: true
 10 |   },
 11 |   parser: 'vue-eslint-parser',
 12 |   parserOptions: {
 13 |     ecmaVersion: 2020,
 14 |     parser: '@typescript-eslint/parser',
 15 |     sourceType: 'module'
 16 |   },
 17 |   overrides: [
 18 |     {
 19 |       files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
 20 |       env: {
 21 |         jest: true
 22 |       }
 23 |     }
 24 |   ],
 25 |   rules: {
 26 |     // 代码长度
 27 |     'max-len': [
 28 |       'error',
 29 |       { code: 1000, ignoreComments: true, ignoreUrls: true, ignoreTemplateLiterals: true }
 30 |     ],
 31 |     'semi': ['error', 'always'],
 32 |     'comma-dangle': ['error', 'never'],
 33 |     'func-names': 'off',
 34 |     'import/no-unresolved': 'off',
 35 |     'import/no-extraneous-dependencies': 'off',
 36 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 37 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 38 |     'no-plusplus': 'off',
 39 |     'camelcase': 'off',
 40 |     'import/extensions': 'off',
 41 |     'no-use-before-define': 'off',
 42 |     'no-var-requires': 'off',
 43 |     'import/no-commonjs': 'off',
 44 |     'no-continue': 'off',
 45 |     'no-param-reassign': 'off',
 46 |     // 控制逗号前后的空格
 47 |     'comma-spacing': [2, { before: false, after: true }],
 48 |     // 控制逗号在行尾出现还是在行首出现
 49 |     // http://eslint.org/docs/rules/comma-style
 50 |     'comma-style': [2, 'last'],
 51 |     // 圈复杂度
 52 |     'complexity': [2, 12],
 53 |     // 文件末尾强制换行
 54 |     'eol-last': 2,
 55 |     // 方法表达式是否需要命名
 56 |     'func-names': 0,
 57 |     'no-alert': 0, //禁止使用alert confirm prompt
 58 |     'no-array-constructor': 2, //禁止使用数组构造器
 59 |     'no-bitwise': 0, //禁止使用按位运算符
 60 |     'no-caller': 1, //禁止使用arguments.caller或arguments.callee
 61 |     'no-catch-shadow': 2, //禁止catch子句参数与外部作用域变量同名
 62 |     'no-class-assign': 2, //禁止给类赋值
 63 |     'no-cond-assign': 2, //禁止在条件表达式中使用赋值语句
 64 |     'no-const-assign': 2, //禁止修改const声明的变量
 65 |     'no-constant-condition': 2, //禁止在条件中使用常量表达式 if(true) if(1)
 66 |     'no-dupe-keys': 2, //在创建对象字面量时不允许键重复 {a:1,a:1}
 67 |     'no-dupe-args': 2, //函数参数不能重复
 68 |     'no-duplicate-case': 2, //switch中的case标签不能重复
 69 |     'no-else-return': 2, //如果if语句里面有return,后面不能跟else语句
 70 |     'quote-props': ['warn', 'consistent'],
 71 |     // 定义未使用
 72 |     'no-unused-vars': 'off',
 73 |     // 禁止使用 for..in  for..of
 74 |     'no-restricted-syntax': 1,
 75 |     // 禁止标识符下划线
 76 |     'no-underscore-dangle': 'off',
 77 |     // 导入多次
 78 |     'import/no-duplicates': 0,
 79 |     'import/prefer-default-export': 0,
 80 |     // 禁止promise 使用async
 81 |     'no-async-promise-executor': 0,
 82 |     // image元素必须有alt标签
 83 |     'jsx-a11y/alt-text': 0,
 84 |     // 变量作用域
 85 |     'no-shadow': 'off',
 86 |     // 不允许嵌套的三元表达式
 87 |     'no-nested-ternary': 'off',
 88 |     'no-await-in-loop': 'off',
 89 |     'class-methods-use-this': 'off',
 90 |     'prefer-promise-reject-errors': ['error', { allowEmptyReject: true }],
 91 |     // 对象/数组 解构
 92 |     'prefer-destructuring': [
 93 |       'error',
 94 |       {
 95 |         array: true,
 96 |         object: true
 97 |       },
 98 |       {
 99 |         enforceForRenamedProperties: false
100 |       }
101 |     ],
102 |     'no-unused-expressions': ['off', { allowShortCircuit: true }],
103 |     '@typescript-eslint/no-unused-vars': 'off',
104 |     '@typescript-eslint/no-shadow': 'error',
105 |     '@typescript-eslint/no-var-requires': 'off',
106 |     '@typescript-eslint/explicit-module-boundary-types': 'off'
107 |   }
108 | };
109 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,<br />
  6 |       check out the
  7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
  8 |     </p>
  9 |     <h3>Installed CLI Plugins</h3>
 10 |     <ul>
 11 |       <li>
 12 |         <a
 13 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 14 |           target="_blank"
 15 |           rel="noopener"
 16 |           >babel</a
 17 |         >
 18 |       </li>
 19 |       <li>
 20 |         <a
 21 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
 22 |           target="_blank"
 23 |           rel="noopener"
 24 |           >router</a
 25 |         >
 26 |       </li>
 27 |       <li>
 28 |         <a
 29 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
 30 |           target="_blank"
 31 |           rel="noopener"
 32 |           >vuex</a
 33 |         >
 34 |       </li>
 35 |       <li>
 36 |         <a
 37 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 38 |           target="_blank"
 39 |           rel="noopener"
 40 |           >eslint</a
 41 |         >
 42 |       </li>
 43 |       <li>
 44 |         <a
 45 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
 46 |           target="_blank"
 47 |           rel="noopener"
 48 |           >unit-jest</a
 49 |         >
 50 |       </li>
 51 |       <li>
 52 |         <a
 53 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
 54 |           target="_blank"
 55 |           rel="noopener"
 56 |           >typescript</a
 57 |         >
 58 |       </li>
 59 |     </ul>
 60 |     <h3>Essential Links</h3>
 61 |     <ul>
 62 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
 63 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
 64 |       <li>
 65 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
 66 |       </li>
 67 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
 68 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
 69 |     </ul>
 70 |     <h3>Ecosystem</h3>
 71 |     <ul>
 72 |       <li>
 73 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
 74 |       </li>
 75 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
 76 |       <li>
 77 |         <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
 78 |           >vue-devtools</a
 79 |         >
 80 |       </li>
 81 |       <li>
 82 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
 83 |       </li>
 84 |       <li>
 85 |         <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener"
 86 |           >awesome-vue</a
 87 |         >
 88 |       </li>
 89 |     </ul>
 90 |   </div>
 91 | </template>
 92 | 
 93 | <script lang="ts">
 94 | import { Options, Vue } from 'vue-class-component';
 95 | 
 96 | @Options({
 97 |   props: {
 98 |     msg: String
 99 |   }
100 | })
101 | export default class HelloWorld extends Vue {
102 |   msg!: string;
103 | }
104 | </script>
105 | 
106 | <!-- Add "scoped" attribute to limit CSS to this component only -->
107 | <style scoped lang="scss">
108 | h3 {
109 |   margin: 40px 0 0;
110 | }
111 | ul {
112 |   list-style-type: none;
113 |   padding: 0;
114 | }
115 | li {
116 |   display: inline-block;
117 |   margin: 0 10px;
118 | }
119 | a {
120 |   color: #42b983;
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/utils/request.ts:
--------------------------------------------------------------------------------
  1 | import axios, {
  2 |   AxiosRequestConfig,
  3 |   AxiosResponse,
  4 |   AxiosRequestHeaders,
  5 |   AxiosInstance,
  6 |   Method
  7 | } from 'axios';
  8 | import { queryString } from '@/utils';
  9 | 
 10 | export type RequestBefore = (config: AxiosRequestConfig) => AxiosRequestConfig;
 11 | export type ResponseHook = (response: AxiosResponse<unknown, any>) => any;
 12 | 
 13 | export default class AxiosRequest {
 14 |   requestConfig: AxiosRequestConfig<any>;
 15 | 
 16 |   requestBefore?: RequestBefore;
 17 | 
 18 |   responseHook?: ResponseHook;
 19 | 
 20 |   constructor(
 21 |     requestConfig?: AxiosRequestConfig<any>,
 22 |     requestBefore?: RequestBefore,
 23 |     responseHook?: ResponseHook
 24 |   ) {
 25 |     this.requestConfig = requestConfig && requestConfig !== null ? requestConfig : this.defaultConfig();
 26 |     this.requestBefore = requestBefore;
 27 |     this.responseHook = responseHook;
 28 |   }
 29 | 
 30 |   defaultConfig(): AxiosRequestConfig {
 31 |     return {
 32 |       baseURL: '',
 33 |       timeout: 36000000,
 34 |       withCredentials: true
 35 |     };
 36 |   }
 37 | 
 38 |   requestContentTypeHeader(contentType?: string): AxiosRequestHeaders {
 39 |     return !contentType ? {} : { 'content-type': contentType };
 40 |   }
 41 | 
 42 |   createInstance(): AxiosInstance {
 43 |     const service = axios.create(this.requestConfig);
 44 | 
 45 |     service.interceptors.request.use(
 46 |       (config: AxiosRequestConfig) => {
 47 |         config = this.requestBefore && this.requestBefore !== null ? this.requestBefore(config) : config;
 48 | 
 49 |         const headers: AxiosRequestHeaders = config.headers ? config.headers : {};
 50 |         headers['X-Requested-With'] = 'XMLHttpRequest';
 51 |         config.headers = headers || {};
 52 | 
 53 |         return config;
 54 |       },
 55 |       (error: any) => Promise.reject(new Error('请求超时'))
 56 |     );
 57 | 
 58 |     service.interceptors.response.use(
 59 |       (response: AxiosResponse<unknown, any>) => new Promise<any>((resolve, reject) => {
 60 |         if (response.status === 200) {
 61 |           if (this.responseHook && this.responseHook !== null) {
 62 |             return resolve(this.responseHook(response));
 63 |           }
 64 |           return resolve(response.data);
 65 |         }
 66 |         switch (response.status) {
 67 |           case 401:
 68 |             return reject(new Error('无此权限'));
 69 |           case 403:
 70 |             return reject(new Error('禁止访问'));
 71 |           case 404:
 72 |             return reject(new Error('接口不存在'));
 73 |           case 500:
 74 |             return reject(new Error('接口发送了异常'));
 75 |           case 504:
 76 |             return reject(new Error('代理接口服务不可用'));
 77 |           case 502:
 78 |             return reject(new Error('接口代理出错'));
 79 |           default:
 80 |             return reject(new Error('请求失败'));
 81 |         }
 82 |       }),
 83 |       (error: any) => Promise.reject(error)
 84 |     );
 85 |     return service;
 86 |   }
 87 | 
 88 |   request(
 89 |     url: string,
 90 |     method: Method,
 91 |     params?: Record<string, string>,
 92 |     data?: any,
 93 |     contentType?: string
 94 |   ) {
 95 |     return this.createInstance().request({
 96 |       url,
 97 |       method,
 98 |       params: queryString(params),
 99 |       headers: this.requestContentTypeHeader(contentType),
100 |       data
101 |     });
102 |   }
103 | 
104 |   get(
105 |     url: string,
106 |     params?: Record<string, string>,
107 |     contentType?: string
108 |   ): Promise<AxiosResponse<unknown, any>> {
109 |     return this.request(url, 'GET', params, null, contentType);
110 |   }
111 | 
112 |   del(
113 |     url: string,
114 |     params?: Record<string, string>,
115 |     contentType?: string
116 |   ): Promise<AxiosResponse<unknown, any>> {
117 |     return this.request(url, 'DELETE', params, null, contentType);
118 |   }
119 | 
120 |   post(
121 |     url: string,
122 |     params?: Record<string, string>,
123 |     data?: any,
124 |     contentType?: string
125 |   ): Promise<AxiosResponse<unknown, any>> {
126 |     return this.request(url, 'POST', params, data, contentType);
127 |   }
128 | 
129 |   put(
130 |     url: string,
131 |     params?: Record<string, string>,
132 |     data?: any,
133 |     contentType?: string
134 |   ): Promise<AxiosResponse<unknown, any>> {
135 |     return this.request(url, 'PUT', params, data, contentType);
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/public/model/motorcycle/motorcycle.mtl:
--------------------------------------------------------------------------------
  1 | # Blender MTL File: 'motorcycle.blend'
  2 | # Material Count: 22
  3 | 
  4 | newmtl Material.001
  5 | Ns 359.999993
  6 | Ka 1.000000 1.000000 1.000000
  7 | Kd 0.800000 0.800000 0.800000
  8 | Ks 0.500000 0.500000 0.500000
  9 | Ke 0.000000 0.000000 0.000000
 10 | Ni 1.450000
 11 | d 1.000000
 12 | illum 2
 13 | 
 14 | newmtl Material.002
 15 | Ns 40.812148
 16 | Ka 1.000000 1.000000 1.000000
 17 | Kd 0.008076 0.008076 0.008076
 18 | Ks 0.000000 0.000000 0.000000
 19 | Ke 0.000000 0.000000 0.000000
 20 | Ni 1.450000
 21 | d 1.000000
 22 | illum 1
 23 | map_Kd protector_2.jpeg
 24 | 
 25 | newmtl Material.003
 26 | Ns 349.173557
 27 | Ka 1.000000 1.000000 1.000000
 28 | Kd 0.800000 0.800000 0.800000
 29 | Ks 0.631313 0.631313 0.631313
 30 | Ke 0.000000 0.000000 0.000000
 31 | Ni 1.450000
 32 | d 1.000000
 33 | illum 2
 34 | map_Kd nomer.jpeg
 35 | 
 36 | newmtl Material.004
 37 | Ns 48.600219
 38 | Ka 1.000000 1.000000 1.000000
 39 | Kd 0.800000 0.800000 0.800000
 40 | Ks 0.000000 0.000000 0.000000
 41 | Ke 0.000000 0.000000 0.000000
 42 | Ni 1.450000
 43 | d 1.000000
 44 | illum 1
 45 | map_Kd rezina_3.jpeg
 46 | 
 47 | newmtl Material.005
 48 | Ns 250.000000
 49 | Ka 1.000000 1.000000 1.000000
 50 | Kd 0.800000 0.800000 0.800000
 51 | Ks 0.500000 0.500000 0.500000
 52 | Ke 0.000000 0.000000 0.000000
 53 | Ni 1.450000
 54 | d 1.000000
 55 | illum 2
 56 | 
 57 | newmtl Material.006
 58 | Ns 4.999492
 59 | Ka 1.000000 1.000000 1.000000
 60 | Kd 0.083532 0.035709 0.022448
 61 | Ks 0.186869 0.186869 0.186869
 62 | Ke 0.000000 0.000000 0.000000
 63 | Ni 1.450000
 64 | d 1.000000
 65 | illum 2
 66 | 
 67 | newmtl None
 68 | Ns 499.999983
 69 | Ka 1.000000 1.000000 1.000000
 70 | Kd 0.800000 0.800000 0.800000
 71 | Ks 0.800000 0.800000 0.800000
 72 | Ke 0.000000 0.000000 0.000000
 73 | Ni 1.450000
 74 | d 1.000000
 75 | illum 2
 76 | 
 77 | newmtl bak
 78 | Ns 745.867762
 79 | Ka 1.000000 1.000000 1.000000
 80 | Kd 0.800000 0.143573 0.030582
 81 | Ks 0.262626 0.262626 0.262626
 82 | Ke 0.000000 0.000000 0.000000
 83 | Ni 1.450000
 84 | d 1.000000
 85 | illum 2
 86 | 
 87 | newmtl bak.001
 88 | Ns 451.203952
 89 | Ka 1.000000 1.000000 1.000000
 90 | Kd 0.559602 0.102903 0.022869
 91 | Ks 0.212121 0.212121 0.212121
 92 | Ke 0.000000 0.000000 0.000000
 93 | Ni 1.450000
 94 | d 1.000000
 95 | illum 2
 96 | 
 97 | newmtl black_paint
 98 | Ns 325.706574
 99 | Ka 1.000000 1.000000 1.000000
100 | Kd 0.018849 0.018849 0.018849
101 | Ks 0.267677 0.267677 0.267677
102 | Ke 0.000000 0.000000 0.000000
103 | Ni 1.450000
104 | d 1.000000
105 | illum 2
106 | 
107 | newmtl black_plastic
108 | Ns 159.192953
109 | Ka 1.000000 1.000000 1.000000
110 | Kd 0.028779 0.027354 0.035214
111 | Ks 0.358586 0.358586 0.358586
112 | Ke 0.000000 0.000000 0.000000
113 | Ni 1.450000
114 | d 1.000000
115 | illum 2
116 | 
117 | newmtl brown_skin
118 | Ns 167.355443
119 | Ka 1.000000 1.000000 1.000000
120 | Kd 0.178863 0.062150 0.024090
121 | Ks 0.459596 0.459596 0.459596
122 | Ke 0.000000 0.000000 0.000000
123 | Ni 1.450000
124 | d 1.000000
125 | illum 2
126 | 
127 | newmtl chrome
128 | Ns 566.294237
129 | Ka 1.000000 1.000000 1.000000
130 | Kd 0.800000 0.800000 0.800000
131 | Ks 0.419192 0.419192 0.419192
132 | Ke 0.000000 0.000000 0.000000
133 | Ni 1.450000
134 | d 1.000000
135 | illum 3
136 | 
137 | newmtl diskl
138 | Ns 337.338018
139 | Ka 1.000000 1.000000 1.000000
140 | Kd 0.800000 0.800000 0.800000
141 | Ks 0.388889 0.388889 0.388889
142 | Ke 0.000000 0.000000 0.000000
143 | Ni 1.450000
144 | d 1.000000
145 | illum 3
146 | map_Kd disdk.jpeg
147 | 
148 | newmtl fara
149 | Ns 359.999993
150 | Ka 1.000000 1.000000 1.000000
151 | Kd 0.800000 0.800000 0.800000
152 | Ks 0.500000 0.500000 0.500000
153 | Ke 0.000000 0.000000 0.000000
154 | Ni 1.450000
155 | d 1.000000
156 | illum 2
157 | 
158 | newmtl gold_paint
159 | Ns 56.346278
160 | Ka 1.000000 1.000000 1.000000
161 | Kd 0.233016 0.057328 0.030672
162 | Ks 0.439394 0.439394 0.439394
163 | Ke 0.000000 0.000000 0.000000
164 | Ni 1.450000
165 | d 1.000000
166 | illum 3
167 | 
168 | newmtl greu_plastic
169 | Ns 77.160501
170 | Ka 1.000000 1.000000 1.000000
171 | Kd 0.049550 0.049550 0.049550
172 | Ks 0.186869 0.186869 0.186869
173 | Ke 0.000000 0.000000 0.000000
174 | Ni 1.450000
175 | d 1.000000
176 | illum 2
177 | 
178 | newmtl hild.001
179 | Ns 359.999993
180 | Ka 1.000000 1.000000 1.000000
181 | Kd 0.800000 0.800000 0.800000
182 | Ks 0.500000 0.500000 0.500000
183 | Ke 0.000000 0.000000 0.000000
184 | Ni 1.450000
185 | d 1.000000
186 | illum 2
187 | 
188 | newmtl metall
189 | Ns 31.246822
190 | Ka 1.000000 1.000000 1.000000
191 | Kd 0.420025 0.420025 0.420025
192 | Ks 0.348485 0.348485 0.348485
193 | Ke 0.000000 0.000000 0.000000
194 | Ni 1.450000
195 | d 1.000000
196 | illum 3
197 | 
198 | newmtl new_black
199 | Ns 56.346278
200 | Ka 1.000000 1.000000 1.000000
201 | Kd 0.018820 0.015783 0.015033
202 | Ks 0.439394 0.439394 0.439394
203 | Ke 0.000000 0.000000 0.000000
204 | Ni 1.450000
205 | d 1.000000
206 | illum 2
207 | 
208 | newmtl red_paint
209 | Ns 478.752190
210 | Ka 1.000000 1.000000 1.000000
211 | Kd 0.800000 0.043090 0.043090
212 | Ks 0.368687 0.368687 0.368687
213 | Ke 0.000000 0.000000 0.000000
214 | Ni 1.450000
215 | d 1.000000
216 | illum 2
217 | 
218 | newmtl yelow_plastic
219 | Ns 220.615270
220 | Ka 1.000000 1.000000 1.000000
221 | Kd 0.673849 0.316938 0.035752
222 | Ks 0.318182 0.318182 0.318182
223 | Ke 0.000000 0.000000 0.000000
224 | Ni 1.450000
225 | d 1.000000
226 | illum 2
227 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const fs = require('fs');
  3 | const processArgs = require('minimist')(process.argv.slice(2));
  4 | 
  5 | const resolve = (dir) => path.resolve(__dirname, dir);
  6 | 
  7 | // 入口页面基础配置
  8 | const pageBaseConfig = {
  9 |   root: resolve('src/pages'),
 10 |   entry: 'main.ts',
 11 |   template: 'public/index.html',
 12 |   filename: 'index.html'
 13 | };
 14 | 
 15 | // https://www.npmjs.com/package/webpack-bundle-analyzer
 16 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 17 | // https://www.npmjs.com/package/git-revision-webpack-plugin
 18 | const GitRevisionPlugin = require('git-revision-webpack-plugin');
 19 | 
 20 | const gitRevisionPlugin = new GitRevisionPlugin({
 21 |   branch: true
 22 | });
 23 | 
 24 | const package = require('./package.json');
 25 | 
 26 | const gitInfo = {
 27 |   VERSION: gitRevisionPlugin.version(),
 28 |   COMMITHASH: gitRevisionPlugin.commithash(),
 29 |   BRANCH: gitRevisionPlugin.branch()
 30 | };
 31 | 
 32 | // 模板参数，应用 template html
 33 | // 可在html 使用如： <%=webpackConfig.externals.gitInfo.BRANCH%>
 34 | const templateParameters = {
 35 |   nowTimeString: new Date().toISOString(),
 36 |   // package.json信息
 37 |   package,
 38 |   // 进程信息
 39 |   process: {
 40 |     env: process.env
 41 |   },
 42 |   // git信息
 43 |   gitInfo
 44 | };
 45 | 
 46 | // multi-page 模式, 获取所有page
 47 | const getPages = () => {
 48 |   // 同步读取pages下的文件
 49 |   const files = fs.readdirSync(pageBaseConfig.root);
 50 |   const pages = {};
 51 | 
 52 |   for (let i = 0; i < files.length; i++) {
 53 |     const pageInfo = { name: files[i] };
 54 |     pageInfo.path = path.join(pageBaseConfig.root, pageInfo.name);
 55 | 
 56 |     if (fs.lstatSync(pageInfo.path).isFile()) {
 57 |       continue;
 58 |     }
 59 | 
 60 |     // 如果没有入口文件，则跳过
 61 |     pageInfo.entry = path.join(pageInfo.path, pageBaseConfig.entry);
 62 |     if (!fs.existsSync(pageInfo.entry)) {
 63 |       continue;
 64 |     }
 65 | 
 66 |     // 如果对应page下有index模板，则使用该模板，否则使用默认
 67 |     const templatePath = path.join(pageInfo.path, 'index.html');
 68 |     const template = fs.existsSync(templatePath) ? templatePath : pageBaseConfig.template;
 69 | 
 70 |     pages[pageInfo.name] = {
 71 |       entry: pageInfo.entry,
 72 |       template,
 73 |       filename: pageInfo.name === 'index' ? 'index.html' : `${pageInfo.name}.html`,
 74 |       title: pageInfo.name
 75 |     };
 76 |   }
 77 |   return pages;
 78 | };
 79 | 
 80 | /**
 81 |  * 如果以单模块启动，则只构建单页面
 82 |  */
 83 | let entryPages = getPages();
 84 | if (processArgs.action === 'module' && processArgs.name && entryPages[processArgs.name]) {
 85 |   const tmpPage = {};
 86 |   tmpPage[processArgs.name] = entryPages[processArgs.name];
 87 |   entryPages = tmpPage;
 88 | }
 89 | 
 90 | module.exports = {
 91 |   pages: entryPages,
 92 |   // 使用相对路径
 93 |   publicPath: '',
 94 |   // 将 lint 错误输出为编译警告
 95 |   lintOnSave: 'warning',
 96 |   // 输出文件夹
 97 |   outputDir: 'dist',
 98 |   // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
 99 |   assetsDir: 'static',
100 |   // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
101 |   indexPath: 'index.html',
102 |   // 文件名hash
103 |   filenameHashing: true,
104 |   // 生产环境不生成sourcemap
105 |   productionSourceMap: false,
106 |   // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
107 |   // crossorigin: 'anonymous',
108 |   devServer: {
109 |     open: process.env.NODE_ENV === 'development',
110 |     host: '0.0.0.0',
111 |     port: '2085',
112 |     overlay: {
113 |       warnings: false,
114 |       errors: true
115 |     },
116 |     // 代理设置
117 |     proxy: {
118 |       // detail:https://github.com/chimurai/http-proxy-middleware#proxycontext-config
119 |       '/api': {
120 |         target: 'https://request.worktile.com/6n6gHbBDL',
121 |         changeOrigin: true,
122 |         pathRewrite: {
123 |           '^/api/1': '/api/3', // rewrite path
124 |           '^/api/remove/path': '/path' // remove base path
125 |         }
126 |       }
127 |     }
128 |   },
129 |   pluginOptions: {},
130 |   // webpack 配置
131 |   configureWebpack: (config) => {
132 |     // config.resolve.alias['@'] = 'src'
133 | 
134 |     // 注入变量
135 |     config.externals = { ...config.externals, ...templateParameters };
136 | 
137 |     if (process.env.NODE_ENV === 'production') {
138 |       // 为生产环境修改配置...
139 |     } else {
140 |       // config.plugins.push(new BundleAnalyzerPlugin());
141 |       config.plugins.push(gitRevisionPlugin);
142 |     }
143 |   },
144 |   // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
145 |   // https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
146 |   chainWebpack: (config) => {
147 |     config.module
148 |       .rule('vue')
149 |       .use('vue-loader')
150 |       .tap((options) => options);
151 | 
152 |     // https://webpack.docschina.org/plugins/split-chunks-plugin/#splitchunkscachegroups
153 |     // config.optimization.splitChunks({
154 |     //   chunks: 'all',
155 |     //   minSize: 1000,
156 |     //   minChunks: 1,
157 |     //   maxAsyncRequests: 30,
158 |     //   maxInitialRequests: 30,
159 |     //   cacheGroups: {
160 |     //     libs: {
161 |     //       name: 'chunk-libs',
162 |     //       test: /[\\/]node_modules[\\/]/,
163 |     //       priority: 30,
164 |     //       chunks: 'initial' // only package third parties that are initially dependent
165 |     //     },
166 |     //     page: {
167 |     //       name: 'page',
168 |     //       priority: 20,
169 |     //       chunks: 'initial'
170 |     //     },
171 |     //   }
172 |     // })
173 |   },
174 |   // css 配置
175 |   css: {
176 |     sourceMap: process.env.NODE_ENV !== 'production'
177 |   }
178 | };
179 | 


--------------------------------------------------------------------------------
/src/pages/index/views/tutorial/Dismantling.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="button-container">
  4 |       <button @click="meshToggle">{{ !meshExpand ? '分体扩散' : '复原模型' }}</button>
  5 |     </div>
  6 |     <div class="footer">
  7 |       Model by&nbsp;<a
  8 |         href="https://sketchfab.com/3d-models/motorcycle-custom-bike-jawa-low-poly-13771fe558604aedae09b5157029e790"
  9 |         target="_blank"
 10 |         >Kreems</a
 11 |       >
 12 |     </div>
 13 |     <canvas
 14 |       id="container"
 15 |       ref="container"
 16 |       style="width: 100vw; height: 100vh; background-color: #222" />
 17 |   </div>
 18 | </template>
 19 | <script>
 20 | /**
 21 |  * Created by leon<silenceace@gmail.com> on 22/06/02.
 22 |  */
 23 | import * as THREE from 'three';
 24 | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 25 | import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
 26 | import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 27 | 
 28 | const TWEEN = require('@tweenjs/tween.js');
 29 | 
 30 | const modelInfo = {
 31 |   name: 'motorcycle',
 32 |   res: {
 33 |     obj: 'model/motorcycle/motorcycle.obj',
 34 |     mtl: 'model/motorcycle/motorcycle.mtl'
 35 |   }
 36 | };
 37 | 
 38 | let scene;
 39 | 
 40 | export default {
 41 |   data() {
 42 |     return {
 43 |       container: null,
 44 |       canvas: null,
 45 |       renderer: null,
 46 |       camera: null,
 47 |       controls: null,
 48 |       activeModel: null,
 49 |       activeModelMaterials: null,
 50 |       actvieModelSize: {
 51 |         boxSize: null,
 52 |         boxCenter: null,
 53 |         boxSizeLength: null
 54 |       }
 55 |     };
 56 |   },
 57 |   computed: {},
 58 |   mounted() {
 59 |     window.onresize = this.onWindowResize;
 60 | 
 61 |     this.container = this.$refs.container;
 62 | 
 63 |     this.rendererCanvas();
 64 |     this.loadModel(modelInfo);
 65 |   },
 66 |   unmounted() {
 67 |     window.onresize = null;
 68 |   },
 69 |   methods: {
 70 |     objMove(obj, from, to) {
 71 |       console.log('obj move', obj, from, to);
 72 | 
 73 |       new TWEEN.Tween({ x: from.x, y: from.y, z: from.z })
 74 |         .to({ x: to.x, y: to.y, z: to.z }, 500)
 75 |         .easing(TWEEN.Easing.Quadratic.Out)
 76 |         .onUpdate((val) => {
 77 |           obj.position.set(val.x, val.y, val.z);
 78 |         })
 79 |         .start();
 80 |     },
 81 |     meshToggle() {
 82 |       this.meshExpand = !this.meshExpand;
 83 | 
 84 |       if (this.meshExpand) {
 85 |         this.dismantling();
 86 |       } else {
 87 |         this.recovery();
 88 |       }
 89 |     },
 90 |     // 分体恢复
 91 |     dismantling() {
 92 |       this.activeModel.traverse((e) => {
 93 |         if (e.isMesh) {
 94 |           this.objMove(e, e.fromPosition, e.toPosition);
 95 |         }
 96 |       });
 97 |       console.log('dismantling done.');
 98 |     },
 99 |     // 分体展开
100 |     recovery() {
101 |       this.activeModel.traverse((e) => {
102 |         if (e.isMesh) {
103 |           this.objMove(e, e.toPosition, e.fromPosition);
104 |         }
105 |       });
106 |       console.log('recovery done.');
107 |     },
108 |     onWindowResize() {
109 |       this.camera.aspect = this.container.offsetWidt / this.container.offsetHeight; // 重新设置宽高比
110 |       this.camera.updateProjectionMatrix(); // 更新相机
111 |       this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
112 |     },
113 |     // 初始化画布
114 |     rendererCanvas() {
115 |       const canvas = window.document.querySelector('#container');
116 |       const renderer = new THREE.WebGLRenderer({
117 |         canvas,
118 |         // 执行抗锯齿
119 |         antialias: true,
120 |         // 包含透明度
121 |         alpha: true,
122 |         // 设置为可缓存
123 |         preserveDrawingBuffer: true
124 |       });
125 | 
126 |       renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
127 |       renderer.setPixelRatio(window.devicePixelRatio);
128 | 
129 |       this.canvas = canvas;
130 |       this.renderer = renderer;
131 | 
132 |       scene = new THREE.Scene();
133 |     },
134 |     // 根据模型大小计算并设置相机
135 |     setCamera() {
136 |       const camera = new THREE.PerspectiveCamera(
137 |         45,
138 |         this.container.offsetWidth / this.container.offsetHeight,
139 |         0.1,
140 |         1000
141 |       );
142 |       // 设置相机默认位置
143 |       camera.position.set(0, 10, 20);
144 | 
145 |       this.frameArea(
146 |         this.actvieModelSize.boxSizeLength * 1.2,
147 |         this.actvieModelSize.boxSizeLength,
148 |         this.actvieModelSize.boxCenter,
149 |         camera
150 |       );
151 |       this.camera = camera;
152 | 
153 |       this.setLight();
154 | 
155 |       this.setControls();
156 | 
157 |       this.renderer.render(scene, this.camera);
158 |     },
159 |     setLight() {
160 |       const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
161 |       scene.add(ambientLight);
162 | 
163 |       const pointLight = new THREE.PointLight(0xffffff, 0.4);
164 |       this.camera.add(pointLight);
165 | 
166 |       scene.add(this.camera);
167 |     },
168 |     setControls() {
169 |       const controls = new OrbitControls(this.camera, this.renderer.domElement);
170 |       controls.update();
171 |       this.controls = controls;
172 | 
173 |       const animate = () => {
174 |         TWEEN.update();
175 | 
176 |         window.requestAnimationFrame(animate);
177 |         // required if controls.enableDamping or controls.autoRotate are set to true
178 |         this.controls.update();
179 |         this.renderer.render(scene, this.camera);
180 |       };
181 |       animate();
182 |     },
183 |     // 根据模型尺寸为相机设置合适的位置
184 |     frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
185 |       const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.6;
186 |       const halfFovY = THREE.MathUtils.degToRad(camera.fov * 0.5);
187 |       const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
188 |       const direction = new THREE.Vector3()
189 |         .subVectors(camera.position, boxCenter)
190 |         .multiply(new THREE.Vector3(1, 0, 1))
191 |         .normalize();
192 | 
193 |       camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
194 | 
195 |       camera.near = boxSize / 1000;
196 |       camera.far = boxSize * 1000;
197 | 
198 |       camera.updateProjectionMatrix();
199 | 
200 |       camera.lookAt(boxCenter);
201 |     },
202 |     loadModel(_modelInfo) {
203 |       const mtlManager = this.loadMtlManager();
204 |       const modelManager = this.loadModelManager();
205 | 
206 |       const mtlLoader = new MTLLoader(mtlManager);
207 |       mtlLoader.load(_modelInfo.res.mtl, (materials) => {
208 |         materials.preload();
209 | 
210 |         console.log('model materials:', materials);
211 | 
212 |         this.activeModelMaterials = materials;
213 | 
214 |         new OBJLoader(modelManager)
215 |           .setMaterials(materials)
216 |           .load(
217 |             _modelInfo.res.obj,
218 |             this.loadModelSuccess,
219 |             this.loadModelProcess,
220 |             this.loadModelError
221 |           );
222 |       });
223 |     },
224 |     // MTL加载控制器
225 |     loadMtlManager() {
226 |       const manager = new THREE.LoadingManager();
227 |       manager.onStart = function (item, loaded, total) {
228 |         console.log('Loading Mtl started');
229 |       };
230 |       // 纹理加载完成清除滚动条
231 |       manager.onLoad = function () {
232 |         console.log('Loading Mtl complete');
233 |       };
234 | 
235 |       manager.onProgress = function (item, loaded, total) {
236 |         const percentComplete = (loaded / total) * 100;
237 |         console.log('Mtl loading percent：', percentComplete);
238 |       };
239 | 
240 |       manager.onError = function (err) {
241 |         console.error('Mtl Load Error.', err);
242 |       };
243 |       return manager;
244 |     },
245 |     /**
246 |      * 模型加载器
247 |      */
248 |     loadModelManager() {
249 |       const manager = new THREE.LoadingManager();
250 |       manager.onStart = function (item, loaded, total) {
251 |         console.log('Loading Model started');
252 |       };
253 |       // 纹理加载完成清除滚动条
254 |       manager.onLoad = function () {
255 |         console.log('Loading Model complete');
256 |       };
257 | 
258 |       manager.onProgress = function (item, loaded, total) {
259 |         const percentComplete = (loaded / total) * 100;
260 |         console.log('Model load percent：', percentComplete);
261 |       };
262 | 
263 |       manager.onError = function (url) {
264 |         console.error('Model load error:', url);
265 |       };
266 |       return manager;
267 |     },
268 |     // 加载成功模型
269 |     loadModelSuccess(modelNode) {
270 |       console.log('model node', modelNode);
271 | 
272 |       const modelNodeHelp = new THREE.BoxHelper(modelNode, 0xffff00);
273 | 
274 |       scene.add(modelNodeHelp);
275 |       scene.add(modelNode);
276 | 
277 |       const moveSeed = 1.2;
278 | 
279 |       // 根据模型的尺寸设置相机位置
280 |       const box = new THREE.Box3().setFromObject(modelNode);
281 |       const boxSize = box.getSize(new THREE.Vector3());
282 |       const boxSizeLength = boxSize.length();
283 |       const boxCenter = box.getCenter(new THREE.Vector3());
284 | 
285 |       this.actvieModelSize.boxSize = boxSize;
286 |       this.actvieModelSize.boxCenter = boxCenter;
287 |       this.actvieModelSize.boxSizeLength = boxSizeLength;
288 | 
289 |       // 设置加载模型的名称
290 |       modelNode.name = 'mainModel';
291 | 
292 |       this.activeModel = modelNode;
293 | 
294 |       // 模型变换
295 |       modelNode.traverse((item) => {
296 |         if (item instanceof THREE.Mesh) {
297 |           // 设置所有的 Mesh 实例属性 接收阴影等等
298 |           item.castShadow = true;
299 |           item.receiveShadow = true;
300 | 
301 |           const meshBox = new THREE.Box3().setFromObject(item);
302 |           const meshCenter = meshBox.getCenter(new THREE.Vector3());
303 | 
304 |           // 定义mesh初始位置
305 |           item.fromPosition = item.position.clone();
306 | 
307 |           // 包围盒和MESH中心点线段
308 |           const centerLine3 = new THREE.Line3(boxCenter, meshCenter);
309 |           const centerLine3Delta = new THREE.Vector3();
310 |           // 求线段向量
311 |           centerLine3.delta(centerLine3Delta);
312 |           // item.toPosition = item.fromPosition.clone().add(centerLine3Delta);
313 |           // 目标位置向量=线段终点位置+线段向量乘积
314 |           item.toPosition = item.fromPosition.clone().addScaledVector(centerLine3Delta, moveSeed);
315 |         }
316 |       });
317 | 
318 |       // 设置相机
319 |       this.setCamera();
320 |     },
321 |     // 加载模型进程
322 |     loadModelProcess(xhr) {
323 |       if (xhr.lengthComputable) {
324 |         const percentComplete = (xhr.loaded / xhr.total) * 100;
325 |         console.log(`${Math.round(percentComplete, 2)}% downloaded`);
326 |       }
327 |     },
328 |     loadModelError(err) {
329 |       console.error('load model error.', err);
330 |     }
331 |   }
332 | };
333 | </script>
334 | <style lang="scss" scoped>
335 | a {
336 |   color: #409eff;
337 | }
338 | .button-container {
339 |   position: absolute;
340 |   margin: auto;
341 |   width: 100vw;
342 |   display: flex;
343 |   justify-content: center;
344 | }
345 | .button-container > button {
346 |   margin: 10px;
347 |   font-size: 20px;
348 |   background-color: #409eff;
349 |   border: none;
350 |   color: white;
351 |   padding: 10px;
352 |   border-radius: 10px;
353 |   cursor: pointer;
354 | }
355 | .footer {
356 |   position: absolute;
357 |   bottom: 0;
358 |   box-sizing: border-box;
359 |   padding: 0 20px 0 0;
360 |   width: 100vw;
361 |   height: 30px;
362 |   color: white;
363 |   text-align: right;
364 | }
365 | </style>
366 | 


--------------------------------------------------------------------------------
/src/pages/index/views/tutorial/Dismantling2.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="button-container">
  4 |       <button @click="meshToggle">{{ openMove ? '关闭分体扩散' : '开启分体扩散' }}</button>
  5 |       <div v-if="openMove" style="display: flex">
  6 |         <input
  7 |           type="range"
  8 |           style="width: 600px"
  9 |           min="0"
 10 |           max="5"
 11 |           step="0.05"
 12 |           v-model="moveMultiplier" />
 13 |         <div style="width: 120px; margin-left: 15px">乘积：{{ moveMultiplier }}</div>
 14 |       </div>
 15 |     </div>
 16 |     <div class="footer">
 17 |       Model by&nbsp;<a
 18 |         href="https://sketchfab.com/3d-models/motorcycle-custom-bike-jawa-low-poly-13771fe558604aedae09b5157029e790"
 19 |         target="_blank"
 20 |         >Kreems</a
 21 |       >
 22 |     </div>
 23 |     <canvas
 24 |       id="container"
 25 |       ref="container"
 26 |       style="width: 100vw; height: 100vh; background-color: #222" />
 27 |   </div>
 28 | </template>
 29 | <script>
 30 | /**
 31 |  * Created by leon<silenceace@gmail.com> on 22/06/15.
 32 |  */
 33 | import * as THREE from 'three';
 34 | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 35 | import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
 36 | import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 37 | 
 38 | const modelInfo = {
 39 |   name: 'motorcycle',
 40 |   res: {
 41 |     obj: 'model/motorcycle/motorcycle.obj',
 42 |     mtl: 'model/motorcycle/motorcycle.mtl'
 43 |   }
 44 | };
 45 | 
 46 | let scene;
 47 | 
 48 | export default {
 49 |   data() {
 50 |     return {
 51 |       // 开启分体扩散
 52 |       openMove: false,
 53 |       // 移动位置向量乘积
 54 |       moveMultiplier: 0,
 55 | 
 56 |       container: undefined,
 57 |       canvas: undefined,
 58 |       renderer: undefined,
 59 |       camera: undefined,
 60 |       controls: undefined,
 61 |       activeModel: undefined,
 62 |       activeModelMaterials: undefined,
 63 |       actvieModelSize: {
 64 |         box: undefined,
 65 |         boxSize: undefined,
 66 |         boxCenter: undefined,
 67 |         boxSizeLength: undefined
 68 |       }
 69 |     };
 70 |   },
 71 |   computed: {},
 72 |   mounted() {
 73 |     window.onresize = this.onWindowResize;
 74 | 
 75 |     this.container = this.$refs.container;
 76 | 
 77 |     this.rendererCanvas();
 78 |     this.loadModel(modelInfo);
 79 |   },
 80 |   unmounted() {
 81 |     window.onresize = null;
 82 |   },
 83 |   methods: {
 84 |     objMove(obj, to) {
 85 |       obj.position.set(to.x, to.y, to.z);
 86 |     },
 87 |     meshToggle() {
 88 |       if (this.openMove) {
 89 |         this.moveMultiplier = 0;
 90 |         this.recovery();
 91 |       }
 92 |       this.openMove = !this.openMove;
 93 |     },
 94 |     // 分体展开
 95 |     dismantling() {
 96 |       this.activeModel.traverse((e) => {
 97 |         if (e.isMesh) {
 98 |           this.objMove(e, e.toPosition);
 99 |         }
100 |       });
101 |       console.log('dismantling done.');
102 |     },
103 |     // 分体恢复
104 |     recovery() {
105 |       this.activeModel.traverse((e) => {
106 |         if (e.isMesh) {
107 |           this.objMove(e, e.originPosition);
108 |         }
109 |       });
110 |       console.log('recovery done.');
111 |     },
112 |     onWindowResize() {
113 |       this.camera.aspect = this.container.offsetWidt / this.container.offsetHeight; // 重新设置宽高比
114 |       this.camera.updateProjectionMatrix(); // 更新相机
115 |       this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
116 |     },
117 |     // 初始化画布
118 |     rendererCanvas() {
119 |       const canvas = window.document.querySelector('#container');
120 |       const renderer = new THREE.WebGLRenderer({
121 |         canvas,
122 |         // 执行抗锯齿
123 |         antialias: true,
124 |         // 包含透明度
125 |         alpha: true,
126 |         // 设置为可缓存
127 |         preserveDrawingBuffer: true
128 |       });
129 | 
130 |       renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
131 |       renderer.setPixelRatio(window.devicePixelRatio);
132 | 
133 |       this.canvas = canvas;
134 |       this.renderer = renderer;
135 | 
136 |       scene = new THREE.Scene();
137 |     },
138 |     // 根据模型大小计算并设置相机
139 |     setCamera() {
140 |       const camera = new THREE.PerspectiveCamera(
141 |         45,
142 |         this.container.offsetWidth / this.container.offsetHeight,
143 |         0.1,
144 |         1000
145 |       );
146 |       // 设置相机默认位置
147 |       camera.position.set(0, 10, 20);
148 | 
149 |       this.frameArea(
150 |         this.actvieModelSize.boxSizeLength * 1.2,
151 |         this.actvieModelSize.boxSizeLength,
152 |         this.actvieModelSize.boxCenter,
153 |         camera
154 |       );
155 |       this.camera = camera;
156 | 
157 |       this.setLight();
158 | 
159 |       this.setControls();
160 | 
161 |       this.renderer.render(scene, this.camera);
162 |     },
163 |     setLight() {
164 |       const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
165 |       scene.add(ambientLight);
166 | 
167 |       const pointLight = new THREE.PointLight(0xffffff, 0.4);
168 |       this.camera.add(pointLight);
169 | 
170 |       scene.add(this.camera);
171 |     },
172 |     setControls() {
173 |       const controls = new OrbitControls(this.camera, this.renderer.domElement);
174 |       controls.update();
175 |       this.controls = controls;
176 | 
177 |       const animate = () => {
178 |         window.requestAnimationFrame(animate);
179 |         // required if controls.enableDamping or controls.autoRotate are set to true
180 |         this.controls.update();
181 |         this.renderer.render(scene, this.camera);
182 |       };
183 |       animate();
184 |     },
185 |     // 根据模型尺寸为相机设置合适的位置
186 |     frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
187 |       const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.6;
188 |       const halfFovY = THREE.MathUtils.degToRad(camera.fov * 0.5);
189 |       const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
190 |       const direction = new THREE.Vector3()
191 |         .subVectors(camera.position, boxCenter)
192 |         .multiply(new THREE.Vector3(1, 0, 1))
193 |         .normalize();
194 | 
195 |       camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
196 | 
197 |       camera.near = boxSize / 1000;
198 |       camera.far = boxSize * 1000;
199 | 
200 |       camera.updateProjectionMatrix();
201 | 
202 |       camera.lookAt(boxCenter);
203 |     },
204 |     loadModel(_modelInfo) {
205 |       const mtlManager = this.loadMtlManager();
206 |       const modelManager = this.loadModelManager();
207 | 
208 |       const mtlLoader = new MTLLoader(mtlManager);
209 |       mtlLoader.load(_modelInfo.res.mtl, (materials) => {
210 |         materials.preload();
211 | 
212 |         console.log('model materials:', materials);
213 | 
214 |         this.activeModelMaterials = materials;
215 | 
216 |         new OBJLoader(modelManager)
217 |           .setMaterials(materials)
218 |           .load(
219 |             _modelInfo.res.obj,
220 |             this.loadModelSuccess,
221 |             this.loadModelProcess,
222 |             this.loadModelError
223 |           );
224 |       });
225 |     },
226 |     // MTL加载控制器
227 |     loadMtlManager() {
228 |       const manager = new THREE.LoadingManager();
229 |       manager.onStart = function (item, loaded, total) {
230 |         console.log('Loading Mtl started');
231 |       };
232 |       // 纹理加载完成清除滚动条
233 |       manager.onLoad = function () {
234 |         console.log('Loading Mtl complete');
235 |       };
236 | 
237 |       manager.onProgress = function (item, loaded, total) {
238 |         const percentComplete = (loaded / total) * 100;
239 |         // console.log('Mtl loading percent：', percentComplete);
240 |       };
241 | 
242 |       manager.onError = function (err) {
243 |         console.error('Mtl Load Error.', err);
244 |       };
245 |       return manager;
246 |     },
247 |     /**
248 |      * 模型加载器
249 |      */
250 |     loadModelManager() {
251 |       const manager = new THREE.LoadingManager();
252 |       manager.onStart = function (item, loaded, total) {
253 |         console.log('Loading Model started');
254 |       };
255 |       // 纹理加载完成清除滚动条
256 |       manager.onLoad = function () {
257 |         console.log('Loading Model complete');
258 |       };
259 | 
260 |       manager.onProgress = function (item, loaded, total) {
261 |         const percentComplete = (loaded / total) * 100;
262 |         // console.log('Model load percent：', percentComplete);
263 |       };
264 | 
265 |       manager.onError = function (url) {
266 |         console.error('Model load error:', url);
267 |       };
268 |       return manager;
269 |     },
270 |     // 加载成功模型
271 |     loadModelSuccess(modelNode) {
272 |       console.log('model node', modelNode);
273 | 
274 |       const modelNodeHelp = new THREE.BoxHelper(modelNode, 0xffff00);
275 | 
276 |       scene.add(modelNodeHelp);
277 |       scene.add(modelNode);
278 | 
279 |       // 根据模型的尺寸设置相机位置
280 |       const box = new THREE.Box3().setFromObject(modelNode);
281 |       const boxSize = box.getSize(new THREE.Vector3());
282 |       const boxSizeLength = boxSize.length();
283 |       const boxCenter = box.getCenter(new THREE.Vector3());
284 | 
285 |       this.actvieModelSize.boxSize = boxSize;
286 |       this.actvieModelSize.boxCenter = boxCenter;
287 |       this.actvieModelSize.boxSizeLength = boxSizeLength;
288 | 
289 |       // 设置加载模型的名称
290 |       modelNode.name = 'mainModel';
291 | 
292 |       this.activeModel = modelNode;
293 | 
294 |       this.setModelMovePosition(modelNode);
295 | 
296 |       // 设置相机
297 |       this.setCamera();
298 |     },
299 |     setModelMovePosition(modelNode) {
300 |       const isFirstLoad = !this.actvieModelSize.box;
301 |       if (isFirstLoad) {
302 |         this.actvieModelSize.box = new THREE.Box3().setFromObject(modelNode);
303 |         this.actvieModelSize.boxCenter = this.actvieModelSize.box.getCenter(new THREE.Vector3());
304 |       }
305 | 
306 |       // 模型变换
307 |       modelNode.traverse((item) => {
308 |         if (item instanceof THREE.Mesh) {
309 |           // 设置所有的 Mesh 实例属性 接收阴影等等
310 |           item.castShadow = true;
311 |           item.receiveShadow = true;
312 | 
313 |           if (isFirstLoad) {
314 |             item.meshBox = new THREE.Box3().setFromObject(item);
315 |             item.meshCenter = item.meshBox.getCenter(new THREE.Vector3());
316 | 
317 |             // 定义mesh初始位置
318 | 
319 |             item.originPosition = item.position.clone();
320 |             console.log('set item originPosition', item.originPosition);
321 | 
322 |             // 包围盒和MESH中心点线段
323 |             item.centerLine3 = new THREE.Line3(this.actvieModelSize.boxCenter, item.meshCenter);
324 | 
325 |             item.centerLine3Delta = new THREE.Vector3();
326 |             // 求线段向量
327 |             item.centerLine3.delta(item.centerLine3Delta);
328 |             item.centerLine3DeltaClone = item.centerLine3Delta.clone();
329 | 
330 |             // 求线段长度
331 |             item.centerLine3Distance = item.centerLine3.distance();
332 | 
333 |             console.log(
334 |               'centerLine3：Delta=>',
335 |               item.centerLine3Delta,
336 |               '、Distance=>',
337 |               item.centerLine3Distance
338 |             );
339 |           }
340 | 
341 |           // item.toPosition = item.originPosition.clone().add(centerLine3Delta);
342 |           // 目标位置向量=线段终点位置+线段向量乘积
343 |           item.toPosition = item.originPosition
344 |             .clone()
345 |             .addScaledVector(item.centerLine3DeltaClone, this.moveMultiplier);
346 |         }
347 |       });
348 |     },
349 |     // 加载模型进程
350 |     loadModelProcess(xhr) {
351 |       if (xhr.lengthComputable) {
352 |         const percentComplete = (xhr.loaded / xhr.total) * 100;
353 |         // console.log(`${Math.round(percentComplete, 2)}% downloaded`);
354 |       }
355 |     },
356 |     loadModelError(err) {
357 |       console.error('load model error.', err);
358 |     }
359 |   },
360 |   watch: {
361 |     moveMultiplier(val) {
362 |       this.setModelMovePosition(this.activeModel);
363 |       this.dismantling();
364 |     }
365 |   }
366 | };
367 | </script>
368 | <style lang="scss" scoped>
369 | a {
370 |   color: #409eff;
371 | }
372 | .button-container {
373 |   position: absolute;
374 |   margin: auto;
375 |   width: 100vw;
376 |   display: flex;
377 |   justify-content: center;
378 |   color: #fff;
379 |   align-items: center;
380 | }
381 | .button-container > * {
382 |   margin: 10px;
383 |   font-size: 20px;
384 |   background-color: #409eff;
385 |   border: none;
386 |   color: white;
387 |   padding: 10px;
388 |   border-radius: 10px;
389 |   cursor: pointer;
390 | }
391 | .footer {
392 |   position: absolute;
393 |   bottom: 0;
394 |   box-sizing: border-box;
395 |   padding: 0 20px 0 0;
396 |   width: 100vw;
397 |   height: 30px;
398 |   color: white;
399 |   text-align: right;
400 | }
401 | </style>
402 | 


--------------------------------------------------------------------------------