Animating a Spaceship

This tutorial demonstrates how to load and animate a spaceship model, as well as using Threlte’s InstancedMesh to efficiently animate hundreds of stars. We’ll also cover raycaster intersections, post-processing effects, and dynamically generated reflection maps.

Part I

Part II

The second part of the tutorial focuses on applying a spring-based animation to the spaceship model by leveraging useFrame, a Threlte 6 hook used to run a callback on every frame. Threlte 7 improved the task scheduling API by introducing useTask, as of Threlte 8 useFrame has been removed and should be replaced.

useFrame(() => {
  ...
})

useTask(() => {
  ...
})

Part III

In this last portion of the tutorial we’ll introduce post-processing effects that require control over the render loop, and similiarly to episode 2 the video relies on useRender, a Threlte 6 hook used to manually render a scene. The equivalent Threlte 7 logic adds a task to Threlte’s default renderStage

const { scene, camera, renderer } = useThrelte()

useRender(() => {
  // render here
})

const { scene, camera, renderer, renderStage } = useThrelte()

useTask(
  () => {
    // render here
  },
  { stage: renderStage, autoInvalidate: false }
)