ホーム エクスプローラ ヘルプ
登録 サインイン
zhangyupeng
/
Babylon.js
1
0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

new frames

David `Deltakosh` Catuhe 5 年 前
親
a364a4f0ef
コミット
9dff3a1b47
13 ファイル変更、305 行追加、8 行削除
分割表示 差分情報を表示
  1. 85 0
      Playground/frame.html
  2. 85 0
      Playground/full.html
  3. 2 0
      Playground/index-frame.js
  4. 2 0
      Playground/index-full.js
  5. 20 2
      Playground/src/components/footerComponent.tsx
  6. 10 2
      Playground/src/components/rendererComponent.tsx
  7. 11 1
      Playground/src/globalState.ts
  8. 10 0
      Playground/src/imgs/edit.svg
  9. 10 0
      Playground/src/imgs/refresh.svg
  10. 30 3
      Playground/src/playground.tsx
  11. 7 0
      Playground/src/scss/footer.scss
  12. 26 0
      Playground/src/scss/main.scss
  13. 7 0
      Playground/src/scss/rendering.scss

+ 85 - 0
Playground/frame.html
ファイルの表示 

@@ -0,0 +1,85 @@
 
+<!DOCTYPE html>

+<html>

+

+    <head>

+        <title>Babylon.js Playground</title>

+        <meta charset='utf-8' />

+        <meta name="viewport" content="width=device-width, user-scalable=no">

+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">

+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">

+        <meta name="keywords" content="Babylon.js,WebGL,3D">

+        

+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">

+        <link rel="stylesheet"

+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />

+

+        <!-- Pep -->

+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

+        <!--For canvas/code separator-->

+        <script src="libs/split.js"></script>

+

+        <!-- DatGUI -->

+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

+        <!-- jszip -->

+        <script src="libs/jszip.min.js"></script>

+        <script src="libs/fileSaver.js"></script>

+

+        <!-- Dependencies -->

+        <script src="https://preview.babylonjs.com/ammo.js"></script>

+        <script src="https://preview.babylonjs.com/recast.js"></script>

+        <script src="https://preview.babylonjs.com/cannon.js"></script>

+        <script src="https://preview.babylonjs.com/Oimo.js"></script>

+        <script src="https://preview.babylonjs.com/libktx.js"></script>

+        <script src="https://preview.babylonjs.com/earcut.min.js"></script>

+        

+        <!-- Babylon.js -->

+        <script src="https://preview.babylonjs.com/babylon.js"></script>

+        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

+        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>

+        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>

+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>

+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>

+        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

+        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

+

+         <!-- Extensions -->

+         <script

+             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"

+             >

+         </script>

+         <script

+             src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"

+             ></script>

+ 

+         <!-- Scene Manager -->

+         <script

+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">

+         </script>

+         <script

+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">

+         </script>        

+

+        <style>

+            html,

+            body,

+            #host-element {

+                width: 100%;

+                height: 100%;

+                padding: 0;

+                margin: 0;

+                overflow: hidden;

+            }

+        </style>        

+    </head>

+

+    <body>        

+        <div id="host-element">

+        </div>   

+        

+        <script src="dist/babylon.playground.js"></script>

+        

+        <script src="index-frame.js"></script>

+    </body>

+

+</html>

+ 85 - 0
Playground/full.html
ファイルの表示 

@@ -0,0 +1,85 @@
 
+<!DOCTYPE html>

+<html>

+

+    <head>

+        <title>Babylon.js Playground</title>

+        <meta charset='utf-8' />

+        <meta name="viewport" content="width=device-width, user-scalable=no">

+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">

+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">

+        <meta name="keywords" content="Babylon.js,WebGL,3D">

+        

+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">

+        <link rel="stylesheet"

+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />

+

+        <!-- Pep -->

+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

+        <!--For canvas/code separator-->

+        <script src="libs/split.js"></script>

+

+        <!-- DatGUI -->

+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

+        <!-- jszip -->

+        <script src="libs/jszip.min.js"></script>

+        <script src="libs/fileSaver.js"></script>

+

+        <!-- Dependencies -->

+        <script src="https://preview.babylonjs.com/ammo.js"></script>

+        <script src="https://preview.babylonjs.com/recast.js"></script>

+        <script src="https://preview.babylonjs.com/cannon.js"></script>

+        <script src="https://preview.babylonjs.com/Oimo.js"></script>

+        <script src="https://preview.babylonjs.com/libktx.js"></script>

+        <script src="https://preview.babylonjs.com/earcut.min.js"></script>

+        

+        <!-- Babylon.js -->

+        <script src="https://preview.babylonjs.com/babylon.js"></script>

+        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

+        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>

+        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>

+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>

+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>

+        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

+        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

+

+         <!-- Extensions -->

+         <script

+             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"

+             >

+         </script>

+         <script

+             src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"

+             ></script>

+ 

+         <!-- Scene Manager -->

+         <script

+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">

+         </script>

+         <script

+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">

+         </script>        

+

+        <style>

+            html,

+            body,

+            #host-element {

+                width: 100%;

+                height: 100%;

+                padding: 0;

+                margin: 0;

+                overflow: hidden;

+            }

+        </style>        

+    </head>

+

+    <body>        

+        <div id="host-element">

+        </div>   

+        

+        <script src="dist/babylon.playground.js"></script>

+        

+        <script src="index-full.js"></script>

+    </body>

+

+</html>

+ 2 - 0
Playground/index-frame.js
ファイルの表示 

@@ -0,0 +1,2 @@
 
+var hostElement = document.getElementById("host-element");

+BABYLON.Playground.Show(hostElement, 2);

+ 2 - 0
Playground/index-full.js
ファイルの表示 

@@ -0,0 +1,2 @@
 
+var hostElement = document.getElementById("host-element");

+BABYLON.Playground.Show(hostElement, 1);

+ 20 - 2
Playground/src/components/footerComponent.tsx
ファイルの表示 

@@ -1,10 +1,12 @@
 
 import * as React from "react";

-import { GlobalState, EditionMode } from '../globalState';

+import { GlobalState, EditionMode, RuntimeMode } from '../globalState';

 import DocumentationIcon from "../imgs/documentation.svg";

 import ForumIcon from "../imgs/forum.svg";

 import SearchIcon from "../imgs/search.svg";

 import CodeOnlyIcon from "../imgs/codeOnly.svg";

 import RenderingOnlyIcon from "../imgs/renderingOnly.svg";

+import RefreshIcon from "../imgs/refresh.svg";

+import EditIcon from "../imgs/edit.svg";

 

 require("../scss/footer.scss");

 

@@ -39,6 +41,22 @@ export class FooterComponent extends React.Component<IFooterComponentProps> {
 
     }

 

     public render() {

+        if (this.props.globalState.runtimeMode === RuntimeMode.Frame) {

+            return (

+                <div id="footer" className={(this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>   

+                    <div className="links">

+                    <div className='link'>

+                            <a href="#" onClick={() => location.reload()} title="Reload"><RefreshIcon/></a>

+                        </div>

+                        <div className='link'>

+                            <a target='_new' href={"https://playground.babylonjs.com/" + location.hash} title="Edit"><EditIcon/></a>

+                        </div>

+                    </div>  

+                    <div className="fps" ref={this._fpsRef}></div>          

+                </div>   

+            );

+        }

+

         return (

             <div id="footer" className={(this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>   

                 {

@@ -70,6 +88,6 @@ export class FooterComponent extends React.Component<IFooterComponentProps> {
 
                 </div>  

                 <div className="fps" ref={this._fpsRef}></div>          

             </div>   

-        )

+        );

     }

 }

+ 10 - 2
Playground/src/components/rendererComponent.tsx
ファイルの表示 

@@ -1,5 +1,5 @@
 
 import * as React from "react";

-import { GlobalState } from '../globalState';

+import { GlobalState, RuntimeMode } from '../globalState';

 import {Engine} from "babylonjs/Engines/engine"

 import { Nullable } from 'babylonjs/types';

 import { Scene } from 'babylonjs/scene';

@@ -60,6 +60,12 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
 
             this._engine?.switchFullscreen(false);

         });

 

+        if (this.props.globalState.runtimeMode !== RuntimeMode.Editor) {

+            this.props.globalState.onCodeLoaded.add(code => {      

+                this.props.globalState.currentCode = code;

+                this.props.globalState.onRunRequiredObservable.notifyObservers();

+            });

+        }

     }

 

     private async _compileAndRunAsync() {

@@ -203,7 +209,9 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
 
                 if(!(this._scene.activeCamera && 

                     this._scene.activeCamera.getClassName && 

                     this._scene.activeCamera.getClassName() === 'WebXRCamera')) {

-                    this.props.globalState.fpsElement.innerHTML = this._engine.getFps().toFixed() + " fps";

+                    if (this.props.globalState.runtimeMode !== RuntimeMode.Full) {

+                        this.props.globalState.fpsElement.innerHTML = this._engine.getFps().toFixed() + " fps";

+                    }

                 }

             });

+ 11 - 1
Playground/src/globalState.ts
ファイルの表示 

@@ -9,16 +9,26 @@ export enum EditionMode {
 
     RenderingOnly

 }

 

+export enum RuntimeMode {

+    Editor = 0,

+    Full = 1,

+    Frame = 2

+}

+

 export class GlobalState {

     public readonly MobileSizeTrigger = 1024;

     public readonly SnippetServerUrl = "https://snippet.babylonjs.com";

 

     public currentCode: string;

-    public getCompiledCode: () => Promise<string>;

+    public getCompiledCode: () => Promise<string> = () => {

+        return Promise.resolve(this.currentCode);

+    }

     public language = Utilities.ReadStringFromStore("language", "JS");;

     public fpsElement: HTMLDivElement;

     public mobileDefaultMode = EditionMode.RenderingOnly;

 

+    public runtimeMode = RuntimeMode.Editor;

+

     public currentSnippetTitle = "";

     public currentSnippetDescription = "";

     public currentSnippetTags = "";

ファイルの差分が大きいため隠しています
+ 10 - 0
Playground/src/imgs/edit.svg


ファイルの差分が大きいため隠しています
+ 10 - 0
Playground/src/imgs/refresh.svg


+ 30 - 3
Playground/src/playground.tsx
ファイルの表示 

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import * as ReactDOM from "react-dom";

 import { MonacoComponent } from './components/monacoComponent';

 import { RenderingComponent } from './components/rendererComponent';

-import { GlobalState, EditionMode } from './globalState';

+import { GlobalState, EditionMode, RuntimeMode } from './globalState';

 import { FooterComponent } from './components/footerComponent';

 import { HeaderComponent } from './components/headerComponent';

 import { SaveManager } from './tools/saveManager';

@@ -19,6 +19,7 @@ require("./scss/main.scss");
 
 const Split = require('split.js').default;

 

 interface IPlaygroundProps {

+    runtimeMode: RuntimeMode

 }

 

 export class Playground extends React.Component<IPlaygroundProps, {errorMessage: string, mode: EditionMode}> {    

@@ -37,6 +38,8 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
 
        super(props);

        this._globalState = new GlobalState();

 

+       this._globalState.runtimeMode = props.runtimeMode || RuntimeMode.Editor;

+

        this.splitRef = React.createRef();

        this.monacoRef = React.createRef();

        this.renderingRef = React.createRef();

@@ -73,6 +76,10 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
 
     }

 

     checkSize() {

+        if (this._globalState.runtimeMode !== RuntimeMode.Editor) {

+            return;

+        }

+

         switch(this.state.mode) {

             case EditionMode.CodeOnly:                

                 this._splitInstance?.destroy();

@@ -104,6 +111,26 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
 
     }

 

     public render() {

+        if (this._globalState.runtimeMode === RuntimeMode.Full) {

+            return (

+                <div id="pg-root-full">              

+                    <RenderingComponent globalState={this._globalState}/>

+                    <ErrorDisplayComponent globalState={this._globalState}/>            

+                    <WaitRingComponent globalState={this._globalState}/>

+                </div>   

+            )

+        }

+

+        if (this._globalState.runtimeMode === RuntimeMode.Frame) {

+            return (

+                <div id="pg-root-frame">              

+                    <RenderingComponent globalState={this._globalState}/>

+                    <FooterComponent globalState={this._globalState}/>    

+                    <ErrorDisplayComponent globalState={this._globalState}/>            

+                    <WaitRingComponent globalState={this._globalState}/>

+                </div>   

+            )

+        }

 

         return (

             <div id="pg-root">              

@@ -127,8 +154,8 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
 
         )

     }

 

-    public static Show(hostElement: HTMLElement) {

-        const playground = React.createElement(Playground, {});

+    public static Show(hostElement: HTMLElement, mode: RuntimeMode) {

+        const playground = React.createElement(Playground, {runtimeMode: mode});

         

         ReactDOM.render(playground, hostElement);

     }

+ 7 - 0
Playground/src/scss/footer.scss
ファイルの表示 

@@ -1,3 +1,10 @@
 
+#pg-root-frame {

+    #footer {

+        grid-column: 1;

+        grid-row: 2;

+    }

+}

+

 #footer {

     width: 100%;

     height: 100%;

+ 26 - 0
Playground/src/scss/main.scss
ファイルの表示 

@@ -11,6 +11,32 @@
 
     grid-template-rows: 55px 1fr 35px;

 }

 

+#pg-root-frame {

+    width: 100%;

+    height: 100%;

+    padding: 0;

+    margin: 0;

+    overflow: hidden;

+    font-family: "acumin-pro-condensed";

+    font-weight: normal;    

+    display: grid;

+    grid-template-columns: 100%;

+    grid-template-rows: 1fr 35px;

+}

+

+#pg-root-full {

+    width: 100%;

+    height: 100%;

+    padding: 0;

+    margin: 0;

+    overflow: hidden;

+    font-family: "acumin-pro-condensed";

+    font-weight: normal;    

+    display: grid;

+    grid-template-columns: 100%;

+    grid-template-rows: 100%;

+}

+

 #pg-split {

     width: 100%;

     height: 100%;

+ 7 - 0
Playground/src/scss/rendering.scss
ファイルの表示 

@@ -6,4 +6,11 @@
 
     overflow: unset;    

     border:none !important;

     outline:none !important;

+}

+

+#pg-root-frame, #pg-root-full {

+    #renderingCanvas {

+        grid-column: 1;

+        grid-row: 1;

+    }

 }