diff --git a/src/assets/glb/shelf.glb b/src/assets/glb/shelf.glb
new file mode 100644
index 0000000..6d1b3ba
Binary files /dev/null and b/src/assets/glb/shelf.glb differ
diff --git a/src/assets/glb/shopping_cart.glb b/src/assets/glb/shopping_cart.glb
new file mode 100644
index 0000000..35562d7
Binary files /dev/null and b/src/assets/glb/shopping_cart.glb differ
diff --git a/src/assets/glb/shopping_cart2.glb b/src/assets/glb/shopping_cart2.glb
new file mode 100644
index 0000000..e1e7bb5
Binary files /dev/null and b/src/assets/glb/shopping_cart2.glb differ
diff --git a/src/assets/glb/shopping_cart3.glb b/src/assets/glb/shopping_cart3.glb
new file mode 100644
index 0000000..3638610
Binary files /dev/null and b/src/assets/glb/shopping_cart3.glb differ
diff --git a/src/assets/img/appletexture.jpg b/src/assets/img/appletexture.jpg
new file mode 100644
index 0000000..0b0a91b
Binary files /dev/null and b/src/assets/img/appletexture.jpg differ
diff --git a/src/assets/img/luckycharms.jpeg b/src/assets/img/luckycharms.jpeg
new file mode 100644
index 0000000..bbde7ed
Binary files /dev/null and b/src/assets/img/luckycharms.jpeg differ
diff --git a/src/assets/img/watermellontexture.jpg b/src/assets/img/watermellontexture.jpg
new file mode 100644
index 0000000..964274c
Binary files /dev/null and b/src/assets/img/watermellontexture.jpg differ
diff --git a/src/css/addtocart.css b/src/css/addtocart.css
new file mode 100644
index 0000000..70c17df
--- /dev/null
+++ b/src/css/addtocart.css
@@ -0,0 +1,15 @@
+.popup{
+    position: fixed;
+    top:100px;
+    left: 0px;
+    width:100vw;
+    height: 100vw;
+    background: rgba(0,0,0,0.7);
+    z-index: 1;
+}
+
+.popup .content {
+    position: absolute;
+    top: 50%;
+    left: 50%
+}
diff --git a/src/css/cart.css b/src/css/cart.css
new file mode 100644
index 0000000..74bcf8c
--- /dev/null
+++ b/src/css/cart.css
@@ -0,0 +1,92 @@
+body{
+    font-family:'Courier New', Courier, monospace;
+    margin: 0;
+}
+
+.container{
+    margin: auto;
+    text-align: center;
+    position: fixed;
+    left: 70%;
+    top: 5%;
+   
+    
+}
+
+.container h1{
+    left: 70%;
+    top: 0.5%;
+    position: fixed;
+
+}
+
+
+svg{
+    width: 30px;
+    left: 90%;
+    top:1.5%;
+    position: fixed;
+}
+
+
+
+header .icon-cart span{
+    display: flex;
+    width: 30px;
+    height: 30px;
+    background-color: red;
+    justify-content: center;
+    align-items: center;
+    color:#fff;
+    border-radius: 50%;
+    position: fixed;
+    top: 4%;
+    right: 2px;
+}
+
+.cartTab{
+    width: 300px;
+    background-color: #35343200;
+    color: #eee;
+    position: fixed;
+    inset: 0 0 0 auto;
+    left: 80%;
+
+}
+
+body .showCart .cartTab{
+    inset: 0 0 0 auto;
+}
+
+body.showCart
+
+.cartTab .listCart .item img{
+    width: 100%;
+}
+
+.cartTab .listCart .item{
+    align-items: center;
+}
+
+.listCart .quantity span{
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-color: #eee;
+    color: #555;
+    border-radius: 50%;
+}
+
+.listCart{
+    overflow: auto;
+}
+
+.listCart::-webkit-scrollbar{
+    width: 0;
+}
+
+
+
+
+
+
diff --git a/src/css/examples.css b/src/css/examples.css
index a4be4f4..27264b4 100644
--- a/src/css/examples.css
+++ b/src/css/examples.css
@@ -1,3 +1,6 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 * {
   margin: 0;
   padding: 0;
@@ -24,3 +27,72 @@ div#info-text {
 div#info-text p {
   margin-bottom: 16px;
 }
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+
+
+
+
+
+.btn{
+    padding: 10px 60px;
+    background: #fff;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    font-size: 22px;
+    font-weight: 500;
+    border-radius: 10px;
+    transition: transform 0.2s;
+}
+
+.btn:active{
+  transform: scale(0.95);
+}
+
+.popup{
+  width: 400px;
+  background: #fff;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.1);
+  text-align: center;
+  padding: 0 30px 60px;
+  color: #333;
+  visibility: hidden;
+  transition: all 0.4s ease-in-out;
+}
+
+.open-popup{
+  visibility: visible;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.popup img{
+  width: 100px;
+}
+
+.popup h2{
+  font-size: 38px;
+  font-weight: 500;
+  margin: 30px 0 10px;
+}
+
+.popup button{
+  width: 100%;
+  margin-top: 50px;
+  padding: 10px 0;
+  background-color: #e02189;
+  color: #fff;
+  border: 0;
+  outline: none;
+  font-size: 18px;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
+}
+
diff --git a/src/examples/3rd-person-camera.html b/src/examples/3rd-person-camera.html
index 7a393d9..8d888a4 100644
--- a/src/examples/3rd-person-camera.html
+++ b/src/examples/3rd-person-camera.html
@@ -7,16 +7,21 @@
       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>3rd Person Camera</title>
+    <link rel="stylesheet" href="/src/css/addtocart.css" />
     <link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
-    <script src="/js/examples.js?ver=1.1.1"></script>
+    <link rel="stylesheet" href="/css/cart.css?ver=1.0.0" />
+
     <script src="/lib/phaser.min.js?ver=3.52.0"></script>
     <script src="/lib/enable3d/enable3d.phaserExtension.0.25.2.min.js"></script>
+    <script src="/lib/OrbitControls.js"></script>
+    <script src="/lib/enable3d/enable3d.ammoPhysics.0.25.2.min.js"></script>
+    <script src="/src/js/cart.js"></script>
   </head>
 
   <body>
-    <div id="info-text">Use WASD, SPACE and your Mouse.<br />Works on mobile and desktop.</div>
     <script>
+      //let popup = document.getElementById("popup");
+      const flagg = 0;
       const {
         enable3d,
         Scene3D,
@@ -35,6 +40,9 @@
        */
       const isTouchDevice = 'ontouchstart' in window
 
+      
+     
+
       /**
        * MainScene
        */
@@ -43,43 +51,232 @@
           super({ key: 'MainScene' })
         }
 
+         
+
         preload() {
-          this.load.html('bridge', '/assets/svg/bridge.svg')
+          //this.load.html('shelf', '/assets/glb/shelf.glb')
         }
 
         init() {
-          this.accessThirdDimension()
+
+          
+          this.accessThirdDimension({ gravity: { x: 0, y: -20, z: 0 } })
+
+          this.third.load.preload('grass', '/assets/img/grass.jpg')
+          this.third.load.preload('side', '/assets/img/luckycharms.jpeg')
+          this.third.load.preload('top', '/assets/img/luckycharms.jpeg')
+          this.third.load.preload('bottom', '/assets/img/luckycharms.jpeg')
+
+          this.third.load.preload('watermellon', '/assets/img/appletexture.jpg')
+
+          // initialize physics
+
           this.canJump = true
           this.isJumping = false
           this.move = false
 
           this.moveTop = 0
           this.moveRight = 0
+
+          //jenga game
+          this.third.renderer.outputEncoding = THREE.LinearEncoding
+
+          this.selected = null
+          this.mousePosition = new THREE.Vector3()
+          this.blockOffset = new THREE.Vector3()
+          this.prev == { x: 0, y: 0 }
         }
 
-        create() {
+        async create() {
+
+          
+
+
+         
+          
+          const blueBox = this.third.physics.add.box(
+            { name: 'blueBox', x: 4, y: 0, z: 2, depth: 3 }
+          )
+        blueBox.body.setCollisionFlags(1)
+
+          blueBox.body.on.collision((otherObject, event) => {
+            if (otherObject.name !== 'ground') console.log(`blueBox and ${otherObject.name}: ${event}`)
+
+            if (otherObject.name == 'Man'){
+              console.log("Man")
+            }
+
+            
+          })
+
+
+
+
+          // Some "native" three.js code
+          const material1 = new THREE.MeshBasicMaterial({
+            map: new THREE.TextureLoader().load('/assets/img/watermellontexture.jpg')
+          })
+
+          const material2 = new THREE.MeshBasicMaterial({
+            map: new THREE.TextureLoader().load('/assets/img/appletexture.jpg')
+          })
+         
+
+
+
+          
+          //create texture watermellon
+          const watermellonTexture = await this.third.load.texture('watermellon')
+          // create the texture cube
+          const leftRight = await this.third.load.texture('side')
+          // if we clone a texture, we have to manually set needsUpdate to true
+          const backFront = leftRight.clone()
+          backFront.needsUpdate = true
+          const top = await this.third.load.texture('top')
+          const bottom = await this.third.load.texture('bottom')
+
+          const textureCube = this.third.misc.textureCube([leftRight, leftRight, top, bottom, backFront, backFront])
+
+          const textureWatermellon = this.third.misc.textureCube([
+            leftRight,
+            leftRight,
+            top,
+            bottom,
+            backFront,
+            backFront
+          ])
+
+          // textureCube.texture.front.repeat.set(4, 1)
+          // textureCube.texture.back.repeat.set(4, 1)
+
+          // textureCube.texture.left.repeat.set(1, 1)
+          // textureCube.texture.right.repeat.set(1, 1)
+
+          // add the texture cube's materials as a custom material
+          //this.third.physics.add.box({ width: 4 }, { custom: textureCube.materials })
+
+          const redBox = this.third.physics.add.box(
+            { name: 'redBox1', y: 0.5, z: 1, width: 2, height: 0.05, depth: 1 },
+            { lambert: { color: 0xff0000 } }
+          )
+          redBox.body.setFriction(10)
+          redBox.body.setCollisionFlags(2)
+          console.log(redBox.name)
+
+          //jenga game
+
+          const { lights } = await this.third.warpSpeed('-orbitControls')
+
+          const { hemisphereLight, ambientLight, directionalLight } = lights
+          console.log(hemisphereLight.intensity, ambientLight.intensity, directionalLight.intensity)
+
+          const intensity = 0.01
+          hemisphereLight.intensity = intensity
+          ambientLight.intensity = intensity
+          directionalLight.intensity = intensity
+
+          this.third.camera.position.set(-8, 8, 8)
+          this.third.camera.lookAt(0, 2, 0)
+
+          const blocks = []
+
+          const  openPopup = () => {
+        console.log('open button')
+
+        popup.classList.add('open-popup')
+
+      }
+
+ 
+
+          const addTower = () => {
+            const material = this.third.add.material({ lambert: { color: 0xa04000 } })
+
+            // for (let i = 0; i < 1; i++) {
+            //   if (i % 2 == 0) {
+            blocks.push(
+              this.third.physics.add.box(
+                { name: 'Honney Nut', y: 0.8, x: 0.5, z: 1, depth: 0.1, height: 0.5, width: 0.3 },
+                { custom: textureCube.materials }
+              )
+            )
+            // } else {
+            blocks.push(
+              // simple sphere
+              this.third.physics.add.sphere(
+                {id: '1', name: 'Watermellon', x: -0.5, y: 0.65, z: 1, radius: 0.1 },
+                { custom: material1 }
+              ),
+
+              this.third.physics.add.sphere(
+                {id: '1', name: 'Apple', x: -0.9, y: 0.65, z: 1, radius: 0.05 },
+                { custom: material2 }
+              ),
+              
+
+              this.third.physics.add.box(
+                { name: 'Apple Crumble', y: 0.8, x: 0, z: 1, depth: 0.1, height: 0.5, width: 0.3 },
+                { custom: textureCube.materials }
+              )
+            )
+            // }
+            // }
+
+            blocks.forEach(block => {
+              block.body.setFriction(0.8)
+              block.body.setCollisionFlags(2)
+              console.log(block.name)
+            })
+          }
+          addTower()
+          const cart = []
+          const raycaster = new THREE.Raycaster()
+
+          this.input.on('pointerdown', () => {
+            const { x, y } = this.getPointer()
+
+            raycaster.setFromCamera({ x, y }, this.third.camera)
+
+            const intersection = raycaster.intersectObjects(blocks)
+
+            if (intersection.length > 0) {
+              const block = intersection[0].object
+              this.selected = block
+              this.selected?.body.setCollisionFlags(2)
+
+              this.mousePosition.copy(intersection[0].point)
+              this.blockOffset.subVectors(this.selected.position, this.mousePosition)
+              document.getElementById('product').innerText = block.name + " X 1";
+              //document.getElementById('popup').innerHTML = "<img src=\"/assets/img/appletexture.jpg\" width=\"400px\" height=\"150px\">";
+              cart.push(block.name)
+              console.log(cart)
+
+              let items = document.getElementById('productlist')
+              for (let i = 0; i < 1; i++) {
+                let li = document.createElement('li')
+                li.innerText = cart.slice(-1)
+                items.appendChild(li)
+              }
+
+              openPopup()            
+            }
+
+            this.prev = { x, y }
+          })
+
+          this.input.on('pointerup', () => {
+            this.selected?.body.setCollisionFlags(0)
+            this.selected?.body.setGravity(0, -10, 0)
+
+            this.selected = null
+          })
+
           this.third.warpSpeed('camera', 'sky', 'grid', 'ground', 'light')
           // this.third.ground.body.setFriction(1)
 
-          // this.third.physics.debug.enable()
+          this.third.physics.debug.enable()
 
-          /**
-           * Create bridge
-           */
-          const svg = this.cache.html.get('bridge')
-          const bridgeShape = this.third.transform.fromSVGtoShape(svg)
-          const scale = 35
-          const bridge = this.third.add.extrude({
-            shape: bridgeShape[0],
-            depth: 120
-          })
-          bridge.scale.set(1 / scale, 1 / -scale, 1 / scale)
-          bridge.shape = 'concave'
-          bridge.position.setY(bridge.geometry.boundingBox.max.y / scale)
-          this.third.physics.add.existing(bridge)
-          bridge.body.setAngularFactor(0, 0, 0)
-          bridge.body.setLinearFactor(0, 0, 0)
-          bridge.body.setFriction(0.8)
+          //shelf
 
           /**
            * Create Player
@@ -152,6 +349,67 @@
             })
           })
 
+          this.third.load.gltf('/assets/glb/shopping_cart.glb').then(object => {
+            const cart = object.scene.children[0]
+
+            this.cart = new ExtendedObject3D()
+            this.cart.name = 'cart'
+            this.cart.rotateY(Math.PI + 0.1) // a hack
+            this.cart.add(cart)
+            // add shadow
+            this.cart.traverse(child => {
+              if (child.isMesh) {
+                child.shape = 'convexMesh'
+                child.castShadow = child.receiveShadow = true
+                // https://discourse.threejs.org/t/cant-export-material-from-blender-gltf/12258
+                child.material.roughness = 1
+                child.material.metalness = 0
+              }
+            })
+
+            /**
+             * Animations
+             */
+            this.third.animationMixers.add(this.cart.anims.mixer)
+            object.animations.forEach(animation => {
+              if (animation.name) {
+                /**
+                 * This is a hack, because I could not adjust the scale with this.man.scale.set()
+                 * This is not a bug from enable3d, this is how the assets a made :/
+                 */
+                animation.tracks.forEach(track => {
+                  if (/(scale|position)/.test(track.name)) {
+                    const newValues = track.values.map(v => v * 1)
+                    track.values = newValues
+                  }
+                })
+
+                this.cart.anims.add(animation.name, animation)
+              }
+            })
+            this.cart.anims.play('idle')
+            this.cart.position.set(0.5, 2, 8)
+
+            /**
+             * Add the player to the scene with a body
+             */
+            this.third.add.existing(this.cart)
+            this.third.physics.add.existing(this.cart, {
+              shape: 'concave',
+              offset: { y: 0 }
+            })
+            this.cart.body.setFriction(0.8)
+            this.cart.body.setAngularFactor(0, 0, 0)
+
+            /**
+             * Add 3rd Person Controls
+             */
+            this.controls = new ThirdPersonControls(this.third.camera, this.cart, {
+              offset: new THREE.Vector3(0, 1, 0),
+              targetRadius: 3
+            })
+          })
+
           /**
            * Add Keys
            */
@@ -167,10 +425,8 @@
            * PointerLock and PointerDrag
            */
           if (!isTouchDevice) {
-            const pointerLock = new PointerLock(this.game.canvas)
             const pointerDrag = new PointerDrag(this.game.canvas)
             pointerDrag.onMove(delta => {
-              if (!pointerLock.isLocked()) return
               const { x, y } = delta
               this.moveTop = -y
               this.moveRight = x
@@ -179,53 +435,63 @@
           /**
            * Add joystick
            */
-          if (isTouchDevice) {
-            const joystick = new JoyStick()
-            const axis = joystick.add.axis({
-              styles: { left: 35, bottom: 35, size: 100 }
-            })
-            axis.onMove(event => {
-              /**
-               * Update Camera
-               */
-              const { top, right } = event
-              this.moveTop = top * 3
-              this.moveRight = right * 3
-            })
-            const buttonA = joystick.add.button({
-              letter: 'A',
-              styles: { right: 35, bottom: 110, size: 80 }
-            })
-            buttonA.onClick(() => this.jump())
-            const buttonB = joystick.add.button({
-              letter: 'B',
-              styles: { right: 110, bottom: 35, size: 80 }
-            })
-            buttonB.onClick(() => (this.move = true))
-            buttonB.onRelease(() => (this.move = false))
-          }
-        }
 
-        jump() {
-          if (!this.man) return
-          this.canJump = false
-          this.isJumping = true
-          this.man.anims.play('jump_running')
-          this.time.addEvent({
-            delay: 750,
-            callback: () => (this.canJump = true)
+          const joystick = new JoyStick()
+          const axis = joystick.add.axis({
+            styles: { left: 150, bottom: 150, size: 100 }
           })
-          this.time.addEvent({
-            delay: 750,
-            callback: () => {
-              this.man.anims.play('idle')
-              this.isJumping = false
-            }
+          axis.onMove(event => {
+            /**
+             * Update Camera
+             */
+            const { top, right } = event
+            this.moveTop = top * 3
+            this.moveRight = right * 3
+          })
+
+          const buttonB = joystick.add.button({
+            letter: '',
+            styles: { right: 10, bottom: 35, size: 80 }
           })
-          this.man.body.applyForceY(4)
+          buttonB.onClick(() => (this.move = true))
+          buttonB.onRelease(() => (this.move = false))
+        }
+
+        getPointer() {
+          // calculate mouse position in normalized device coordinates
+          // (-1 to +1) for both components
+          const pointer = this.input.activePointer
+          const x = (pointer.x / this.cameras.main.width) * 2 - 1
+          const y = -(pointer.y / this.cameras.main.height) * 2 + 1
+          return { x, y }
         }
 
         update(time, delta) {
+          //jenga
+
+          
+
+          if (this.selected?.body.getCollisionFlags() === 2) {
+            const { x, y } = this.getPointer()
+
+            // const speed = 5
+            // const movementX = (x - this.prev.x) * speed
+            // const movementZ = (y - this.prev.y) * -speed
+
+            // // since the scene has a rotation of -Math.PI / 4,
+            // // we adjust the movement by -Math.PI / 4
+            // const v3 = new THREE.Vector3(movementX, 0, movementZ)
+            // v3.applyAxisAngle(new THREE.Vector3(0, 1, 0), -Math.PI / 4)
+            
+            this.selected.position.x = this.cart.position.x
+            this.selected.position.y = this.cart.position.y + 2
+            this.selected.position.z = this.cart.position.z
+
+            this.selected.body.needUpdate = true
+
+            //this.prev = { x, y }
+          }
+
           if (this.man && this.man.body && this.controls && this.controls.update) {
             /**
              * Update Controls
@@ -276,6 +542,57 @@
               this.jump()
             }
           }
+
+          if (this.cart && this.cart.body && this.controls && this.controls.update) {
+            /**
+             * Update Controls
+             */
+            this.controls.update(this.moveRight * 3, -this.moveTop * 3)
+            if (!isTouchDevice) this.moveRight = this.moveTop = 0
+            /**
+             * Player Turn
+             */
+            const speed = 4
+            const v3 = new THREE.Vector3()
+
+            const rotation = this.third.camera.getWorldDirection(v3)
+            const theta = Math.atan2(rotation.x, rotation.z)
+            const rotationcart = this.cart.getWorldDirection(v3)
+            const thetacart = Math.atan2(rotationcart.x, rotationcart.z)
+            this.cart.body.setAngularVelocityY(0)
+
+            const l = Math.abs(theta - thetacart)
+            let rotationSpeed = isTouchDevice ? 2 : 4
+            let d = Math.PI / 24
+
+            if (l > d) {
+              if (l > Math.PI - d) rotationSpeed *= -1
+              if (theta < thetacart) rotationSpeed *= -1
+              this.cart.body.setAngularVelocityY(rotationSpeed)
+            }
+
+            /**
+             * Player Move
+             */
+            if (this.keys.w.isDown || this.move) {
+              if (this.cart.anims.current === 'idle' && !this.isJumping) this.cart.anims.play('run')
+
+              const x = Math.sin(theta) * speed,
+                y = this.cart.body.velocity.y,
+                z = Math.cos(theta) * speed
+
+              this.cart.body.setVelocity(x, y, z)
+            } else {
+              if (this.cart.anims.current === 'run' && !this.isJumping) this.cart.anims.play('idle')
+            }
+
+            /**
+             * Player Jump
+             */
+            if (this.keys.space.isDown && this.canJump) {
+              this.jump()
+            }
+          }
         }
       }
 
@@ -295,6 +612,60 @@
       window.addEventListener('load', () => {
         enable3d(() => new Phaser.Game(config)).withPhysics('/lib/ammo/kripken')
       })
+
+     
+
+      function addToCart() {
+        console.log('Add to cart')
+
+        popup.classList.remove('open-popup')
+        //popup.classList.add('close-popup')
+
+        // this.selected.position.x = this.cart.position.x
+        //   this.selected.position.y = this.cart.position.y + 5
+        //   this.selected.position.z = this.cart.position.z
+      }
+
+      // const closeButton = document.querySelector('.close-btn')
+
+      //  closeButton.onClick = () => {
+      //   popup.classList.remove('open-popup')
+      // }
+
+      function togglePopup() {
+        document.getElementById('popup-1').classList.toggle('active')
+      }
+
+      
+    </script>
+
+<div class="container">
+  <div class="popup" id="popup">
+    <img id="productimage" src="/assets/img/luckycharms.jpeg" alt="">
+    <h2>Thank You!</h2>
+    <p id="product">Product</p>
+    <button type="button" onclick="closePopup()">OK</button>
+  </div>  
+
+
+    <div id="container" class="container">
+      <h1>Items</h1>
+      <ul id="productlist"></ul>
+      <button>Checkout</button>
+    </div>
+
+    <script>
+
+let popup = document.getElementById('popup')
+
+// function openPopup(){
+//   popup.classList.add('open-popup')
+// }
+
+function closePopup(){
+  popup.classList.remove('open-popup')
+   
+}
     </script>
   </body>
 </html>
diff --git a/src/examples/medieval-fantasy-book-standalone.html b/src/examples/medieval-fantasy-book-standalone.html
index 72b368c..812acbc 100644
--- a/src/examples/medieval-fantasy-book-standalone.html
+++ b/src/examples/medieval-fantasy-book-standalone.html
@@ -176,15 +176,7 @@
             /**
              * Add Pointer Lock and Pointer Drag
              */
-            if (!isTouchDevice) {
-              let pl = new PointerLock(this.canvas)
-              let pd = new PointerDrag(this.canvas)
-              pd.onMove(delta => {
-                if (pl.isLocked()) {
-                  this.controls.update(delta.x * 2, delta.y * 2)
-                }
-              })
-            }
+          
           }
 
           addBook()
@@ -223,7 +215,7 @@
           /**
            * Add joystick
            */
-          if (isTouchDevice) {
+          
             const joystick = new JoyStick()
             const axis = joystick.add.axis({
               styles: { left: 35, bottom: 35, size: 100 }
@@ -247,7 +239,7 @@
             })
             buttonB.onClick(() => (this.move = true))
             buttonB.onRelease(() => (this.move = false))
-          }
+          
 
           setTimeout(() => {
             const placeholder = document.getElementById('welcome-game-placeholder')
diff --git a/src/examples/use-native-three-code.html b/src/examples/use-native-three-code.html
index 01d4d4e..3de73c7 100644
--- a/src/examples/use-native-three-code.html
+++ b/src/examples/use-native-three-code.html
@@ -12,6 +12,11 @@
     <script src="/js/examples.js?ver=1.1.1"></script>
     <script src="/lib/phaser.min.js?ver=3.52.0"></script>
     <script src="/lib/enable3d/enable3d.phaserExtension.0.25.2.min.js"></script>
+
+    <script src="/lib/phaser.min.js?ver=3.52.0"></script>
+    <script src="/lib/enable3d/enable3d.phaserExtension.0.25.2.min.js"></script>
+    <script src="/lib/OrbitControls.js"></script>
+    <script src="/lib/enable3d/enable3d.ammoPhysics.0.25.2.min.js"></script>
   </head>
 
   <body>
diff --git a/src/js/cart.js b/src/js/cart.js
new file mode 100644
index 0000000..b28b04f
--- /dev/null
+++ b/src/js/cart.js
@@ -0,0 +1,3 @@
+
+
+