feat(engine): fix run in mobile

update publish action: add meta; canvas's size use document.documentElement.clientWidth instead of window.innerWidth; add vConsole; adjust page ui size;
Meta3D-Technology · Mar 14, 2024 · 09638d5 · 09638d5
1 parent defaeda
commit 09638d5
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 43 deletions.
diff --git a/contributes/meta3d-action-publish/.gitignore b/contributes/meta3d-action-publish/.gitignore
@@ -23,3 +23,5 @@ npm-debug
 
 yarn.lock
 
+
+publish/
diff --git a/contributes/meta3d-action-publish/package.json b/contributes/meta3d-action-publish/package.json
@@ -1,6 +1,6 @@
 {
     "name": "meta3d-action-publish",
-    "version": "1.3.35",
+    "version": "1.3.38",
     "publisher": "meta3d",
     "protocol": {
         "name": "meta3d-action-publish-protocol"
@@ -29,7 +29,8 @@
         "meta3d-editor-whole-protocol": "^1.3.0",
         "meta3d-type": "^1.3.0",
         "react": ">=16.8.4",
-        "react-dom": ">=16.8.4"
+        "react-dom": ">=16.8.4",
+        "vconsole": "^3.15.1"
     },
     "devDependencies": {
         "clean-webpack-plugin": "^4.0.0",

diff --git a/contributes/meta3d-action-publish/publish/index.html b/contributes/meta3d-action-publish/publish/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="UTF-8"/><title>Meta3D</title><script defer="defer" src="static/js/main.js"></script></head><body><div id="ui_root"></div></body></html>
+<!doctype html><html><head><meta charset="UTF-8"/><title>Meta3D</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"><script defer="defer" src="static/js/main.js"></script></head><body><div id="ui_root"></div></body></html>
diff --git a/contributes/meta3d-action-publish/publish/static/js/main.js b/contributes/meta3d-action-publish/publish/static/js/main.js
diff --git a/contributes/meta3d-action-publish/publish/static/js/main.js.map b/contributes/meta3d-action-publish/publish/static/js/main.js.map
diff --git a/contributes/meta3d-action-publish/publish_source/index.html b/contributes/meta3d-action-publish/publish_source/index.html
@@ -14,6 +14,8 @@
             font-weight: bold;
         }
     </style> -->
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
 </head>
 
 <body>

diff --git a/contributes/meta3d-action-publish/publish_source/src/Main.tsx b/contributes/meta3d-action-publish/publish_source/src/Main.tsx
@@ -27,13 +27,19 @@ import '@ant-design/flowchart/dist/index.css'
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { Layout } from 'antd';
+import VConsole from 'vconsole';
 
 // import { Bar } from '@ant-design/plots';
 import Page from './Page';
 // import { startLoop } from './Loop';
 import Scene from './Scene';
 
 let App = () => {
+    useEffect(() => {
+        let _ = new VConsole()
+    }, []);
+
+
     return <Layout>
         < Layout.Content >
             <Scene />

diff --git a/contributes/meta3d-action-publish/publish_source/src/Page.tsx b/contributes/meta3d-action-publish/publish_source/src/Page.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Layout, List } from 'antd';
 import { Bar } from '@ant-design/plots';
+import { getWidth } from './ViewUtils';
 
 let Page: React.FC = () => {
   // const [isModalOpen, setIsModalOpen] = useState(false);
@@ -15,27 +16,27 @@ let Page: React.FC = () => {
       year: '1951 年',
       value: 38,
     },
-    {
-      year: '1952 年',
-      value: 52,
-    },
-    {
-      year: '1956 年',
-      value: 61,
-    },
-    {
-      year: '1957 年',
-      value: 145,
-    },
-    {
-      year: '1958 年',
-      value: 48,
-    },
+    // {
+    //   year: '1952 年',
+    //   value: 52,
+    // },
+    // {
+    //   year: '1956 年',
+    //   value: 61,
+    // },
+    // {
+    //   year: '1957 年',
+    //   value: 145,
+    // },
+    // {
+    //   year: '1958 年',
+    //   value: 48,
+    // },
   ];
   const config = {
     data: data1,
     // width: 800,
-    // height: 300,
+    height: 100,
     xField: 'value',
     yField: 'year',
     seriesField: 'year',
@@ -46,7 +47,7 @@ let Page: React.FC = () => {
 
   const data2 = [
     '描述1',
-    '描述2',
+    // '描述2',
   ];
 
   // const handleOk = () => {
@@ -66,8 +67,8 @@ let Page: React.FC = () => {
   return (
     <Layout id="ui_page" style={
       {
-        "position": "absolute", "top": "200px", "left": "200px", "zIndex": "100", "display": "none", 
-        "width": "400px"
+        "position": "absolute", "top": "150px", "left": getWidth() * 0.1 + "px", "zIndex": "100", "display": "none",
+        "width": getWidth() * 0.8 + "px"
         // "height": "400px"
       }
     }>

diff --git a/contributes/meta3d-action-publish/publish_source/src/Scene.tsx b/contributes/meta3d-action-publish/publish_source/src/Scene.tsx
@@ -1,15 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Loading } from './Loading';
 import { load, startLoop } from './Loop';
-
-let _getWidth = () => {
-    return window.innerWidth + "px"
-}
-
-let _getHeight = () => {
-    return window.innerHeight + "px"
-}
-
+import { getHeight, getWidth } from './ViewUtils';
 
 let Scene: React.FC = () => {
     let [isLoading, setIsLoading] = useState(true)
@@ -31,7 +23,7 @@ let Scene: React.FC = () => {
                 <Loading percent={percent} />
                 : null
         }
-        <canvas id="canvas" width={_getWidth()} height={_getHeight()} style={{ "width": _getWidth(), "height": _getHeight() }}></canvas>
+        <canvas id="canvas" width={getWidth() + "px"} height={getHeight() + "px"} style={{ "width": getWidth() + "px", "height": getHeight() + "px" }}></canvas>
     </>
 };
 

diff --git a/contributes/meta3d-action-publish/publish_source/src/ViewUtils.ts b/contributes/meta3d-action-publish/publish_source/src/ViewUtils.ts
@@ -0,0 +1,9 @@
+export let getWidth = () => {
+    // console.log(window.innerWidth);
+    return document.documentElement.clientWidth
+}
+
+export let getHeight = () => {
+    // console.log(window.innerWidth);
+    return document.documentElement.clientHeight
+}
diff --git a/doc/jiehuo.org b/doc/jiehuo.org
@@ -413,21 +413,26 @@ TODO publish and update
 web-render c
 
 
-* TODO make demo run in mobile
+* DONE make demo run in mobile
 
 TODO update
 pipeline event
 
+webrender c
+
 
 
 ** DONE handle mobile event for arcball
 
-** TODO add meta
+** DONE add meta
+
+** DONE handle canvas size
 
-** TODO add vConsole
+** DONE add vConsole
 
-** TODO handle canvas size
+** DONE ui position and size should match mobile
 
+** DONE host demo to tencent cloud
 
 TODO demo in mobile run test:
 show scene
@@ -436,8 +441,12 @@ click
 show ui
 
 
+TODO
+# can't orbit camera
+view aspect error
+
 
-* TODO improve model
+* DONE improve model
 
 TODO 墙就用白色就可以了，地面就是普通的水泥颜色:
     clone multiple 白墙

diff --git a/...s/engine-whole/web-render/contributes/meta3d-pipeline-webgl1-three-webrender/package.json b/...s/engine-whole/web-render/contributes/meta3d-pipeline-webgl1-three-webrender/package.json
@@ -1,6 +1,6 @@
 {
     "name": "meta3d-pipeline-webgl1-three-webrender",
-    "version": "1.3.7",
+    "version": "1.3.8",
     "publisher": "meta3d",
     "protocol": {
         "name": "meta3d-pipeline-webgl1-three-webrender-protocol"

diff --git a/packages/event/contributes/meta3d-pipeline-event/package.json b/packages/event/contributes/meta3d-pipeline-event/package.json
@@ -1,6 +1,6 @@
 {
     "name": "meta3d-pipeline-event",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "publisher": "meta3d",
     "protocol": {
         "name": "meta3d-pipeline-event-protocol"
@@ -15,7 +15,7 @@
     },
     "keywords": [],
     "dependencies": {
-        "device-detector-js":"^3.0.3",
+        "device-detector-js": "^3.0.3",
         "meta3d-core-protocol": "^1.3.0",
         "meta3d-event-protocol": "^1.3.0",
         "meta3d-pipeline-event-protocol": "^1.2.0",