Rapier logo

Physics

The main component for render.

The <Physics /> component is the main component, provider and source of all physics calculations.

This component is required to use on this library, all other components on this library depend on it
Note that in order to work the <Physics /> needs to be wrapped in a <Suspense > component
<script setup lang="ts" >
import { TresCanvas } from '@tresjs/core'
import { Physics } from '@tresjs/rapier'
</script>
<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
    <Suspense>
      <Physics>
        // your scene with physics goes here
      </Physics>
    </Suspense>
  </TresCanvas>
</template>

Props

gravity
TresVector3 | THREE.Vector3
Default: [0, -9.8, 0] - Sets the gravity of the world.
debug
boolean
Default: false - Enables debug mode.
timestep
number
Default: 1 - Sets the new simulation timestep in seconds.

Expose properties

init
() => Promise<void>
Initializes the Rapier module and creates the physics world with gravity.
isDebug
Ref<boolean>
Reactive flag for debug mode state.
isPaused
Ref<boolean>
Reactive flag for paused state.
rapier
ShallowRef<RAPIER>
Shallow ref with the loaded Rapier module.
setWorld
(world: World) => void
Replaces the current Rapier world.
world
ShallowRef<World>
Shallow ref with the current Rapier world.