fix(@nicepkg/vr360-core): 修复移动端的提示移动bug

2214962083 · 2214962083 · commit 7090a9805bc4 · 2022-10-08T20:53:15.000+08:00
diff --git a/packages/doc/.vuepress/client.ts b/packages/doc/.vuepress/client.ts
@@ -12,7 +12,6 @@ export default defineClientConfig({
         const mode = _mode as 'node' | 'vue2' | 'vue3' | 'react' | 'html'
 
         const defaultFiles: ProjectFiles = {
-          // 'src/vr360-config.ts': (await import('./public/code-demo-templates/vr360-config.ts.txt?raw')).default,
           'src/demo.css': (await import('./public/code-demo-templates/demo.css.txt?raw')).default,
           '.stackblitzrc': `{
             "startCommand": "npm run dev"
@@ -31,8 +30,7 @@ export default defineClientConfig({
               'index.html': (await import('./public/code-demo-templates/vue3/index.html.txt?raw')).default,
               'vite.config.ts': (await import('./public/code-demo-templates/vue3/vite.config.ts.txt?raw')).default,
               'package.json': (await import('./public/code-demo-templates/vue3/package.json.txt?raw')).default,
-              'tsconfig.json': (await import('./public/code-demo-templates/vue3/tsconfig.json.txt?raw')).default,
-              'unocss.config.ts': (await import('./public/code-demo-templates/vue3/unocss.config.ts.txt?raw')).default
+              'tsconfig.json': (await import('./public/code-demo-templates/vue3/tsconfig.json.txt?raw')).default
             } as ProjectFiles
           case 'vue2':
             return {
@@ -44,8 +42,7 @@ export default defineClientConfig({
               'index.html': (await import('./public/code-demo-templates/vue2/index.html.txt?raw')).default,
               'vite.config.ts': (await import('./public/code-demo-templates/vue2/vite.config.ts.txt?raw')).default,
               'package.json': (await import('./public/code-demo-templates/vue2/package.json.txt?raw')).default,
-              'tsconfig.json': (await import('./public/code-demo-templates/vue2/tsconfig.json.txt?raw')).default,
-              'unocss.config.ts': (await import('./public/code-demo-templates/vue2/unocss.config.ts.txt?raw')).default
+              'tsconfig.json': (await import('./public/code-demo-templates/vue2/tsconfig.json.txt?raw')).default
             } as ProjectFiles
           case 'react':
             return {
@@ -54,7 +51,6 @@ export default defineClientConfig({
               'index.html': (await import('./public/code-demo-templates/react/index.html.txt?raw')).default,
               'package.json': (await import('./public/code-demo-templates/react/package.json.txt?raw')).default,
               'tsconfig.json': (await import('./public/code-demo-templates/react/tsconfig.json.txt?raw')).default,
-              'unocss.config.ts': (await import('./public/code-demo-templates/react/unocss.config.ts.txt?raw')).default,
               'vite.config.ts': (await import('./public/code-demo-templates/react/vite.config.ts.txt?raw')).default
             } as ProjectFiles
           case 'html':
diff --git a/packages/doc/.vuepress/public/code-demo-templates/react/package.json.txt b/packages/doc/.vuepress/public/code-demo-templates/react/package.json.txt
@@ -18,10 +18,8 @@
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
     "@types/three": "^0.144.0",
-    "@unocss/reset": "^0.45.26",
     "@vitejs/plugin-react": "^2.1.0",
     "typescript": "4.7.4",
-    "unocss": "^0.45.26",
     "vite": "3.0.9"
   }
 }
diff --git a/packages/doc/.vuepress/public/code-demo-templates/react/src/main.tsx.txt b/packages/doc/.vuepress/public/code-demo-templates/react/src/main.tsx.txt
@@ -2,9 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import Example from './Example'
 
-import '@unocss/reset/tailwind.css'
-import 'uno.css'
-
 ReactDOM.render(
   <React.StrictMode>
     <Example />
diff --git a/packages/doc/.vuepress/public/code-demo-templates/react/tsconfig.json.txt b/packages/doc/.vuepress/public/code-demo-templates/react/tsconfig.json.txt
@@ -20,5 +20,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "types/**/*"]
+  "include": ["src/**/*", "types/**/*", "*.ts", "*.js"]
 }
diff --git a/packages/doc/.vuepress/public/code-demo-templates/react/unocss.config.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/react/unocss.config.ts.txt
diff --git a/packages/doc/.vuepress/public/code-demo-templates/react/vite.config.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/react/vite.config.ts.txt
@@ -1,7 +1,6 @@
 import {defineConfig} from 'vite'
 import path from 'node:path'
 import viteReact from '@vitejs/plugin-react'
-import viteUnocss from 'unocss/vite'
 
 const pathResolve = (..._path: string[]) => path.resolve(__dirname, ..._path)
 
@@ -13,10 +12,6 @@ export default defineConfig({
   },
 
   plugins: [
-    viteReact(),
-
-    // https://github.com/antfu/unocss
-    // 有关配置，请参见 unocss.config.ts
-    viteUnocss()
+    viteReact()
   ]
 })
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue2/package.json.txt b/packages/doc/.vuepress/public/code-demo-templates/vue2/package.json.txt
@@ -14,10 +14,8 @@
   "devDependencies": {
     "@types/node": "18.7.23",
     "@types/three": "^0.144.0",
-    "@unocss/reset": "^0.45.22",
     "@vue/runtime-dom": "latest",
     "typescript": "4.7.4",
-    "unocss": "^0.45.22",
     "vite": "^2.9.9",
     "vite-plugin-vue2": "^2.0.2",
     "vue-template-compiler": "2.6.14"
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue2/src/main.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/vue2/src/main.ts.txt
@@ -1,10 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-// css
-import 'uno.css'
-import '@unocss/reset/tailwind.css'
-
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue2/tsconfig.json.txt b/packages/doc/.vuepress/public/code-demo-templates/vue2/tsconfig.json.txt
@@ -20,5 +20,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "types/**/*"]
+  "include": ["src/**/*", "types/**/*", "*.ts", "*.js"]
 }
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue2/unocss.config.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/vue2/unocss.config.ts.txt
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue2/vite.config.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/vue2/vite.config.ts.txt
@@ -1,7 +1,6 @@
 import path from 'node:path'
 import {defineConfig} from 'vite'
 import {createVuePlugin} from 'vite-plugin-vue2'
-import Unocss from 'unocss/vite'
 
 const pathResolve = (...args: string[]) => path.resolve(__dirname, ...args)
 
@@ -18,10 +17,6 @@ export default defineConfig({
       jsxOptions: {
         compositionAPI: true
       }
-    }),
-
-    // https://github.com/antfu/unocss
-    // 有关配置，请参见 unocss.config.ts
-    Unocss()
+    })
   ]
 })
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue3/package.json.txt b/packages/doc/.vuepress/public/code-demo-templates/vue3/package.json.txt
@@ -14,11 +14,9 @@
   "devDependencies": {
     "@types/node": "18.7.23",
     "@types/three": "^0.144.0",
-    "@unocss/reset": "^0.45.22",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
     "typescript": "4.7.4",
-    "unocss": "^0.45.22",
     "vite": "3.0.9"
   }
 }
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue3/src/main.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/vue3/src/main.ts.txt
@@ -1,10 +1,6 @@
 import {createApp} from 'vue'
 import App from './App.vue'
 
-// css
-import 'uno.css'
-import '@unocss/reset/tailwind.css'
-
 const app = createApp(App)
 app.mount('#app')
 
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue3/tsconfig.json.txt b/packages/doc/.vuepress/public/code-demo-templates/vue3/tsconfig.json.txt
@@ -20,5 +20,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "types/**/*"]
+  "include": ["src/**/*", "types/**/*", "*.ts", "*.js"]
 }
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue3/unocss.config.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/vue3/unocss.config.ts.txt
diff --git a/packages/doc/.vuepress/public/code-demo-templates/vue3/vite.config.ts.txt b/packages/doc/.vuepress/public/code-demo-templates/vue3/vite.config.ts.txt
@@ -2,7 +2,6 @@ import path from 'node:path'
 import {defineConfig} from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import Unocss from 'unocss/vite'
 
 const pathResolve = (...args: string[]) => path.resolve(__dirname, ...args)
 
@@ -17,10 +16,6 @@ export default defineConfig({
     Vue({
       include: [/\.vue$/]
     }),
-    vueJsx(),
-
-    // https://github.com/antfu/unocss
-    // 有关配置，请参见 unocss.config.ts
-    Unocss()
+    vueJsx()
   ]
 })
diff --git a/packages/vr360-core/src/helper.ts b/packages/vr360-core/src/helper.ts
@@ -100,22 +100,28 @@ export function addListenerToThreeObject(
   // 鼠标是否处于按压状态，用于传给 tip 判断，在按下鼠标滑动时不显示 tip
   let isMouseDown = false
 
-  renderElement.addEventListener('mousedown', () => {
-    isMouseDown = true
-  })
-
-  renderElement.addEventListener('mouseup', () => {
-    isMouseDown = false
-  })
-
-  function handleEvent(eventName: string, event: MouseEvent) {
+  ;['mousedown'].map(eventName =>
+    renderElement.addEventListener(eventName, () => {
+      isMouseDown = true
+    })
+  )
+  ;['mouseup'].map(eventName =>
+    renderElement.addEventListener(eventName, () => {
+      isMouseDown = false
+    })
+  )
+
+  function handleEvent(eventName: string, event: MouseEvent | TouchEvent) {
     event.preventDefault()
     const {camera, scene, renderer} = getDeps()
     if (!camera || !scene || !renderer) return
     const renderDomBound = renderer.domElement.getBoundingClientRect()
 
-    mouse.x = ((event.clientX - renderDomBound.left) / renderer.domElement.clientWidth) * 2 - 1
-    mouse.y = -((event.clientY - renderDomBound.top) / renderer.domElement.clientHeight) * 2 + 1
+    const clientX = (event as TouchEvent)?.changedTouches?.[0]?.clientX ?? (event as MouseEvent).clientX
+    const clientY = (event as TouchEvent)?.changedTouches?.[0]?.clientY ?? (event as MouseEvent).clientY
+
+    mouse.x = ((clientX - renderDomBound.left) / renderer.domElement.clientWidth) * 2 - 1
+    mouse.y = -((clientY - renderDomBound.top) / renderer.domElement.clientHeight) * 2 + 1
 
     raycaster.setFromCamera(mouse, camera)
 
@@ -159,7 +165,7 @@ export function addListenerToThreeObject(
     // }
 
     firstIntersect.object.dispatchEvent({
-      type: eventName,
+      type: eventName === 'touchmove' ? 'mousemove' : eventName,
       intersect: firstIntersect,
       sourceEvent: event,
       isMouseDown

Original file line number	Diff line number	Diff line change
`@@ -18,10 +18,8 @@`
`18`	`18`	`"@types/react": "18.0.21",`
`19`	`19`	`"@types/react-dom": "18.0.6",`
`20`	`20`	`"@types/three": "^0.144.0",`
`21`		`- "@unocss/reset": "^0.45.26",`
`22`	`21`	`"@vitejs/plugin-react": "^2.1.0",`
`23`	`22`	`"typescript": "4.7.4",`
`24`		`- "unocss": "^0.45.26",`
`25`	`23`	`"vite": "3.0.9"`
`26`	`24`	`}`
`27`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,5 +20,5 @@`
`20`	`20`	`"@/": ["./src/"]`
`21`	`21`	`}`
`22`	`22`	`},`
`23`		`- "include": ["src/*/", "types/*/"]`
	`23`	`+ "include": ["src/*/", "types/*/", ".ts", ".js"]`
`24`	`24`	`}`