update

realsee-developer · Dec 30, 2024 · f6a1d74 · f6a1d74
1 parent 81b823e
commit f6a1d74
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 3.62.0
+
+- feat(MeasurePlugin): 新版测量插件。
+- feat(Sculpt): 支持设置 item 的高亮色。
+- feat(Sculpt): 绘制矩形时添加了一些吸附效果。
+- feat(Util.PointSelector): 支持设置吸附面/吸附线，按`shift`取消吸附。
+- fix(PanoTagPlugin): 标签支持 five lod。
+- fix(Util.PointSelector): 修复放大镜在 umd 包中的 bug。
+
 ## 3.61.15
 
 - fix(PanoTagPlugin): 标签位于打标签时的位置时，跳过射线检测。

diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
       <div style="width: 42vw; display: inline-block; vertical-align: top">
         <h2>常用插件</h2>
         <a href="/dnalogel/src/PanoTagPlugin/index.html">PanoTagPlugin：全景标签</a><br />
+        <a href="/dnalogel/src/MeasurePlugin/index.html">MeasurePlugin：测量插件</a><br />
         <a href="/dnalogel/src/ModelMakerPlugin/index.html">ModelMakerPlugin: 模型标注插件</a><br />
         <a href="/dnalogel/src/Sculpt/index.html">Sculpt</a><br />
       </div>

diff --git a/src/MeasurePlugin/App.tsx b/src/MeasurePlugin/App.tsx
@@ -0,0 +1,38 @@
+import { MeasurePlugin } from '@realsee/dnalogel/dist'
+import { createFiveProvider, FiveCanvas } from '@realsee/five/react'
+import * as React from 'react'
+import Usage from './Usage.tsx'
+import { parseWork } from '@realsee/five'
+import { ThemeProvider } from '@mui/material'
+import useFetchDatas, { DATA_TYPES } from '../utils/useFetchDatas.ts'
+import '../utils/$five.ts'
+import { useWindowDimensions } from '../utils/useWindowDimensions.ts'
+import { theme } from '../utils/theme.ts'
+
+const FiveProvider = createFiveProvider({
+  imageOptions: { size: 512 }, // 图片默认分辨率
+  textureOptions: { size: 512 }, // 贴图默认分辨率
+  onlyRenderIfNeeds: true,
+  plugins: [[MeasurePlugin, 'MeasurePlugin']],
+})
+
+const workCode = (new URLSearchParams(window.location.search).get('workCode') ?? '') as any
+const workType = (new URLSearchParams(window.location.search).get('workType') ?? 'real') as any
+
+const App: React.FC = () => {
+  const size = useWindowDimensions()
+  const work = useFetchDatas(DATA_TYPES.WORK, workCode, workCode ? workType : undefined)
+
+  return (
+    work && (
+      <ThemeProvider theme={theme}>
+        <FiveProvider initialWork={parseWork(work)}>
+          <FiveCanvas {...size} />
+          <Usage />
+        </FiveProvider>
+      </ThemeProvider>
+    )
+  )
+}
+
+export default App
diff --git a/src/MeasurePlugin/Usage.tsx b/src/MeasurePlugin/Usage.tsx
@@ -0,0 +1,26 @@
+import { Paper, ButtonGroup, Button } from '@mui/material'
+import { FiveModeSwitcher } from '../components/FiveModeSwitcher'
+
+import { unsafe__useFiveInstance } from '@realsee/five/react'
+import { MeasureController } from '@realsee/dnalogel/dist/MeasurePlugin/Controller'
+
+const PanoMeasurePluginUsage = () => {
+  const five = unsafe__useFiveInstance()
+  const measurePlugin = five.plugins.MeasurePlugin as MeasureController
+
+  return (
+    <>
+      <FiveModeSwitcher modeList={['Panorama', 'Mapview', 'Model']} />
+      <Paper sx={{ position: 'fixed', top: '10px', right: '10px', backgroundColor: 'transparent' }}>
+        <ButtonGroup orientation="vertical" variant="contained" style={{ textTransform: 'initial' }}>
+          <Button onClick={() => measurePlugin.measure()}>Start</Button>
+          <Button onClick={() => measurePlugin.endMeasure()}>End</Button>
+          <Button onClick={() => measurePlugin.undo()}>Undo</Button>
+          <Button onClick={() => measurePlugin.dispose()}>Close</Button>
+        </ButtonGroup>
+      </Paper>
+    </>
+  )
+}
+
+export default PanoMeasurePluginUsage
diff --git a/src/MeasurePlugin/index.html b/src/MeasurePlugin/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PanoMeasurePlugin</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body #app {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index"></script>
+  </body>
+</html>
diff --git a/src/MeasurePlugin/index.tsx b/src/MeasurePlugin/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.querySelector('#app'))
+
+export {}
diff --git a/src/PanoTagPlugin/mocks/mock_data.ts b/src/PanoTagPlugin/mocks/mock_data.ts
@@ -495,7 +495,8 @@ export const TagsList = [
     },
     style: {
       point: {
-        url: '//vr-static.realsee-cdn.cn/release/web/carTagDotContent.08ace25e.png',
+        url: 'https://cdn.simpleicons.org/android?size=50',
+        ratio: 1,
       },
     },
     id: 0,

diff --git a/src/Sculpt/App.tsx b/src/Sculpt/App.tsx
@@ -5,8 +5,10 @@ import Use from './Use'
 import { parseWork } from '@realsee/five'
 import useFetchDatas, { DATA_TYPES } from '../utils/useFetchDatas'
 import { Sculpt } from '@realsee/dnalogel/dist'
+import { createTheme, ThemeProvider } from '@mui/material'
 import { OrientationPlugin } from '@realsee/five/plugins'
 import '../utils/$five.ts'
+import { theme } from '../utils/theme.ts'
 
 const lineWidth = 1.5
 const lineOpacity = 0.8
@@ -66,22 +68,24 @@ const App: React.FC = () => {
   if (!work) return null
 
   return (
-    <FiveProvider
-      initialOptions={{
-        '3d-tiles': {
-          minLevelOfDetail: 1,
-          maxScreenSpaceError: 1,
-        },
-      }}
-      initialWork={parseWork(work)}
-      initialState={{ mode: 'Mapview', latitude: 0.78, longitude: 2 }}
-    >
-      <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
-        <FiveCanvas {...size} />
-      </div>
-      <Use />
-      <FiveUseage />
-    </FiveProvider>
+    <ThemeProvider theme={theme}>
+      <FiveProvider
+        initialOptions={{
+          '3d-tiles': {
+            minLevelOfDetail: 1,
+            maxScreenSpaceError: 1,
+          },
+        }}
+        initialWork={parseWork(work)}
+        initialState={{ mode: 'Mapview', latitude: 0.78, longitude: 2 }}
+      >
+        <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
+          <FiveCanvas {...size} />
+        </div>
+        <Use />
+        <FiveUseage />
+      </FiveProvider>
+    </ThemeProvider>
   )
 }
 

diff --git a/src/Sculpt/Use.tsx b/src/Sculpt/Use.tsx
@@ -6,7 +6,6 @@ import { useEffect, useState } from 'react'
 import { FiveModeSwitcher } from '../components/FiveModeSwitcher'
 import { CustomWork } from '../components/CustomWork'
 import { clearDemo, yuanzhangdemo } from './demo'
-import * as THREE from 'three'
 import { Util } from '@realsee/dnalogel/dist'
 
 const defaultCreateStyle: any = {
@@ -139,17 +138,17 @@ const Use = () => {
         </ButtonGroup>
         <ButtonGroup sx={{ width: 'max-content' }} orientation="vertical" color="inherit" variant="contained">
           <Button onClick={() => yuanzhangdemo(five)}>双目</Button>
-          <Button onClick={() => sculpt.createPoint({ ...defaultCreateStyle })}>点</Button>
-          <Button onClick={() => sculpt.createLine({ ...defaultCreateStyle })}>线段</Button>
-          <Button onClick={() => sculpt.createPolyline({ ...defaultCreateStyle })}>折线</Button>
-          <Button onClick={() => sculpt.createPolygon({ ...defaultCreateStyle })}>多边形</Button>
-          <Button onClick={() => sculpt.createRectangle({ ...defaultCreateStyle, drawMethod: 'vertex' })}>矩形</Button>
+          <Button onClick={() => sculpt.createPoint({ ...defaultCreateStyle })}>点(Point)</Button>
+          <Button onClick={() => sculpt.createLine({ ...defaultCreateStyle })}>线段(Line)</Button>
+          <Button onClick={() => sculpt.createPolyline({ ...defaultCreateStyle })}>折线(PolyLine)</Button>
+          <Button onClick={() => sculpt.createPolygon({ ...defaultCreateStyle })}>多边形(Polygon)</Button>
+          <Button onClick={() => sculpt.createRectangle({ ...defaultCreateStyle, drawMethod: 'vertex' })}>矩形(Rectangle)</Button>
           <Button onClick={() => sculpt.createRectangle({ ...defaultCreateStyle, drawMethod: 'diagonal' })}>矩形【对角线】</Button>
-          <Button onClick={() => sculpt.createBox({ ...defaultCreateStyle, drawMethod: 'vertex' })}>长方体</Button>
+          <Button onClick={() => sculpt.createBox({ ...defaultCreateStyle, drawMethod: 'vertex' })}>长方体(Box)</Button>
           <Button onClick={() => sculpt.createBox({ ...defaultCreateStyle, drawMethod: 'diagonal' })}>长方体【对角线】</Button>
-          <Button onClick={() => sculpt.createPrism({ ...defaultCreateStyle })}>多棱柱</Button>
-          <Button onClick={() => sculpt.createCircle({ ...defaultCreateStyle })}>圆</Button>
-          <Button onClick={() => sculpt.createCylinder({ ...defaultCreateStyle })}>圆柱体</Button>
+          <Button onClick={() => sculpt.createPrism({ ...defaultCreateStyle })}>多棱柱(Prism)</Button>
+          <Button onClick={() => sculpt.createCircle({ ...defaultCreateStyle })}>圆(Circle)</Button>
+          <Button onClick={() => sculpt.createCylinder({ ...defaultCreateStyle })}>圆柱体(Cylinder)</Button>
           <Button
             color="error"
             variant="outlined"

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -0,0 +1,5 @@
+import { createTheme } from '@mui/material'
+
+export const theme = createTheme({
+  typography: { button: { textTransform: 'none' } },
+})