Skip to content

Commit

Permalink
feat(engine): add loading percent, logo; change canvas's size to 100%;
Browse files Browse the repository at this point in the history 
update publish action;
  • Loading branch information
@yyc-git
yyc-git committed Mar 13, 2024
1 parent 48e8901 commit bebb76b
Show file tree
Hide file tree
Showing 17 changed files with 223 additions and 220 deletions.
3 changes: 2 additions & 1 deletion contributes/meta3d-action-publish/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "meta3d-action-publish",
"version": "1.3.17",
"version": "1.3.34",
"publisher": "meta3d",
"protocol": {
"name": "meta3d-action-publish-protocol"
Expand All @@ -10,6 +10,7 @@
"watch": "tsc -w -noEmit",
"webpack": "webpack --config webpack.config.js",
"webpack_publish": "webpack --config webpack.config.publish.js",
"webpack_publish:dev": "cross-env NODE_ENV=development npm run webpack_publish",
"meta3d:publish_dev_auto": "yarn version --patch --no-git-tag-version && yarn meta3d:publish_dev",
"meta3d:publish_dev": "cross-env NODE_ENV=production npm run webpack_publish && cross-env NODE_ENV=production npm run webpack && gulp publish_local_env",
"meta3d:publish_pro": "cross-env NODE_ENV=production npm run webpack_publish && cross-env NODE_ENV=production npm run webpack && gulp publish_production_env"
Expand Down
Binary file added contributes/meta3d-action-publish/publish/image/gif/loading.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added contributes/meta3d-action-publish/publish/image/png/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 1 addition & 7 deletions contributes/meta3d-action-publish/publish/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1 @@
<!doctype html><html><head><meta charset="UTF-8"/><title>Meta3D</title><style>#loading {
display: block;
/* color: #e7981f; */
/* margin-top: 10px; */
font-size: 85px;
font-weight: bold;
}</style><script defer="defer" src="static/js/main.js"></script></head><body><section><span id="loading">loading...</span></section><canvas id="canvas" width="800" height="800"></canvas><div id="root_page" style="position:absolute;top:200px;left:200px;z-index:100;display: none;width:400px;height:400px;"></div></body></html>
<!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>
2 changes: 1 addition & 1 deletion contributes/meta3d-action-publish/publish/static/js/main.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion contributes/meta3d-action-publish/publish/static/js/main.js.map
View file

Large diffs are not rendered by default.

Binary file added contributes/meta3d-action-publish/publish_source/image/gif/loading.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added contributes/meta3d-action-publish/publish_source/image/png/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 5 additions & 108 deletions contributes/meta3d-action-publish/publish_source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<title>Meta3D</title>

<!--
<style>
#loading {
display: block;
Expand All @@ -13,117 +13,14 @@
font-size: 85px;
font-weight: bold;
}
</style>
</style> -->
</head>

<body>
<section>
<span id="loading">
<!-- TODO use logo + loading gif -->
loading...
</span>
</section>

<!-- TODO full screen -->
<canvas id="canvas" width=800 height=800></canvas>

<div id="root_page"
<!-- <div id="root_page"
style="position:absolute;top:200px;left:200px;z-index:100;display: none;width:400px;height:400px;">
</div>

<!-- <script src="./meta3d.js"></script> -->

<!-- <script>
window.onload = () => {
let _removeLoadingUI = () => {
document.querySelector("#loading").remove()
}
let _loop = (
[
update, render,
],
meta3dState,
) => {
return update(meta3dState).then((meta3dState) => {
render(meta3dState).then((meta3dState) => {
requestAnimationFrame(() => {
_loop(
[
update, render,
],
meta3dState
)
})
})
})
}
let _main = () => {
let isDebug = true
let float9Array1 = new Float32Array(9)
let float32Array1 = new Float32Array(32)
let transformCount = 100000
let geometryCount = 100000
let geometryPointCount = 10000000
let pbrMaterialCount = 100000
let canvas = document.querySelector("#canvas")
fetch("./Engine.arraybuffer")
.then(response => response.arrayBuffer())
.then(enginePackageBinaryFile => {
return fetch("./Scene.glb")
.then(response => response.arrayBuffer())
.then(sceneGlb => {
_removeLoadingUI()
return [enginePackageBinaryFile, sceneGlb]
})
})
.then(([enginePackageBinaryFile, sceneGlb]) => {
let [meta3dState, _, entryExtensionProtocolName] = Meta3d.loadPackage(enginePackageBinaryFile)
if (entryExtensionProtocolName !== "meta3d-engine-whole-protocol") {
throw new Error(
`entryExtensionProtocolName: ${entryExtensionProtocolName} should be meta3d-engine-whole-protocol`
)
}
let { loadScene, prepare, init, update, render, scene } = Meta3d.getExtensionService(meta3dState, entryExtensionProtocolName)
meta3dState = prepare(
meta3dState,
isDebug,
{
float9Array1,
float32Array1,
transformCount,
geometryCount,
geometryPointCount,
pbrMaterialCount
}
)
return loadScene(meta3dState, sceneGlb).then(meta3dState => {
return init(meta3dState, canvas).then(meta3dState => {
console.log("init success", meta3dState)
_loop([update, render], meta3dState)
})
})
})
.catch(error => {
console.error(error)
})
}
_main()
}
</script> -->
</div> -->
<div id="ui_root"></div>
</body>


Expand Down
10 changes: 10 additions & 0 deletions contributes/meta3d-action-publish/publish_source/src/Loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React, { useState, useEffect } from 'react';
import { Row } from 'antd';

export let Loading = ({ percent }) => {
return <Row align="middle">
<img src="./image/png/logo.png" width="64px" height="64px" />
<img src="./image/gif/loading.gif" width="100px" height="100ps" />
{"加载中：" + percent.toString() + "%"}
</Row >
};
89 changes: 44 additions & 45 deletions contributes/meta3d-action-publish/publish_source/src/Loop.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
// import "meta3d/webpack_output/static/js/main.js"
import * as Meta3d from "meta3d";

let _removeLoadingUI = () => {
(document as any).querySelector("#loading").remove()
}

let _loop = (
[

Expand All @@ -26,7 +22,24 @@ let _loop = (
})
}

export let startLoop = () => {
export let load = (setPercentFunc): Promise<[ArrayBuffer, ArrayBuffer]> => {
return fetch("./Engine.arraybuffer")
.then(response => response.arrayBuffer())
.then(enginePackageBinaryFile => {
setPercentFunc(_ => 50)

return fetch("./Scene.glb")
.then(response => response.arrayBuffer())
.then(sceneGlb => {
setPercentFunc(_ => 100)
// _removeLoadingUI()

return [enginePackageBinaryFile, sceneGlb]
})
})
}

export let startLoop = ([enginePackageBinaryFile, sceneGlb]) => {
// let Meta3d = (globalThis as any).Meta3d

let isDebug = true
Expand All @@ -40,51 +53,37 @@ export let startLoop = () => {

let canvas = document.querySelector("#canvas")

fetch("./Engine.arraybuffer")
.then(response => response.arrayBuffer())
.then(enginePackageBinaryFile => {
return fetch("./Scene.glb")
.then(response => response.arrayBuffer())
.then(sceneGlb => {
_removeLoadingUI()

return [enginePackageBinaryFile, sceneGlb]
})
})
.then(([enginePackageBinaryFile, sceneGlb]) => {
let [meta3dState, _, entryExtensionProtocolName] = Meta3d.loadPackage(enginePackageBinaryFile)
let [meta3dState, _, entryExtensionProtocolName] = Meta3d.loadPackage(enginePackageBinaryFile)

if (entryExtensionProtocolName !== "meta3d-engine-whole-protocol") {
throw new Error(
`entryExtensionProtocolName: ${entryExtensionProtocolName} should be meta3d-engine-whole-protocol`
)
}
if (entryExtensionProtocolName !== "meta3d-engine-whole-protocol") {
throw new Error(
`entryExtensionProtocolName: ${entryExtensionProtocolName} should be meta3d-engine-whole-protocol`
)
}


let { loadScene, prepare, init, update, render, scene } = Meta3d.getExtensionService<any>(meta3dState, entryExtensionProtocolName)
let { loadScene, prepare, init, update, render, scene } = Meta3d.getExtensionService<any>(meta3dState, entryExtensionProtocolName)

meta3dState = prepare(
meta3dState,
isDebug,
{
float9Array1,
float32Array1,
transformCount,
geometryCount,
geometryPointCount,
pbrMaterialCount
}
)
meta3dState = prepare(
meta3dState,
isDebug,
{
float9Array1,
float32Array1,
transformCount,
geometryCount,
geometryPointCount,
pbrMaterialCount
}
)

return loadScene(meta3dState, sceneGlb).then(meta3dState => {
return init(meta3dState, canvas).then(meta3dState => {
console.log("init success", meta3dState)
return loadScene(meta3dState, sceneGlb).then(meta3dState => {
return init(meta3dState, canvas).then(meta3dState => {
console.log("init success", meta3dState)

_loop([update, render], meta3dState)
})
})
})
.catch(error => {
console.error(error)
_loop([update, render], meta3dState)
})
}).catch(error => {
console.error(error)
})
}
52 changes: 8 additions & 44 deletions contributes/meta3d-action-publish/publish_source/src/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,52 +30,16 @@ import { Layout } from 'antd';

// import { Bar } from '@ant-design/plots';
import Page from './Page';
import { startLoop } from './Loop';

const DemoBar = () => {
// const data = [
// {
// year: '1951 年',
// value: 38,
// },
// {
// year: '1952 年',
// value: 52,
// },
// {
// year: '1956 年',
// value: 61,
// },
// {
// year: '1957 年',
// value: 145,
// },
// {
// year: '1958 年',
// value: 48,
// },
// ];
// const config = {
// data,
// xField: 'value',
// yField: 'year',
// seriesField: 'year',
// legend: {
// position: 'top-left',
// },
// } as any;
// import { startLoop } from './Loop';
import Scene from './Scene';

let App = () => {
return <Layout>
{/* <Bar {...config} /> */}
<Layout.Content>
< Layout.Content >
<Scene />
<Page />
</Layout.Content>
</Layout>
</Layout.Content >
</Layout >
};



(ReactDOM as any).render(<DemoBar />, document.getElementById('root_page'));


startLoop()
(ReactDOM as any).render(<App />, document.getElementById('ui_root'));
14 changes: 10 additions & 4 deletions contributes/meta3d-action-publish/publish_source/src/Page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useState } from 'react';
import { Button, Modal, List } from 'antd';
import { Button, Layout, List } from 'antd';
import { Bar } from '@ant-design/plots';

const Page: React.FC = () => {
let Page: React.FC = () => {
// const [isModalOpen, setIsModalOpen] = useState(false);
// const [isModalOpen, setIsModalOpen] = useState(true);

Expand Down Expand Up @@ -64,7 +64,13 @@ const Page: React.FC = () => {


return (
<>
<Layout id="ui_page" style={
{
"position": "absolute", "top": "200px", "left": "200px", "zIndex": "100", "display": "none", "width": "400px",
"height": "400px"
}
}>

{/* <Button type="primary" onClick={showModal}>
Open Modal
</Button> */}
Expand All @@ -87,7 +93,7 @@ const Page: React.FC = () => {
<Button type="primary" onClick={handleClose}>
关闭
</Button>
</>
</Layout >
);
};

Expand Down
Loading

0 comments on commit bebb76b

Please sign in to comment.