Quick start

Move it

Put <ControlSurfaces> next to the model, inside a <FlightProvider>:

import { FlightProvider } from "@aeronautic/core/react";
import { ControlSurfaces } from "@aeronautic/controls/react";
import { useGLTF } from "@react-three/drei";

const Jet = () => {
  const gltf = useGLTF("/fighter.glb");

  return (
    <FlightProvider initial={{ gear: 1 }}>
      <primitive object={gltf.scene} />
      <ControlSurfaces object={gltf.scene} animations={gltf.animations} />
    </FlightProvider>
  );
};

It finds the model's parts, and drives each from the flight: the stick, the pedals, the throttle, the flaps, the air brake and the gear. Pass animations so that a part the model animates with a clip, as its gear retracting, is moved through that clip.

Fly it

Write the pilot's controls to the flight:

const flight = useFlightStore();

useFrame(() => {
  flight?.set({
    roll: input.stick_x,
    pitch: input.stick_y,
    yaw: input.pedals,
    throttle: input.throttle,
    gear: input.gear_down ? 1 : 0,
  });
});

The stick and the pedals run from −1 to 1, right, aft and right pedal positive. The throttle runs from 0 at idle through 1 at military power to 1.1 at full reheat. The flaps, the air brake and the gear run from 0 to 1. See Writing it.

Light it

Give each engine an afterburner with exhaust. It sits on the engine's exhaust, turns with the nozzle and runs at the engine's throttle:

<ControlSurfaces
  object={gltf.scene}
  animations={gltf.animations}
  exhaust={<Afterburner preset="afterburner" direction={[0, 0, -1]} />}
/>

See it

the-controls.tsx

Starting…

import { Flight } from "@aeronautic/core";
import { FlightProvider } from "@aeronautic/core/react";
import { type ControlRig, ControlSurfaces } from "@aeronautic/controls/react";
import { type FC, type RefObject, useRef, useState } from "react";
import { Exhaust, Slider, useFighter } from "./fighter";
import { Stage } from "./stage";

// The fighter's every moving part, from the flight the sliders write: the
// stick and the pedals move the elevons, the rudders, the drag rudders and
// the nozzles; the throttle the nozzles' petals, the lever and the plumes;
// the levers the flaps, the air brakes and the gear. The canopy is not
// something a flight knows, so it is moved by hand, through the rig

/**
 * The fighter on its wheels, every part driven.
 * @param props Where to put its rig, for the canopy
 * @returns The model and its parts
 */
const Fighter: FC<{ rig: RefObject<ControlRig | null> }> = ({ rig }) => {
  const { scene, animations } = useFighter();

  return (
    <>
      <primitive object={scene} />
      <ControlSurfaces
        ref={rig}
        object={scene}
        animations={animations}
        exhaust={<Exhaust />}
      />
    </>
  );
};

/**
 * Every control of the fighter, on sliders.
 * @returns The example
 */
export const TheControls: FC = () => {
  // On the ground, gear down, at idle
  const [flight] = useState(() => new Flight({ gear: 1, throttle: 0 }));
  const rig = useRef<ControlRig>(null);
  const [canopy, set_canopy] = useState(0);

  return (
    <FlightProvider flight={flight}>
      <Stage
        camera={[-14, 6, -12]}
        target={[0, 0, 2]}
        floor={-2.2}
        reflections
        overlay={
          <div className="example-controls">
            <Slider
              label="stick, roll"
              min={-1}
              max={1}
              step={0.01}
              start={0}
              write={(f, roll) => f.set({ roll })}
            />
            <Slider
              label="stick, pitch"
              min={-1}
              max={1}
              step={0.01}
              start={0}
              write={(f, pitch) => f.set({ pitch })}
            />
            <Slider
              label="pedals"
              min={-1}
              max={1}
              step={0.01}
              start={0}
              write={(f, yaw) => f.set({ yaw })}
            />
            <Slider
              label="throttle"
              min={0}
              max={1.1}
              step={0.01}
              start={0}
              write={(f, throttle) => f.set({ throttle })}
            />
            <Slider
              label="flaps"
              min={0}
              max={1}
              step={0.01}
              start={0}
              write={(f, flaps) => f.set({ flaps })}
            />
            <Slider
              label="air brake"
              min={0}
              max={1}
              step={0.01}
              start={0}
              write={(f, airbrake) => f.set({ airbrake })}
            />
            <Slider
              label="gear"
              min={0}
              max={1}
              step={1}
              start={1}
              write={(f, gear) => f.set({ gear })}
            />
            <label>
              canopy
              <input
                type="range"
                min={0}
                max={1}
                step={1}
                value={canopy}
                onChange={(event) => {
                  const share = event.target.valueAsNumber;

                  set_canopy(share);
                  rig.current?.setClip("ANIM_Canopy_Open", share);
                }}
              />
            </label>
          </div>
        }
      >
        <FlightProvider flight={flight}>
          <Fighter rig={rig} />
        </FlightProvider>
      </Stage>
    </FlightProvider>
  );
};

export default TheControls;

Next, choose the parts, or see how a model says what moves.

Move itCopy Anchor Link

Fly itCopy Anchor Link

Light itCopy Anchor Link

See itCopy Anchor Link

On this page

Move it

Fly it

Light it

See it