6 |
3 |
6 |
17 |
18 |
19 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ### Description
4 |
5 |
6 |
7 | ### Additional context
8 |
9 |
10 |
11 | ---
12 |
13 | ### What is the purpose of this pull request?
14 |
15 | - [ ] Bug fix
16 | - [ ] New Feature
17 | - [ ] Documentation update
18 | - [ ] Other
19 |
20 | ### Before submitting the PR, please make sure you do the following
21 |
22 | - [ ] Read the [Contributing Guidelines](https://github.com/nicepkg/vr360/blob/master/CONTRIBUTING.md).
23 | - [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
24 | - [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`).
25 | - [ ] Ideally, include relevant tests that fail without this PR but pass with it.
26 |
--------------------------------------------------------------------------------
/packages/doc/.vuepress/styles/index.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // brand colors
3 | --c-brand: #0c4dc4;
4 | --c-brand-light: #0b3788;
5 |
6 | scroll-behavior: smooth;
7 | }
8 |
9 | html.dark {
10 | // brand colors
11 | --c-brand: #1fa8f8;
12 | --c-brand-light: #3bb3f8;
13 | }
14 |
15 | .sidebar-item.collapsible {
16 | cursor: pointer;
17 | }
18 |
19 | .site-name.can-hide {
20 | display: none;
21 | }
22 |
23 | body {
24 | position: relative;
25 | width: 100vw;
26 | min-height: 100vh;
27 | overflow-x: hidden;
28 | overflow-y: auto;
29 | background-color: var(--c-bg);
30 | }
31 |
32 | #app {
33 | position: absolute;
34 | top: 0;
35 | left: 0;
36 | z-index: 99;
37 | min-width: 100vw;
38 | min-height: 100vh;
39 | }
40 |
41 | .code-group {
42 | width: 100%;
43 | max-width: calc(100vw - 3rem);
44 | }
45 |
46 | .theme-default-content div[class*='language-'] {
47 | width: calc(100% + 3rem);
48 | max-width: 100vw;
49 | }
50 |
51 | .theme-default-content .code-group div[class*='language-'] {
52 | width: auto;
53 | max-width: auto;
54 | }
55 |
--------------------------------------------------------------------------------
/packages/doc/.vuepress/plugins/index.ts:
--------------------------------------------------------------------------------
1 | import type {PluginConfig} from 'vuepress'
2 | import {registerComponentsPlugin} from '@vuepress/plugin-register-components'
3 | import {googleAnalyticsPlugin} from '@vuepress/plugin-google-analytics'
4 | import {shikiPlugin} from '@vuepress/plugin-shiki'
5 | import {path} from '@vuepress/utils'
6 | import {isProd} from '../utils/common'
7 | import {codeDemoPlugin} from './code-demo'
8 |
9 | const pathResolve = (..._path: string[]) => path.resolve(__dirname, ..._path)
10 |
11 | const vuepressPlugins: PluginConfig = [
12 | // for google search
13 | googleAnalyticsPlugin({
14 | id: ''
15 | }),
16 | // auto register globally components
17 | registerComponentsPlugin({
18 | componentsDir: pathResolve('../components')
19 | }),
20 | codeDemoPlugin({
21 | clickToLoad: true,
22 | resolvePath: str => str.replace(/^@/, pathResolve('../'))
23 | })
24 | ]
25 |
26 | if (isProd) {
27 | vuepressPlugins.push(
28 | // code highlighting
29 | shikiPlugin({
30 | theme: 'dark-plus'
31 | })
32 | )
33 | }
34 |
35 | export const plugins = vuepressPlugins
36 |
--------------------------------------------------------------------------------
/packages/doc/.vuepress/public/code-demo-templates/demo.css.txt:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | }
6 |
7 | .demo {
8 | position: relative;
9 | display: flex;
10 | flex-direction: column;
11 | width: 100vw;
12 | height: 100vh;
13 | overflow: hidden;
14 | }
15 |
16 | .demo-tip {
17 | position: absolute;
18 | top: 0;
19 | left: 0;
20 | z-index: -1;
21 | display: flex;
22 | flex-direction: column;
23 | justify-content: center;
24 | width: 240px;
25 | height: 60px;
26 | padding: 4px;
27 | color: #fff;
28 | cursor: pointer;
29 | background-color: rgba(0, 0, 0, 0.5);
30 | border-radius: 4px;
31 | }
32 |
33 | .demo-tip-title {
34 | font-weight: bold;
35 | }
36 |
37 | .demo-container {
38 | width: 100%;
39 | height: 100%;
40 | }
41 |
42 | .demo-bottom-bar {
43 | display: flex;
44 | align-items: center;
45 | width: 100%;
46 | height: 100px;
47 | }
48 |
49 | .demo-bottom-card {
50 | width: 140px;
51 | height: 70px;
52 | margin-left: 1rem;
53 | cursor: pointer;
54 | background-repeat: no-repeat;
55 | background-size: cover;
56 | border-radius: 4px;
57 | }
58 |
--------------------------------------------------------------------------------
/playgrounds/vue2/vite.config.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path'
2 | import {defineConfig} from 'vite'
3 | import {createVuePlugin} from 'vite-plugin-vue2'
4 | import ScriptSetup from 'unplugin-vue2-script-setup/vite'
5 | import Unocss from 'unocss/vite'
6 | import {switchVersion} from 'vue-demi/scripts/utils.js'
7 |
8 | const pathResolve = (..._path: string[]) => path.resolve(__dirname, ..._path)
9 |
10 | switchVersion(2)
11 |
12 | export default defineConfig({
13 | server: {
14 | host: true
15 | },
16 | plugins: [
17 | createVuePlugin({
18 | jsx: true,
19 | jsxOptions: {
20 | compositionAPI: true
21 | }
22 | }),
23 | ScriptSetup(), // supports vue3 setup sugar
24 |
25 | // https://github.com/antfu/unocss
26 | // 有关配置，请参见 unocss.config.ts
27 | Unocss()
28 | ],
29 | resolve: {
30 | dedupe: ['vue', 'vue-demi', '@vue/runtime-core', '@vue/runtime-dom'], // use the same version
31 | alias: {
32 | '@/': `${pathResolve('./src')}/`,
33 | vue: pathResolve('./node_modules/vue/dist/vue.esm.js') // use the same version, also use runtime template compiler
34 | }
35 | }
36 | })
37 |
--------------------------------------------------------------------------------
/packages/doc/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | title: 首页
4 | heroImage: /images/logo.png
5 | heroImageDark: /images/logo-dark.png
6 | heroText: null
7 | tagline: 快速实现你的全景开发需求
8 | actions:
9 | - text: 快速上手
10 | link: /guide/
11 | type: primary
12 | - text: Github
13 | link: https://github.com/nicepkg/vr360
14 | type: secondary
15 | features:
16 | - title: vr360-core
17 | details: json 驱动的全景浏览库，设计框架无关性，可用于任何框架，如vue/react/angular/svelte/solidjs...
18 | link: '/libs/vr360-core/README.md'
19 |
20 | - title: vr360-ui
21 | details: （开发中...）提供一个现成的 vr360 viewer 和 editor 组件，基于 stencil 构建的 web component。
22 | disabled: true
23 | link: ''
24 |
25 | - title: vr360-ui-vue2
26 | details: （开发中...）vr360-ui 的 vue2 二次封装版本，开箱即用。
27 | disabled: true
28 | link: ''
29 |
30 | - title: vr360-ui-vue3
31 | details: （开发中...）vr360-ui 的 vue3 二次封装版本，开箱即用。
32 | disabled: true
33 | link: ''
34 |
35 | - title: vr360-ui-react
36 | details: （开发中...）vr360-ui 的 react 二次封装版本，开箱即用。
37 | disabled: true
38 | link: ''
39 |
40 | - title:
41 | details:
42 | footer: MIT License | Copyright © 2022-present YangJinMing
43 | ---
44 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 YangJinMing
7 |
16 |
8 |
10 |
11 |
14 |
15 |
29 |
56 |
57 |
--------------------------------------------------------------------------------
/playgrounds/vue3/src/EditorLeftBar.vue:
--------------------------------------------------------------------------------
1 |
2 |
27 |
28 |
29 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/packages/vr360-shared/src/test-utils/vue/vue-helper.util.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unsafe-member-access */
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 | import type {FunctionalComponent} from 'vue-demi'
4 | import {isVue2, Vue2, install} from 'vue-demi'
5 |
6 | export const nextTwoTick = () =>
7 | new Promise
38 |
39 |
52 |
53 |
55 |
39 |
46 | {{ feature.title }}
47 |
48 |
49 | {{ feature.title }}
50 |
51 |
52 |
53 | {{ feature.details }}
54 |
2 |
3 | 
4 |
5 |
16 |
17 | ## 介绍
18 |
19 | `@nicepkg/vr360-core` 是一个基于 [threejs](https://github.com/mrdoob/three.js/) 的全景库，非常适合用来做全景看房、全景街景、全景景点等业务需求。
20 |
21 | 它支持 json 配置驱动视图，你可以用 json 配置的方式快速实现常见全景需求。
22 |
23 | ## 特性
24 |
25 | - json 驱动视图，快速实现全景业务需求
26 | - 高性能，支持自动找出 json 变更的部分，最小化更新到 3d 全景里，不会整个场景重建。
27 | - 支持增删改提示点，hover 提示点的弹窗支持自定义定制，支持自定义提示点的贴图。
28 | - 内置场景切换穿梭动画
29 | - 暴露 scene、camera、renderer 等 [threejs](https://github.com/mrdoob/three.js/) 对象，方便你更高的定制化
30 | - 基于事件驱动的数据交互，设计框架无关性
31 | - 完整的 ts 支持
32 |
33 | ## 安装
34 |
35 | for npm
36 |
37 | ```bash
38 | npm i @nicepkg/vr360-core threejs
39 | ```
40 |
41 | for yarn
42 |
43 | ```bash
44 | yarn add @nicepkg/vr360-core threejs
45 | ```
46 |
47 | for pnpm
48 |
49 | ```bash
50 | pnpm add @nicepkg/vr360-core threejs
51 | ```
52 |
53 | ## 使用
54 |
55 | 点击查看[使用文档](https://vr360.nicepkg.cn/libs/vr360-core/)。
56 |
57 | ## Contributing
58 |
59 | Learn about contribution [here](https://github.com/nicepkg/vr360/blob/master/CONTRIBUTING.md).
60 |
61 | This project exists thanks to all the people who contribute:
62 |
63 |
64 |
4 |
5 | @nicepkg/vr360-core
6 |json 驱动的全景浏览库核心，设计框架无关性，可用于任何框架，如vue/react/angular/svelte/solidjs...
7 |
8 | 
11 | 
3 |
9 |
20 |
21 |
40 |
41 |
42 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/packages/doc/libs/vr360-core/properties.md:
--------------------------------------------------------------------------------
1 | # 属性
2 |
3 | ## 全景容器
4 |
5 | ##### 介绍
6 |
7 | ```ts
8 | class Vr360 {
9 | /**
10 | * 容器
11 | */
12 | public container: HTMLElement
13 | }
14 | ```
15 |
16 | ##### 使用
17 |
18 | ```ts
19 | import {Vr360} from '@nicepkg/vr360-core'
20 |
21 | const vr360 = new Vr360({....})
22 |
23 | vr360.render()
24 |
25 | // 获取容器
26 | console.log('3d 渲染容器是：', vr360.container)
27 | ```
28 |
29 | ## 相机
30 |
31 | ##### 介绍
32 |
33 | ```ts
34 | class Vr360 {
35 | /**
36 | * 相机
37 | */
38 | public camera: THREE.PerspectiveCamera
39 | }
40 | ```
41 |
42 | ##### 使用
43 |
44 | ```ts
45 | import {Vr360} from '@nicepkg/vr360-core'
46 |
47 | const vr360 = new Vr360({....})
48 |
49 | vr360.render()
50 |
51 | // 获取相机
52 | console.log('3d 相机是：', vr360.camera)
53 | ```
54 |
55 | ## 渲染器
56 |
57 | #### 介绍
58 |
59 | ```ts
60 | class Vr360 {
61 | /**
62 | * 渲染器
63 | */
64 | public renderer: THREE.WebGLRenderer
65 | }
66 | ```
67 |
68 | #### 使用
69 |
70 | ```ts
71 | import {Vr360} from '@nicepkg/vr360-core'
72 |
73 | const vr360 = new Vr360({....})
74 |
75 | vr360.render()
76 |
77 | // 获取渲染器
78 | console.log('3d 渲染器是：', vr360.renderer)
79 | ```
80 |
81 | ## 场景
82 |
83 | #### 介绍
84 |
85 | ```ts
86 | class Vr360 {
87 | /**
88 | * 场景
89 | */
90 | public scene: THREE.Scene
91 | }
92 | ```
93 |
94 | #### 使用
95 |
96 | ```ts
97 | import {Vr360} from '@nicepkg/vr360-core'
98 |
99 | const vr360 = new Vr360({....})
100 |
101 | vr360.render()
102 |
103 | // 获取场景
104 | console.log('3d 场景是：', vr360.scene)
105 | ```
106 |
107 | ## 控制器
108 |
109 | #### 介绍
110 |
111 | ```ts
112 | class Vr360 {
113 | /**
114 | * 控制器
115 | */
116 | public controls: THREE.OrbitControls
117 | }
118 | ```
119 |
120 | #### 使用
121 |
122 | ```ts
123 | import {Vr360} from '@nicepkg/vr360-core'
124 |
125 | const vr360 = new Vr360({....})
126 |
127 | vr360.render()
128 |
129 | // 获取控制器
130 | console.log('3d 控制器是：', vr360.controls)
131 | ```
132 |
133 | ## 全景空间配置
134 |
135 | #### 介绍
136 |
137 | ```ts
138 | class Vr360 {
139 | /**
140 | * 空间配置
141 | */
142 | public spacesConfig: SpaceConfig[]
143 | }
144 | ```
145 |
146 | 点击查看 [SpaceConfig](./methods.md#spaceconfig-构造参数里的空间配置) 类型
147 |
148 | #### 使用
149 |
150 | ```ts
151 | import {Vr360} from '@nicepkg/vr360-core'
152 |
153 | const vr360 = new Vr360({....})
154 |
155 | vr360.render()
156 |
157 | // 获取空间配置
158 | console.log('3d 空间配置是：', vr360.spacesConfig)
159 | ```
160 |
161 | ## 提示容器
162 |
163 | #### 介绍
164 |
165 | ```ts
166 | class Vr360 {
167 | /**
168 | * 提示容器
169 | */
170 | public tipContainer?: HTMLElement
171 | }
172 | ```
173 |
174 | #### 使用
175 |
176 | ```ts
177 | import {Vr360} from '@nicepkg/vr360-core'
178 |
179 | const vr360 = new Vr360({....})
180 |
181 | vr360.render()
182 |
183 | // 获取提示容器
184 | console.log('3d 提示容器是：', vr360.tipContainer)
185 | ```
186 |
--------------------------------------------------------------------------------
/packages/vr360-shared/src/test-utils/vue/vue-mount.util.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unsafe-member-access */
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 | import type {Component, InjectionKey, Ref} from 'vue-demi'
4 | import {createApp, defineComponent, h, provide, ref, resolveComponent, isVue2, isVue3} from 'vue-demi'
5 |
6 | type InstanceType
22 |
39 |
31 | ![]()
32 |
38 |
10 |
19 |
20 |
21 |
75 |
111 |
--------------------------------------------------------------------------------
/.github/commit-convention.md:
--------------------------------------------------------------------------------
1 | ## Git Commit Message Convention
2 |
3 | > This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular).
4 |
5 | #### TL;DR:
6 |
7 | Messages must be matched by the following regex:
8 |
9 | ```text
10 | /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip)(\(.+\))?: .{1,50}/
11 | ```
12 |
13 | #### Examples
14 |
15 | Appears under "Features" header, `link` subheader:
16 |
17 | ```
18 | feat(link): add `force` option
19 | ```
20 |
21 | Appears under "Bug Fixes" header, `view` subheader, with a link to issue #28:
22 |
23 | ```
24 | fix(view): handle keep-alive with aborted navigations
25 |
26 | close #28
27 | ```
28 |
29 | Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
30 |
31 | ```
32 | perf: improve guard extraction
33 |
34 | BREAKING CHANGE: The 'beforeRouteEnter' option has been removed.
35 | ```
36 |
37 | The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
38 |
39 | ```
40 | revert: feat(compiler): add 'comments' option
41 |
42 | This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
43 | ```
44 |
45 | ### Full Message Format
46 |
47 | A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
48 |
49 | ```
50 |
11 |
17 |
18 | {{ project?.title ?? DEFAULT_EDITOR_TITLE }}
12 |
13 |
16 |