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.pause
boolean
Default:
false - Pauses the physics simulation when true.timeStep
number | 'vary'
Default:
1/60 - Fixed simulation timestep in seconds. Uses an accumulator so physics speed stays consistent across refresh rates. Pass 'vary' to step once per frame using the render delta instead.timeScale
number
Default:
1 - Scales simulation speed relative to real time (2 is double speed, 0.5 is half). Values <= 0 skip stepping; prefer pausing the world to freeze it.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 to pause the physics simulation.
timeStep
Ref<number | 'vary'>
Reactive simulation timestep. Synced from the
timeStep prop; mutate at runtime via useRapier.timeScale
Ref<number>
Reactive simulation speed scale.
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.