🚗 Car 로 복습

1. 클래스 속성 & 생성자 함수

class Car {
    dynamicBodies: [THREE.Object3D, RAPIER.RigidBody][] = []

    constructor() {}
        

속성

dynamicBodies
THREE.Mesh 와 Rapier.RigidBody 를 쌍으로 저장하는 2차원 배열.
THREE.Mesh 의 position 와 quaternion 을 물리 엔진의 데이터( translation 과 rotation ) 와 동기화하는 데 사용된다.
quaternion : 3D 공간에서 어떻게 회전했는지를 표현하는 속성값.

생성자 함수

Car 객체는 glTF 로더로 불러오기 때문에 용량이 크면 사용자에게 불편함을 줄 수 있어 async 로 로드할 것이다.
이는 생성자에서 호출하면 async 가 먹히지 않으므로 비워준다.

2. loadCar()

실질적으로 Car 객체를 생성하는 생성자 함수 역할을 하는 함수

Mesh

    async loadCar(scene: THREE.Scene, position: [number, number, number]) {
        await new GLTFLoader().loadAsync('models/sedanSports.glb').then((gltf) => {
            const carMesh = gltf.scene.getObjectByName('body') as THREE.Group
            carMesh.position.set(0, 0, 0)
            carMesh.traverse((o) => {
                o.castShadow = true
            })

            const wheelBLMesh = gltf.scene.getObjectByName('wheel_backLeft') as THREE.Group
            const wheelBRMesh = gltf.scene.getObjectByName('wheel_backRight') as THREE.Group
            const wheelFLMesh = gltf.scene.getObjectByName('wheel_frontLeft') as THREE.Group
            const wheelFRMesh = gltf.scene.getObjectByName('wheel_frontRight') as THREE.Group
            wheelBLMesh.position.set(0, 0, 0)
            wheelBRMesh.position.set(0, 0, 0)
            wheelFLMesh.position.set(0, 0, 0)
            wheelFRMesh.position.set(0, 0, 0)

            //scene.add(gltf.scene)
            scene.add(carMesh, wheelBLMesh, wheelBRMesh, wheelFLMesh, wheelFRMesh)

모델 로드 후 THREE.Scene 에 추가

RigidBody

            const carBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(...position)
                    .setCanSleep(false)
            )
            const wheelBLBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(-1 + position[0], 1 + position[1], 1 + position[2])
                    .setCanSleep(false)
            )
            const wheelBRBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(1 + position[0], 1 + position[1], 1 + position[2])
                    .setCanSleep(false)
            )
            const wheelFLBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(-1 + position[0], 1 + position[1], -1 + position[2])
                    .setCanSleep(false)
            )
            const wheelFRBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(1 + position[0], 1 + position[1], -1 + position[2])
                    .setCanSleep(false)
            )

자동차 본체와 바퀴 각각에 대해 RigidBody 를 생성
.setTranslation() 에서 position 을 귀찮게 하드코딩 하지 않은 이유는 Car 객체를 또 하나 생성할 때 같은 위치에 바퀴가 생기면서 물리엔진의 충돌을 일으켜 예기치 못한 결과를 받을 수 있기 때문이다.

maxrix 설정

            const v = new THREE.Vector3()
            let positions: number[] = []
            // 1. 월드 매트릭스가 최신 상태인지 확인
            carMesh.updateMatrixWorld(true) 
            carMesh.traverse((o) => {
                if (o.type === 'Mesh') {
                    const positionAttribute = (o as THREE.Mesh).geometry.getAttribute('position')
                    for (let i = 0, l = positionAttribute.count; i < l; i++) {
                        v.fromBufferAttribute(positionAttribute, i)
                      	// 2. 로컬 좌표를 world 좌표로 변환
                        v.applyMatrix4((o.parent as THREE.Object3D).matrixWorld)
                        positions.push(...v)
                    }
                }
            })

carMesh 그룹에 속한 모든 THREE.Mesh 에 대해 convexhull 을 생성

만약 위 코드에서 1번을 넣지 않는다면 다음과 같은 현상이 나타난다. 따라서 Mesh 와 RigidBody 를 보이는 대로 정확히 일치키려면 world 를 최신화하여 carMesh 에 적용해야한다.

만약 위 코드에서 2번을 넣지 않는다면 다음과 같은 현상이 나타난다. object3D 에서 포스팅한 Hierarchy 를 적용한 local 좌표를 wolrd 좌표로 가져옴. 그래서 블랜더에 body 에 child 로 들어있는 spoiler 도 가져올 수 있게 되는 거임.

updateMatrixWorld() 는 메시의 월드 매트릭스를 업데이트하여, 부모 객체의 변환(위치, 회전, 크기 등)을 반영하도록 한다. true 인자는 모든 자식 객체도 함께 업데이트하도록 한다.

geometry.getAttribute('position') 메소드를 통해 해당 메시의 정점 위치 속성을 가져온다.
이 속성은 정점의 위치 정보를 담고 있는 BufferAttribute 객체이다.

for (let i = 0, l = positionAttribute.count; i < l; i++) 각 정점에 대해 반복문을 실행하며:
fromBufferAttribute(positionAttribute, i) 를 사용하여 인덱스 i 에 해당하는 정점의 위치를 벡터 v 에 로드
applyMatrix4((o.parent as Object3D).matrixWorld) 를 통해 부모 객체의 월드 매트릭스를 적용하여 정점의 월드 좌표를 계산
최종적으로 계산된 위치를 positions 배열에 추가

convexhull 생성

            const carShape = (RAPIER.ColliderDesc.convexHull(new Float32Array(positions)) as RAPIER.ColliderDesc).setMass(1).setRestitution(0.5)

            const wheelBLShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), -Math.PI / 2))
                .setTranslation(-0.2, 0, 0)
                .setRestitution(0.5)
            const wheelBRShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2))
                .setTranslation(0.2, 0, 0)
                .setRestitution(0.5)
            const wheelFLShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2))
                .setTranslation(-0.2, 0, 0)
                .setRestitution(0.5)
            const wheelFRShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2))
                .setTranslation(0.2, 0, 0)
                .setRestitution(0.5)

만약 setRotation(), setTranslation() 을 실행하지 않으면 다음과 같은 결과가 나온다. 따라서 자동차의 body 와 바퀴의 convexHull 를 생성 후 THREE.Mesh 와 일치 작업을 해줘야한다.

collider 생성 및 연결

            world.createCollider(carShape, carBody)
            world.createCollider(wheelBLShape, wheelBLBody)
            world.createCollider(wheelBRShape, wheelBRBody)
            world.createCollider(wheelFLShape, wheelFLBody)
            world.createCollider(wheelFRShape, wheelFRBody)

자동차 본체와 각 바퀴에 생성된 충돌체를 연결하여 물리 시뮬레이션을 처리.

관절(Joints) 생성

            // attach wheels to car using Rapier revolute joints
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(-0.55, 0, 0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(-1, 0, 0)),
                carBody,
                wheelBLBody,
                true
            )
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(0.55, 0, 0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(1, 0, 0)),
                carBody,
                wheelBRBody,
                true
            )
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(-0.55, 0, -0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(-1, 0, 0)),
                carBody,
                wheelFLBody,
                true
            )
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(0.55, 0, -0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(1, 0, 0)),
                carBody,
                wheelFRBody,
                true
            )

자동차 본체와 바퀴를 Revolute Joint(회전 관절) 로 연결. revolute Joint 는 axis 를 단 한개만 갖을 수 있다. 따라서 선풍기나 바퀴에 적합한 관절이다.

바퀴는 회전만 가능하도록 설정하며, 위치와 회전축을 정확히 지정.

revolute() 의 첫째 인수는 본체로부터 위치를 지정하고

revolute() 의 둘째 인수는 지정된 조인트 지점으로부터 위치를 지정한다.

revolute() 의 세번째 인수는 지정된 조인트 지점으로부터 거리를 지정한다.

dynamicBodies 업데이트

            // update local dynamicBodies so mesh positions and quaternions are updated with the physics world info
            this.dynamicBodies.push([carMesh, carBody])
            this.dynamicBodies.push([wheelBLMesh, wheelBLBody])
            this.dynamicBodies.push([wheelBRMesh, wheelBRBody])
            this.dynamicBodies.push([wheelFLMesh, wheelFLBody])
            this.dynamicBodies.push([wheelFRMesh, wheelFRBody])
        })
    }

3. update()

    update() {
        for (let i = 0, n = this.dynamicBodies.length; i < n; i++) {
            this.dynamicBodies[i][0].position.copy(this.dynamicBodies[i][1].translation())
            this.dynamicBodies[i][0].quaternion.copy(this.dynamicBodies[i][1].rotation())
        }
    }
}

이때 animation 함수에서 update 를 실행해주지 않는다면 실제 RigidBody 는 업데이트 되고 있지만 THREE.Mesh 는 시각적으로 멈춰있기 때문에 다음과 같은 현상이 나타난다.

---

💻 Car code (feat. Rapier)

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'
import Stats from 'three/addons/libs/stats.module.js'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
import RAPIER from '@dimforge/rapier3d-compat'

class RapierDebugRenderer {
    mesh
    world
    enabled = true

    constructor(scene: THREE.Scene, world: RAPIER.World) {
        this.world = world
        this.mesh = new THREE.LineSegments(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: 0xffffff, vertexColors: true }))
        this.mesh.frustumCulled = false
        scene.add(this.mesh)
    }

    update() {
        if (this.enabled) {
            const { vertices, colors } = this.world.debugRender()
            this.mesh.geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
            this.mesh.geometry.setAttribute('color', new THREE.BufferAttribute(colors, 4))
            this.mesh.visible = true
        } else {
            this.mesh.visible = false
        }
    }
}

class Car {
    dynamicBodies: [THREE.Object3D, RAPIER.RigidBody][] = []

    constructor() {
        // now calling `loadCar` outside of constructor, since async await won't wait if called in a constructor.
    }

    async loadCar(scene: THREE.Scene, position: [number, number, number]) {
        await new GLTFLoader().loadAsync('models/sedanSports.glb').then((gltf) => {
            const carMesh = gltf.scene.getObjectByName('body') as THREE.Group
            carMesh.position.set(0, 0, 0)
            carMesh.traverse((o) => {
                o.castShadow = true
            })

            const wheelBLMesh = gltf.scene.getObjectByName('wheel_backLeft') as THREE.Group
            const wheelBRMesh = gltf.scene.getObjectByName('wheel_backRight') as THREE.Group
            const wheelFLMesh = gltf.scene.getObjectByName('wheel_frontLeft') as THREE.Group
            const wheelFRMesh = gltf.scene.getObjectByName('wheel_frontRight') as THREE.Group
            wheelBLMesh.position.set(0, 0, 0)
            wheelBRMesh.position.set(0, 0, 0)
            wheelFLMesh.position.set(0, 0, 0)
            wheelFRMesh.position.set(0, 0, 0)

            //scene.add(gltf.scene)
            scene.add(carMesh, wheelBLMesh, wheelBRMesh, wheelFLMesh, wheelFRMesh)

            const carBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(...position)
                    .setCanSleep(false)
            )
            const wheelBLBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(-1 + position[0], 1 + position[1], 1 + position[2])
                    .setCanSleep(false)
            )
            const wheelBRBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(1 + position[0], 1 + position[1], 1 + position[2])
                    .setCanSleep(false)
            )
            const wheelFLBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(-1 + position[0], 1 + position[1], -1 + position[2])
                    .setCanSleep(false)
            )
            const wheelFRBody = world.createRigidBody(
                RAPIER.RigidBodyDesc.dynamic()
                    .setTranslation(1 + position[0], 1 + position[1], -1 + position[2])
                    .setCanSleep(false)
            )

            // create a convexhull from all meshes in the carMesh group
            const v = new THREE.Vector3()
            let positions: number[] = []
            carMesh.updateMatrixWorld(true) // ensure world matrix is up to date
            carMesh.traverse((o) => {
                if (o.type === 'Mesh') {
                    const positionAttribute = (o as THREE.Mesh).geometry.getAttribute('position')
                    for (let i = 0, l = positionAttribute.count; i < l; i++) {
                        v.fromBufferAttribute(positionAttribute, i)
                        v.applyMatrix4((o.parent as THREE.Object3D).matrixWorld)
                        positions.push(...v)
                    }
                }
            })

            // create shapes for carBody and wheelBodies
            const carShape = (RAPIER.ColliderDesc.convexHull(new Float32Array(positions)) as RAPIER.ColliderDesc).setMass(1).setRestitution(0.5)
            const wheelBLShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), -Math.PI / 2))
                .setTranslation(-0.2, 0, 0)
                .setRestitution(0.5)
            const wheelBRShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2))
                .setTranslation(0.2, 0, 0)
                .setRestitution(0.5)
            const wheelFLShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2))
                .setTranslation(-0.2, 0, 0)
                .setRestitution(0.5)
            const wheelFRShape = RAPIER.ColliderDesc.cylinder(0.1, 0.3)
                .setRotation(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2))
                .setTranslation(0.2, 0, 0)
                .setRestitution(0.5)

            // create world collider
            world.createCollider(carShape, carBody)
            world.createCollider(wheelBLShape, wheelBLBody)
            world.createCollider(wheelBRShape, wheelBRBody)
            world.createCollider(wheelFLShape, wheelFLBody)
            world.createCollider(wheelFRShape, wheelFRBody)

            // attach wheels to car using Rapier revolute joints
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(-0.55, 0, 0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(-1, 0, 0)),
                carBody,
                wheelBLBody,
                true
            )
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(0.55, 0, 0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(1, 0, 0)),
                carBody,
                wheelBRBody,
                true
            )
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(-0.55, 0, -0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(-1, 0, 0)),
                carBody,
                wheelFLBody,
                true
            )
            world.createImpulseJoint(
                RAPIER.JointData.revolute(new RAPIER.Vector3(0.55, 0, -0.63), new RAPIER.Vector3(0, 0, 0), new RAPIER.Vector3(1, 0, 0)),
                carBody,
                wheelFRBody,
                true
            )

            // update local dynamicBodies so mesh positions and quaternions are updated with the physics world info
            this.dynamicBodies.push([carMesh, carBody])
            this.dynamicBodies.push([wheelBLMesh, wheelBLBody])
            this.dynamicBodies.push([wheelBRMesh, wheelBRBody])
            this.dynamicBodies.push([wheelFLMesh, wheelFLBody])
            this.dynamicBodies.push([wheelFRMesh, wheelFRBody])
        })
    }

    update() {
        for (let i = 0, n = this.dynamicBodies.length; i < n; i++) {
            this.dynamicBodies[i][0].position.copy(this.dynamicBodies[i][1].translation())
            this.dynamicBodies[i][0].quaternion.copy(this.dynamicBodies[i][1].rotation())
        }
    }
}

await RAPIER.init() // This line is only needed if using the compat version
const gravity = new RAPIER.Vector3(0.0, -9.81, 0.0)
const world = new RAPIER.World(gravity)
const dynamicBodies: [THREE.Object3D, RAPIER.RigidBody][] = []

const scene = new THREE.Scene()

const rapierDebugRenderer = new RapierDebugRenderer(scene, world)

const light1 = new THREE.SpotLight(undefined, Math.PI * 10)
light1.position.set(2.5, 5, 5)
light1.angle = Math.PI / 1.8
light1.penumbra = 0.5
light1.castShadow = true
light1.shadow.blurSamples = 10
light1.shadow.radius = 5
scene.add(light1)

const light2 = light1.clone()
light2.position.set(-2.5, 5, 5)
scene.add(light2)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(0, 2, 5)

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.VSMShadowMap
document.body.appendChild(renderer.domElement)

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.y = 1

// Cuboid Collider
const cubeMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial())
cubeMesh.castShadow = true
scene.add(cubeMesh)
const cubeBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(-5, 5, 0).setCanSleep(false))
const cubeShape = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5).setMass(1).setRestitution(0.5)
world.createCollider(cubeShape, cubeBody)
dynamicBodies.push([cubeMesh, cubeBody])

// Ball Collider
const sphereMesh = new THREE.Mesh(new THREE.SphereGeometry(), new THREE.MeshNormalMaterial())
sphereMesh.castShadow = true
scene.add(sphereMesh)
const sphereBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(-2.5, 5, 0).setCanSleep(false))
const sphereShape = RAPIER.ColliderDesc.ball(1).setMass(1).setRestitution(0.5)
world.createCollider(sphereShape, sphereBody)
dynamicBodies.push([sphereMesh, sphereBody])

// Cylinder Collider
const cylinderMesh = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 2, 16), new THREE.MeshNormalMaterial())
cylinderMesh.castShadow = true
scene.add(cylinderMesh)
const cylinderBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(0, 5, 0).setCanSleep(false))
const cylinderShape = RAPIER.ColliderDesc.cylinder(1, 1).setMass(1).setRestitution(0.5)
world.createCollider(cylinderShape, cylinderBody)
dynamicBodies.push([cylinderMesh, cylinderBody])

// ConvexHull Collider
const icosahedronMesh = new THREE.Mesh(new THREE.IcosahedronGeometry(1, 0), new THREE.MeshNormalMaterial())
icosahedronMesh.castShadow = true
scene.add(icosahedronMesh)
const icosahedronBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(2.5, 5, 0).setCanSleep(false))
const points = new Float32Array(icosahedronMesh.geometry.attributes.position.array)
const icosahedronShape = (RAPIER.ColliderDesc.convexHull(points) as RAPIER.ColliderDesc).setMass(1).setRestitution(0.5)
world.createCollider(icosahedronShape, icosahedronBody)
dynamicBodies.push([icosahedronMesh, icosahedronBody])

// Trimesh Collider
const torusKnotMesh = new THREE.Mesh(new THREE.TorusKnotGeometry(), new THREE.MeshNormalMaterial())
torusKnotMesh.castShadow = true
scene.add(torusKnotMesh)
const torusKnotBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(5, 5, 0))
const vertices = new Float32Array(torusKnotMesh.geometry.attributes.position.array)
let indices = new Uint32Array((torusKnotMesh.geometry.index as THREE.BufferAttribute).array)
const torusKnotShape = (RAPIER.ColliderDesc.trimesh(vertices, indices) as RAPIER.ColliderDesc).setMass(1).setRestitution(0.5)
world.createCollider(torusKnotShape, torusKnotBody)
dynamicBodies.push([torusKnotMesh, torusKnotBody])

// the floor (using a cuboid)
const floorMesh = new THREE.Mesh(new THREE.BoxGeometry(50, 1, 50), new THREE.MeshPhongMaterial())
floorMesh.receiveShadow = true
floorMesh.position.y = -1
scene.add(floorMesh)
const floorBody = world.createRigidBody(RAPIER.RigidBodyDesc.fixed().setTranslation(0, -1, 0))
const floorShape = RAPIER.ColliderDesc.cuboid(25, 0.5, 25)
world.createCollider(floorShape, floorBody)

new OBJLoader().loadAsync('models/suzanne.obj').then((object) => {
    scene.add(object)
    const suzanneMesh = object.getObjectByName('Suzanne') as THREE.Mesh
    suzanneMesh.material = new THREE.MeshNormalMaterial()
    suzanneMesh.castShadow = true

    const suzanneBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(-1, 10, 0).setCanSleep(false))
    const points = new Float32Array(suzanneMesh.geometry.attributes.position.array)
    const suzanneShape = (RAPIER.ColliderDesc.convexHull(points) as RAPIER.ColliderDesc).setMass(1).setRestitution(0.5)
    world.createCollider(suzanneShape, suzanneBody)
    dynamicBodies.push([suzanneMesh, suzanneBody])
})

const car = new Car()
await car.loadCar(scene, [0, 2, 0]) // now calling `loadCar` outside of constructor, since async await won't wait if called in a constructor

// const car2 = new Car()
// await car2.loadCar(scene, [-2, 2, 0])

const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()

renderer.domElement.addEventListener('click', (e) => {
    mouse.set((e.clientX / renderer.domElement.clientWidth) * 2 - 1, -(e.clientY / renderer.domElement.clientHeight) * 2 + 1)

    raycaster.setFromCamera(mouse, camera)

    const intersects = raycaster.intersectObjects(
        dynamicBodies.flatMap((a) => a[0]),
        false
    )

    if (intersects.length) {
        dynamicBodies.forEach((b) => {
            b[0] === intersects[0].object && b[1].applyImpulse(new RAPIER.Vector3(0, 10, 0), true)
        })
    }
})

const stats = new Stats()
document.body.appendChild(stats.dom)

const gui = new GUI()
gui.add(rapierDebugRenderer, 'enabled').name('Rapier Degug Renderer')

const physicsFolder = gui.addFolder('Physics')
physicsFolder.add(world.gravity, 'x', -10.0, 10.0, 0.1)
physicsFolder.add(world.gravity, 'y', -10.0, 10.0, 0.1)
physicsFolder.add(world.gravity, 'z', -10.0, 10.0, 0.1)

const clock = new THREE.Clock()
let delta

function animate() {
    requestAnimationFrame(animate)

    delta = clock.getDelta()
    world.timestep = Math.min(delta, 0.1)
    world.step()

    for (let i = 0, n = dynamicBodies.length; i < n; i++) {
        dynamicBodies[i][0].position.copy(dynamicBodies[i][1].translation())
        dynamicBodies[i][0].quaternion.copy(dynamicBodies[i][1].rotation())
    }

    car.update()
    //car2.update()

    rapierDebugRenderer.update()

    controls.update()

    renderer.render(scene, camera)

    stats.update()
}

animate()