- gltfComplex

redcamel · Sep 8, 2021 · 7aeb1f7 · 7aeb1f7
1 parent cb40c56
commit 7aeb1f7
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -117,6 +117,7 @@ <h3>Light</h3>
 <ul>
     <h3>Loader</h3>
     <li><a href="loader/gltf/index.html">GLTFLoader</a></li>
+    <li><a href="loader/gltfComplex/index.html">gltfComplex</a></li>
     <li>TODO - TextureLoader</li>
 </ul>
 

diff --git a/examples/loader/gltfComplex/index.html b/examples/loader/gltfComplex/index.html
@@ -0,0 +1,28 @@
+<!--
+  ~   RedGPU - MIT License
+  ~   Copyright (c) 2019 ~ By RedCamel( [email protected] )
+  ~   issue : https://github.com/redcamel/RedGPU/issues
+  ~   Last modification time of this file - 2020.2.28 21:0:29
+  ~
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!--    <meta http-equiv="origin-trial" content="Av8p1XDn4MJrHBWH2+3DBTesuifH4sVVd0gUC9bwcAFox8ApE4RYzaR5+N1ifWM/U1U92d2b4tXJzhAxdWV+uQ8AAABleyJvcmlnaW4iOiJodHRwczovL3JlZGNhbWVsLmdpdGh1Yi5pbzo0NDMiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">-->
+
+    <title>RedGPU Example - GLTFLoader</title>
+    <meta name="keywords" content="RedGPU, WebGPU, Example, Demo">
+    <link type="text/css" rel="stylesheet" href="../../css.css"/>
+    <script src="../../exampleHelper/checkWebGPU.js"></script>
+</head>
+<body>
+<script>
+    CheckWebGPU.checkWebGPU(
+        'GLTFLoader Complex',
+        'RedGPU GLTFLoader Example'
+    )
+</script>
+</body>
+</html>
diff --git a/examples/loader/gltfComplex/index.js b/examples/loader/gltfComplex/index.js
@@ -0,0 +1,88 @@
+/*
+ *   RedGPU - MIT License
+ *   Copyright (c) 2019 ~ By RedCamel( [email protected] )
+ *   issue : https://github.com/redcamel/RedGPU/issues
+ *   Last modification time of this file - 2020.2.28 21:0:29
+ *
+ */
+"use strict"
+import RedGPU from "../../../dist/RedGPU.min.mjs";
+
+const cvs = document.createElement('canvas');
+document.body.appendChild(cvs);
+new RedGPU.RedGPUContext(
+    cvs,
+    function () {
+        let tView, tScene, tCamera, tLight;
+        let renderer, render;
+        let testCubeTexture;
+        ///////////////////////////////////////////////////////////////////////////////////////////
+        // basic setup
+        tScene = new RedGPU.Scene();
+        testCubeTexture = new RedGPU.BitmapCubeTexture(
+            this,
+            [
+                '../../../assets/cubemap/SwedishRoyalCastle/px.jpg',
+                '../../../assets/cubemap/SwedishRoyalCastle/nx.jpg',
+                '../../../assets/cubemap/SwedishRoyalCastle/py.jpg',
+                '../../../assets/cubemap/SwedishRoyalCastle/ny.jpg',
+                '../../../assets/cubemap/SwedishRoyalCastle/pz.jpg',
+                '../../../assets/cubemap/SwedishRoyalCastle/nz.jpg'
+            ]
+        )
+        tScene.skyBox = new RedGPU.SkyBox(
+            this, testCubeTexture
+        );
+        tCamera = new RedGPU.ObitController(this);
+        tCamera.tilt = 0;
+        tLight = new RedGPU.DirectionalLight(this)
+        tLight.x = 2
+        tLight.y = 3
+        tLight.z = 3
+        tScene.addLight(tLight)
+        //
+        tLight = new RedGPU.DirectionalLight(this)
+        tLight.x = -2
+        tLight.y = 3
+        tLight.z = -3
+        tScene.addLight(tLight)
+        tView = new RedGPU.View(this, tScene, tCamera);
+        this.addView(tView);
+            {
+                    let setGLTF = (path, fileName) => {
+                            let tGLTF = null;
+                            tGLTF = new RedGPU.GLTFLoader(
+                              this, // redGPUContext
+                              path, // assetRootPath
+                              fileName, // fileName
+                              function (v) { // callBack
+                                      console.log('Load Complete.', v);
+                              },
+                              // tCubeTexture
+                            );
+
+                            return tGLTF;
+                    };
+                    let t0 = setGLTF(
+                      'https://redcamel.github.io/RedGL-Examples-test/asset/glTF/tokyo/',
+                      'scene.gltf'
+                    );
+                    console.log(t0);
+
+                    t0 = t0['resultMesh'];
+                    t0.scaleX = t0.scaleY = t0.scaleZ = 0.01;
+                    // t0.x = -5;
+                    tScene.addChild(t0);
+            }
+        // renderer setup
+        renderer = new RedGPU.Render();
+        render = time => {
+            renderer.render(time, this);
+            requestAnimationFrame(render);
+        };
+        requestAnimationFrame(render);
+        // TestUI setup
+        // ExampleHelper.setTestUI_GLTFLoader(RedGPU, this,tView,tScene,tCamera ,true);
+        ExampleHelper.setTestUI_Debugger(RedGPU);
+    }
+);