Update div3d.html

_includes/div3d.html

@@ -1,35 +1,86 @@
 <div class="card">
-        <div class="card-image" id="{{ include.id }}" style="height: 200px; width: 500px;">
-        </div>
+        <canvas class="card-image" id="{{ include.id }}" style="height: 200px; width: 500px;">
+        </canvas>
     <div class="card-content">
         <div class="content">
           {{ include.content }}
         </div>
     </div>
 </div>
 
-<script>
-  {{ include.id }}element = document.getElementById("{{ include.id }}")
-  scene{{ include.id }} = new THREE.Scene();
-  scene{{ include.id }}.background = new THREE.Color( 0x555555 );
-  renderer{{ include.id }} = new THREE.WebGLRenderer( { antialias: true } );
-  renderer{{ include.id }}.setSize(200,500);
-  renderer{{ include.id }}.setPixelRatio( window.devicePixelRatio ) 
-  {{ include.id }}element.appendChild( renderer{{ include.id }}.domElement );
-  const camera{{ include.id }} = new THREE.PerspectiveCamera( 60, 500/ 300, 0.01, 1000 );
-  camera{{ include.id }}.position.set( 0, 1, 5 )
-  const geometry{{ include.id }} = new THREE.BoxGeometry( 1, 1, 1 );
-  const material{{ include.id }} = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-  const cube{{ include.id }} = new THREE.Mesh( geometry{{ include.id }}, material{{ include.id }} );
-  scene{{ include.id }}.add( cube{{ include.id }} );
-
-  camera{{ include.id }}.position.z = 5;
-
-  function animate() {
-
-	  cube{{ include.id }}.rotation.x += 0.01;
-	  cube{{ include.id }}.rotation.y += 0.01;
-	  renderer{{ include.id }}.render( scene{{ include.id }}, camera{{ include.id }} );
-
-  }
-</script>
+
+<script src="https://cdn.babylonjs.com/babylon.js"></script>
+
+<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+
+<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
+
+
+
+    <!-- touch-action="none" for best results from PEP -->
+
+
+
+    <script>
+
+      const canvas{{ include.id }} = document.getElementById("{{ include.id }}"); // Get the canvas element
+
+      const engine{{ include.id }} = new BABYLON.Engine(canvas{{ include.id }}, true); // Generate the BABYLON 3D engine
+
+
+
+      // Add your code here matching the playground format
+
+
+      const canvas = document.getElementById("renderCanvas"); // Get the canvas element
+
+      const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D e
+
+      // Add your code here matching the playground format
+
+      const createScene = function () {
+
+        const scene = new BABYLON.Scene(engine);
+
+
+
+        BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");
+
+
+
+        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
+
+        camera.attachControl(canvas, true);
+
+        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
+
+
+
+        return scene;
+
+      };
+
+
+
+
+      // Register a render loop to repeatedly render the scene
+
+      engine{{ include.id }}.runRenderLoop(function () {
+
+        scene{{ include.id }}.render();
+
+      });
+
+
+
+      // Watch for browser/canvas resize events
+
+      window.addEventListener("resize", function () {
+
+        engine{{ include.id }}.resize();
+
+      });
+
+    </script>
+
+