enable3d-website/src/examples/physics-raycaster.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
<!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>Physics Raycaster</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.23.0.min.js"></script>
  </head>

  <body>
    <div id="info-text">
      A Raycaster for all Physical Bodies. Check the Console to see the Results of the Raycaster.
    </div>
    <script>
      const { Project, Scene3D, PhysicsLoader, THREE } = ENABLE3D

      class MainScene extends Scene3D {
        create() {
          this.warpSpeed('-ground')

          // draw the line
          const material = new THREE.LineBasicMaterial({ color: 0x0000ff })
          const geometry = new THREE.BufferGeometry().setFromPoints([
            new THREE.Vector3(-2, 5, 2),
            new THREE.Vector3(2, -10, 0)
          ])
          const line = new THREE.Line(geometry, material)
          this.scene.add(line)

          // add 3 ground
          this.physics.add.ground({ y: 2, width: 4, height: 4, name: 'ground-1' })
          this.physics.add.ground({ y: -1, width: 4, height: 4, name: 'ground-2' })
          this.physics.add.ground({ y: -4, width: 4, height: 4, name: 'ground-3' })

          // check closest raycaster
          const closest = () => {
            const raycaster = this.physics.add.raycaster('closest') // 'closest' is the default

            raycaster.setRayFromWorld(-2, 5, 2)
            raycaster.setRayToWorld(2, -10, 0)
            raycaster.rayTest()

            if (raycaster.hasHit()) {
              const { x, y, z } = raycaster.getHitPointWorld()
              const { name } = raycaster.getCollisionObject()
              console.log('closest:', `${name}:`, `x:${x.toFixed(2)}`, `y:${x.toFixed(2)}`, `z:${x.toFixed(2)}`)
            }

            // destroy the raycaster if you do not use it anymore
            // (but you can of course reuse it multiple times)
            raycaster.destroy()
          }

          // check allHits raycaster
          const allHits = () => {
            const raycaster = this.physics.add.raycaster('allHits')

            raycaster.setRayFromWorld(-2, 5, 2)
            raycaster.setRayToWorld(2, -10, 0)
            raycaster.rayTest()

            if (raycaster.hasHit()) {
              raycaster.getCollisionObjects().forEach((obj, i) => {
                const { x, y, z } = raycaster.getHitPointWorld()[i]
                const { name } = obj
                console.log('allHits: ', `${name}:`, `x:${x.toFixed(2)}`, `y:${x.toFixed(2)}`, `z:${x.toFixed(2)}`)
              })
            }

            // destroy the raycaster if you do not use it anymore
            // (but you can of course reuse it multiple times)
            raycaster.destroy()
          }

          console.log('-- CLOSEST --')
          closest()
          console.log('-- ALL HITS --')
          allHits()
        }
      }
      PhysicsLoader('/lib/ammo/kripken', () => new Project({ scenes: [MainScene] }))
    </script>
  </body>
</html>