enable3d-website/src/examples/jenga-game.html at master · Antonio-R1/enable3d-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!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>Jenga Game</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/phaser.min.js?ver=3.52.0"></script>
    <script src="/lib/enable3d/enable3d.phaserExtension.0.23.0.min.js"></script>
  </head>

  <body>
    <script>
      const { enable3d, Scene3D, Canvas, THREE } = ENABLE3D

      class MainScene extends Scene3D {
        constructor() {
          super({ key: 'MainScene' })
        }

        init() {
          this.accessThirdDimension({ gravity: { x: 0, y: -20, z: 0 } })
          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 }
        }

        async create() {
          // this.third.warpSpeed('-orbitControls')

          const { lights } = await this.third.warpSpeed('-orbitControls')

          const { hemisphereLight, ambientLight, directionalLight } = lights
          console.log(hemisphereLight.intensity, ambientLight.intensity, directionalLight.intensity)

          const intensity = 0.4
          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 addTower = () => {
            const material = this.third.add.material({ lambert: { color: 0xa04000 } })

            for (let i = 0; i < 12; i++) {
              if (i % 2 == 0) {
                blocks.push(
                  this.third.physics.add.box({ y: i * 0.85, z: -1.3, width: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, z: 0, width: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, z: 1.3, width: 4, height: 0.65 }, { custom: material })
                )
              } else {
                blocks.push(
                  this.third.physics.add.box({ y: i * 0.85, x: -1.3, depth: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, x: 0, depth: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, x: 1.3, depth: 4, height: 0.65 }, { custom: material })
                )
              }
            }
            blocks.forEach(block => {
              block.body.setFriction(0.8)
            })
          }
          addTower()

          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)
            }

            this.prev = { x, y }
          })

          this.input.on('pointerup', () => {
            this.selected?.body.setCollisionFlags(0)
            this.selected = null
          })
        }

        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() {
          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 += v3.x
            this.selected.position.y += v3.y
            this.selected.position.z += v3.z

            this.selected.body.needUpdate = true

            this.prev = { x, y }
          }
        }
      }

      const config = {
        type: Phaser.WEBGL,
        transparent: true,
        scale: {
          mode: Phaser.Scale.FIT,
          autoCenter: Phaser.Scale.CENTER_BOTH,
          width: window.innerWidth * Math.max(1, window.devicePixelRatio / 2),
          height: window.innerHeight * Math.max(1, window.devicePixelRatio / 2)
        },
        scene: [MainScene],
        ...Canvas()
      }

      window.addEventListener('load', () => {
        enable3d(() => new Phaser.Game(config)).withPhysics('/lib/ammo/kripken')
      })
    </script>
  </body>
</html>