Added compound hacd shape example

Author: yandeu

src/assets/glb/Tank.glb

@@ -60,11 +60,9 @@ <h3>As Physics Extension for three.js</h3>
           <li><a href="./examples/point-to-point-constraint.html">Point to Point Constraint</a></li>
           <li><a href="./examples/hollow-cylinder.html">Hollow Cylinder</a></li>
           <li><a href="./examples/convex-objects-breaking.html">Convex Objects Breaking</a></li>
-          <li><a href="./examples/carousel.html">Carousel NEW</a></li>
+          <li><a href="./examples/carousel.html">Carousel</a></li>
           <li>
-            <a href="./examples/create-and-destroy-objects-and-physics.html"
-              >Create and Destroy Objects and Physics NEW</a
-            >
+            <a href="./examples/create-and-destroy-objects-and-physics.html">Create and Destroy Objects and Physics</a>
           </li>
         </ul>
 
@@ -79,9 +77,10 @@ <h3>Standalone Mode</h3>
           <li><a href="./examples/use-tweenjs.html">Use tween.js</a></li>
           <li><a href="./examples/project-options-and-multiple-scenes.html">Project Options and Multiple Scenes</a></li>
           <li><a href="./examples/gltf-loader-and-animations.html">GLTF Loader and Animations</a></li>
-          <li><a href="./examples/simplify-physics-mesh.html">Simplify Physics Mesh NEW</a></li>
+          <li><a href="./examples/simplify-physics-mesh.html">Simplify Physics Mesh</a></li>
+          <li><a href="./examples/standalone/compound-hacd-shape.html">Compound HACD Shape (Tank) NEW</a></li>
           <li><a href="./examples/types-of-constraints.html">Types of Constraints</a></li>
-          <li><a href="./examples/slider-constraints.html">Slider Constraints NEW</a></li>
+          <li><a href="./examples/slider-constraints.html">Slider Constraints</a></li>
           <li><a href="./examples/play-with-physics-bodies.html">Play with Physics Bodies</a></li>
           <li><a href="./examples/teleport-a-dynamic-body.html">Teleport a Dynamic Body</a></li>
           <li><a href="./examples/per-body-gravity.html">Per Body Gravity</a></li>
@@ -97,15 +96,15 @@ <h3>Standalone Mode</h3>
           <li><a href="./examples/post-processing.html">Post-Processing</a></li>
           <li><a href="./examples/collisiongroup-and-collisionmask.html">CollisionGroup and CollisionMask</a></li>
           <li><a href="./examples/softbody-cloth.html">SoftBody Cloth</a></li>
-          <li><a href="./examples/raycast-vehicle.html">Car (Raycast Vehicle) NEW</a></li>
+          <li><a href="./examples/raycast-vehicle.html">Car (Raycast Vehicle)</a></li>
           <li><a href="./examples/car-using-physics-constraints.html">Car (Physics Constraints)</a></li>
-          <li><a href="./examples/standalone/pick-up-objects.html">Pick up Objects (with Robot Hand) NEW</a></li>
+          <li><a href="./examples/standalone/pick-up-objects.html">Pick up Objects (with Robot Hand)</a></li>
 
           <h3 id="2d-elements" style="font-style: italic; line-height: 0; padding-top: 24px">
             2D Elements (Experimental)
           </h3>
           <p>
-            These 2D elements are new and still in development.<br />
+            These 2D elements are and still in development.<br />
             They are rendered by three.js and<br />
             do not need any other 3rd party framework<br />
             like Phaser, PixiJS or Two.js.
@@ -138,7 +137,7 @@ <h3>As 3D Extension for Phaser</h3>
           <li><a href="./examples/load-and-use-textures.html">Load and Use Textures</a></li>
           <li>
             <a href="./examples/phaser-gltf-loader-with-animation-speed.html"
-              >GLTF Loader and Animations with Timescale (Drone) NEW</a
+              >GLTF Loader and Animations with Timescale (Drone)</a
             >
           </li>
           <li><a href="./examples/fbx-loader-and-animations.html">FBX Loader and Animations</a></li>
@@ -187,7 +186,7 @@ <h3>As 3D Extension for Phaser</h3>
         </ul>
       </div>
       <script>
-        // highlight all new examples
+        // highlight all examples
         const links = document.querySelectorAll('a')
         const makeBadge = (tag, color, background) => {
           return `<b style="background-color: ${background}; color:${color}; border-radius: 4px; padding: 2px 8px; font-size: 10px; position: relative; top: -2px;">${tag}</b>`

src/examples.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Compound HACD Shape</title>
+    <link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
+    <script src="/js/examples.js?ver=1.1.1"></script>
+    <script src="/lib/enable3d/enable3d.framework.0.25.4.min.js"></script>
+  </head>
+
+  <body>
+    <div id="info-text">This Tank consists of 4 HACD Shapes.</div>
+    <script>
+      const { Project, Scene3D, PhysicsLoader, ExtendedObject3D, THREE } = ENABLE3D
+
+      class MainScene extends Scene3D {
+        async create() {
+          this.physics.debug?.enable()
+
+          const { orbitControls } = await this.warpSpeed()
+          this.camera.position.set(3, 3, 6)
+          orbitControls?.target.set(0, 1, 0)
+          this.camera.lookAt(0, 1, 0)
+
+          this.load.gltf('/assets/glb/Tank.glb').then(gltf => {
+            const parts = []
+            gltf.scene.traverse(child => {
+              if (child.isMesh) {
+                parts.push(child)
+              }
+            })
+
+            const tank = new THREE.Group()
+            parts.forEach(p => {
+              tank.add(p)
+            })
+
+            tank.scale.set(100, 100, 100)
+            tank.rotateX(-Math.PI / 2)
+            tank.position.set(0, 2, 0)
+
+            const compoundShape = new Ammo.btCompoundShape()
+            parts.forEach((part, i) => {
+              // get the center of the shape, to set its offset
+              part.geometry.computeBoundingBox()
+              const bb = part.geometry.boundingBox
+              const center = bb.getCenter(new THREE.Vector3())
+
+              let collisionShape = this.physics.createCollisionShape('hacd', {}, part)
+
+              // adjust center of shape
+              const transform = new Ammo.btTransform()
+              transform.setIdentity()
+              transform.setOrigin(new Ammo.btVector3(center.x, center.y, center.z))
+
+              compoundShape.addChildShape(transform, collisionShape)
+            })
+
+            {
+              const pos = new THREE.Vector3()
+              const quat = new THREE.Quaternion()
+              const scale = new THREE.Vector3()
+              tank.getWorldPosition(pos)
+              tank.getWorldQuaternion(quat)
+              tank.getWorldScale(scale)
+
+              const localTransform = this.physics.applyPosQuatScaleMargin(compoundShape, pos, quat, scale, 0.01)
+              const rigidBody = this.physics.collisionShapeToRigidBody(compoundShape, localTransform, 1, false)
+
+              this.add.existing(tank)
+              this.physics.addRigidBodyToWorld(tank, rigidBody, 0, 1, -1)
+            }
+          })
+        }
+      }
+
+      PhysicsLoader('/lib/ammo/moz', () => new Project({ scenes: [MainScene] }))
+    </script>
+  </body>
+</html>