mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added 3d closet demo, cleaned up menus.

Browse Source
This commit is contained in:
Michael Mainguy 2024-02-05 10:46:23 -06:00
parent 2ef5379a3b
commit e41f8194d5
7 changed files with 233 additions and 3566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
index.html
View File

@ -96,7 +96,7 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 12; z-index: 12;
width: 320px; width: 320px;
height: 240px; height: 344px;
border: 3px inset #FFD700; border: 3px inset #FFD700;
display: none; display: none;
} }
@ -170,76 +170,8 @@
<!--<script src='/niceware.js'></script>--> <!--<script src='/niceware.js'></script>-->
</head> </head>
<body> <body>
<div class="overlay" id="tutorial">
<h1>Help</h1>
<div id="desktopTutorial"><a href="#" id="desktopLink">Desktop</a></div>
<div id="questTutorial"><a href="#" id="questLink">Quest</a></div>
</div>
<div class="overlay mini" id="main">
<img height="120" src="/assets/ddd.svg" width="320">
<div id="startCreate"><a href="#" id="startCreateLink">Start</a></div>
<div id="download"><a href="#" id="downloadLink">Download Model</a></div>
</div>
<div class="overlay" id="create">
<div><input id="createName" placeholder="Enter a name for your diagram" type="text"></div>
<div><input id="createPassword" placeholder="Enter a password (optional)" type="text"></div>
<div><a href="#" id="createActionLink">Create</a></div>
<div><a class="cancel" href="#" id="cancelCreateLink">Cancel</a></div>
</div>
<div class="overlay" id="keyboardHelp">
<div id="closekey"><a href="#">X</a></div>
<img height="240" src="/assets/textures/keyboardhelp2.jpg" width="480">
<img height="240" src="/assets/textures/mousehelp.jpg" width="180">
</div>
<img id="loadingGrid" src="/assets/grid3.jpg"/> <img id="loadingGrid" src="/assets/grid3.jpg"/>
<script> <script>
const create = document.querySelector('#startCreateLink');
if (create) {
create.addEventListener('click', function (evt) {
evt.preventDefault();
document.querySelector('#main').style.display = 'none';
document.querySelector('#create').style.display = 'block';
});
}
const cancel = document.querySelector('#cancelCreateLink');
if (cancel) {
cancel.addEventListener('click', function (evt) {
evt.preventDefault();
document.querySelector('#main').style.display = 'block';
document.querySelector('#create').style.display = 'none';
});
}
const close = document.querySelector('#closekey a');
if (close) {
close.addEventListener('click', function (evt) {
evt.preventDefault();
document.querySelector('#keyboardHelp').style.display = 'none';
});
}
const desktopTutorial = document.querySelector('#desktopLink');
if (desktopTutorial) {
desktopTutorial.addEventListener('click', function (evt) {
evt.preventDefault();
// document.querySelector('#tutorial').style.display = 'none';
document.querySelector('#keyboardHelp').style.display = 'block';
});
}
const createAction = document.querySelector('#createActionLink');
if (createAction) {
createAction.addEventListener('click', function (evt) {
evt.preventDefault();
const value = document.querySelector('#createName').value;
if (value && value.length > 4) {
document.location.href = '/db/' + value;
} else {
window.alert('Name must be longer than 4 characters');
}
});
}
/* /*
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
@ -263,8 +195,12 @@
*/ */
</script> </script>
<div class="webApp" id="webApp">
</div>
<script src="/src/vrApp.ts" type="module"></script> <script src="/src/vrApp.ts" type="module"></script>
<div class="scene"> <div class="scene">
<canvas id="gameCanvas"></canvas> <canvas id="gameCanvas"></canvas>
</div> </div>

3569
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -15,6 +15,7 @@
"havok": "cp ./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm ./node_modules/.vite/deps" "havok": "cp ./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm ./node_modules/.vite/deps"
}, },
"dependencies": { "dependencies": {
"axios": "^0.24.0",
"@babylonjs/core": "^6.21.3", "@babylonjs/core": "^6.21.3",
"@babylonjs/gui": "^6.21.3", "@babylonjs/gui": "^6.21.3",
"@babylonjs/havok": "1.1.4", "@babylonjs/havok": "1.1.4",
@ -38,6 +39,9 @@
"pouchdb": "^8.0.1", "pouchdb": "^8.0.1",
"pouchdb-find": "^7.2.2", "pouchdb-find": "^7.2.2",
"query-string": "^8.1.0", "query-string": "^8.1.0",
"react-dom": "^18.2.0",
"@types/react-dom": "^18.2.18",
"@types/react": "^18.2.52",
"round": "^2.0.1", "round": "^2.0.1",
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },

3
src/integration/pouchdbPersistenceManager.ts
View File

@ -24,6 +24,9 @@ export class PouchdbPersistenceManager {
this.diagramListings = new PouchDB("diagramListings"); this.diagramListings = new PouchDB("diagramListings");
} }
public async getDiagramListings() {
return this.diagramListings.allDocs({include_docs: true});
}
public setDiagramManager(diagramManager: DiagramManager) { public setDiagramManager(diagramManager: DiagramManager) {
diagramManager.onDiagramEventListingObservable.add((evt) => { diagramManager.onDiagramEventListingObservable.add((evt) => {
if (evt.type == DiagramListingEventType.GETALL) { if (evt.type == DiagramListingEventType.GETALL) {

140
src/react/webApp.tsx Normal file
View File

@ -0,0 +1,140 @@
import {useState} from "react";
function MainMenu({onClick}) {
return (
<div className="overlay mini" id="main" onClick={onClick}>
<img height="120" src="/assets/ddd.svg" width="320"/>
<div id="startCreate"><a href="#" id="startCreateLink">Start</a></div>
<div id="download"><a href="#" id="downloadLink">Download Model</a></div>
</div>
)
}
function CreateMenu({display}) {
return (
<div className="overlay" id="create" style={{'display': display}}>
<div>
<div><input id="createName" placeholder="Enter a name for your diagram" type="text"/></div>
<div><input id="createPassword" placeholder="Enter a password (optional)" type="text"/></div>
<div><a href="#" id="createActionLink">Create</a></div>
<div><a className="cancel" href="#" id="cancelCreateLink">Cancel</a></div>
</div>
</div>
)
}
function TutorialMenu({onClick}) {
return (
<div className="overlay" id="tutorial">
<h1>Help</h1>
<div id="desktopTutorial"><a href="#" id="desktopLink" onClick={onClick}>Desktop</a></div>
<div id="questTutorial"><a href="#" id="questLink">Quest</a></div>
</div>
)
}
function KeyboardHelp({display, onClick}) {
return (
<div className="overlay" id="keyboardHelp" style={{'display': display}}>
<div id="closekey"><a href="#" onClick={onClick}>X</a></div>
<img height="240" src="/assets/textures/keyboardhelp2.jpg" width="480"/>
<img height="240" src="/assets/textures/mousehelp.jpg" width="180"/>
</div>
)
}
function DiagramList() {
return (
<div className="overlay" id="diagramList" style={{'left': '500px'}}>
<h1>Existing Diagrams</h1>
<div id="diagramListContent">
<ul>
<li><a href="/db/ddd">ddd</a></li>
<li><a href="/db/ddd2">ddd2</a></li>
<li><a href="/db/ddd3">ddd3</a></li>
</ul>
</div>
</div>
)
}
function Menu() {
const [createState, setCreateState] = useState('none');
const [desktopTutorialState, setDesktopTutorialState] = useState('none');
function handleCreateClick() {
setCreateState(createState == 'none' ? 'block' : 'none');
}
function handleDesktopTutorialClick() {
setDesktopTutorialState(desktopTutorialState == 'none' ? 'block' : 'none');
}
return (
<div>
<MainMenu onClick={handleCreateClick}/>
<TutorialMenu onClick={handleDesktopTutorialClick}/>
<CreateMenu display={createState}/>
<KeyboardHelp display={desktopTutorialState} onClick={handleDesktopTutorialClick}/>
</div>
)
}
export default function WebApp() {
return (
<div>
<Menu/>
</div>
)
}
/*
const create = document.querySelector('#startCreateLink');
if (create) {
create.addEventListener('click', function (evt) {
evt.preventDefault();
document.querySelector('#main').style.display = 'none';
document.querySelector('#create').style.display = 'block';
});
}
const cancel = document.querySelector('#cancelCreateLink');
if (cancel) {
cancel.addEventListener('click', function (evt) {
evt.preventDefault();
document.querySelector('#main').style.display = 'block';
document.querySelector('#create').style.display = 'none';
});
}
const close = document.querySelector('#closekey a');
if (close) {
close.addEventListener('click', function (evt) {
evt.preventDefault();
document.querySelector('#keyboardHelp').style.display = 'none';
});
}
const desktopTutorial = document.querySelector('#desktopLink');
if (desktopTutorial) {
desktopTutorial.addEventListener('click', function (evt) {
evt.preventDefault();
// document.querySelector('#tutorial').style.display = 'none';
document.querySelector('#keyboardHelp').style.display = 'block';
});
}
const createAction = document.querySelector('#createActionLink');
if (createAction) {
createAction.addEventListener('click', function (evt) {
evt.preventDefault();
const value = document.querySelector('#createName').value;
if (value && value.length > 4) {
document.location.href = '/db/' + value;
} else {
window.alert('Name must be longer than 4 characters');
}
});
}
*/

6
src/vrApp.ts
View File

@ -1,3 +1,5 @@
import {createRoot} from 'react-dom/client';
import WebApp from './react/webApp';
import {Engine, FreeCamera, Scene, Vector3} from "@babylonjs/core"; import {Engine, FreeCamera, Scene, Vector3} from "@babylonjs/core";
import '@babylonjs/loaders'; import '@babylonjs/loaders';
import {DiagramManager} from "./diagram/diagramManager"; import {DiagramManager} from "./diagram/diagramManager";
@ -16,7 +18,6 @@ import {buildQuestLink} from "./util/functions/buildQuestLink";
import {exportGltf} from "./util/functions/exportGltf"; import {exportGltf} from "./util/functions/exportGltf";
import {Tutorial} from "./tutorial/tutorial"; import {Tutorial} from "./tutorial/tutorial";
export class VrApp { export class VrApp {
private scene: Scene; private scene: Scene;
private engine: Engine; private engine: Engine;
@ -24,6 +25,8 @@ export class VrApp {
private logger: Logger = log.getLogger('App'); private logger: Logger = log.getLogger('App');
constructor() { constructor() {
const root = createRoot(document.getElementById('webApp'));
root.render(WebApp());
log.setDefaultLevel('warn'); log.setDefaultLevel('warn');
log.getLogger('App').setLevel('debug'); log.getLogger('App').setLevel('debug');
log.getLogger('DiagramManager').setLevel('debug'); log.getLogger('DiagramManager').setLevel('debug');
@ -61,6 +64,7 @@ export class VrApp {
db.setConfig(newConfig); db.setConfig(newConfig);
}, 2, false, this); }, 2, false, this);
await db.initialize(); await db.initialize();
const camera: FreeCamera = new FreeCamera("Main Camera", const camera: FreeCamera = new FreeCamera("Main Camera",
new Vector3(0, 1.6, 0), scene); new Vector3(0, 1.6, 0), scene);
//camera.setTarget(new Vector3(0, 1.6, -3)); //camera.setTarget(new Vector3(0, 1.6, -3));

1
tsconfig.json
View File

@ -1,5 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"jsx": "react-jsx",
"target": "es6", "target": "es6",
// choose our ECMA/JavaScript version (all modern browsers support ES6 so it's your best bet) // choose our ECMA/JavaScript version (all modern browsers support ES6 so it's your best bet)
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,