The controls · aeronautic

Every moving part of the fighter, on sliders: the stick, the pedals, the throttle, the flaps, the air brake, the gear and the canopy.

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;

The fighter stands on its wheels, gear down, at idle. One <ControlSurfaces> drives all of it from the flight the sliders write:

The stick moves the elevons, together for pitch and against each other for roll, the stick in the cockpit, and the nozzles' gimbals.
The pedals move the rudders, the pedals in the cockpit and the nozzles' gimbals. With the air brake out, they open one side's drag rudders further.
The throttle opens and closes the nozzles' petals, moves the throttle lever up to its reheat detent and lights the plumes.
The flaps droop the leading-edge flaps: this fighter has no trailing edge flaps of its own.
The air brake opens the brakes on the wings and splits both drag rudders.
The gear scrubs the model's own retraction clip, its doors and legs in the order they were animated, and moves the gear lever.
The canopy isn't in a flight, so it is moved by hand: rig.setClip("ANIM_Canopy_Open", share).

Each part moves at its actuator's rate, so the surfaces lag the stick a little and the gear takes a couple of seconds.

const flight = new Flight({ gear: 1, throttle: 0 });

<FlightProvider flight={flight}>
  <primitive object={scene} />
  <ControlSurfaces
    ref={rig}
    object={scene}
    animations={animations}
    exhaust={<Afterburner preset="afterburner" direction={[0, 0, -1]} />}
  />
</FlightProvider>;

Next, thrust vectoring.