mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-11-13 20:56:11 +01:00
canvas
This commit is contained in:
tresabhi committed
1 parent
960ca4b0f4
commit
4247004b13
20 files changed
+279
-251
No files matched your search
@@ -0,0 +1,271 @@
|
||||
import { I_HAT, J_HAT } from "@blitzkit/core";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import { invalidate, useFrame, useThree } from "@react-three/fiber";
|
||||
import type { QuicklimeEvent } from "quicklime";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { PerspectiveCamera, Vector3 } from "three";
|
||||
import { OrbitControls as OrbitControlsClass } from "three-stdlib";
|
||||
import { Duel } from "../../../../../../stores/duel";
|
||||
import { api } from "../api/dynamic";
|
||||
import { applyPitchYawLimits } from "../core/blitz/applyPitchYawLimits";
|
||||
import { hasEquipment } from "../core/blitzkit/hasEquipment";
|
||||
import { Pose, poseEvent } from "../core/blitzkit/pose";
|
||||
import { controlsEnabledEvent } from "../core/controlsEnabled";
|
||||
import { Tankopedia } from "../stores/tankopedia";
|
||||
|
||||
const poseDistances: Record<Pose, number> = {
|
||||
[Pose.HullDown]: 15,
|
||||
[Pose.FaceHug]: 5,
|
||||
[Pose.Default]: -1,
|
||||
};
|
||||
|
||||
const inspectModeInitialPosition = new Vector3(-8, 2, -13);
|
||||
|
||||
const modelDefinitions = await api.models();
|
||||
|
||||
interface ControlsProps {
|
||||
autoRotate?: boolean;
|
||||
zoomable?: boolean;
|
||||
enableRotate?: boolean;
|
||||
}
|
||||
|
||||
export function CanvasControl({
|
||||
autoRotate = true,
|
||||
zoomable = true,
|
||||
enableRotate = true,
|
||||
}: ControlsProps) {
|
||||
const camera = useThree((state) => state.camera as PerspectiveCamera);
|
||||
const canvas = useThree((state) => state.gl.domElement);
|
||||
const orbitControls = useRef<OrbitControlsClass>(null);
|
||||
const protagonistTurret = Duel.use((state) => state.protagonist.turret);
|
||||
const antagonistTurret = Duel.use((state) => state.antagonist.turret);
|
||||
const protagonistTrack = Duel.use((state) => state.protagonist.track);
|
||||
const protagonistTank = Duel.use((state) => state.protagonist.tank);
|
||||
const antagonistTank = Duel.use((state) => state.antagonist.tank);
|
||||
const protagonistGun = Duel.use((state) => state.protagonist.gun);
|
||||
const protagonistModelDefinition =
|
||||
modelDefinitions.models[protagonistTank.id];
|
||||
const protagonistTrackModelDefinition =
|
||||
modelDefinitions.models[protagonistTank.id].tracks[protagonistTrack.id];
|
||||
const antagonistModelDefinition = modelDefinitions.models[antagonistTank.id];
|
||||
const protagonistTurretModelDefinition =
|
||||
protagonistModelDefinition.turrets[protagonistTurret.id];
|
||||
const antagonistTurretModelDefinition =
|
||||
antagonistModelDefinition.turrets[antagonistTurret.id];
|
||||
const protagonistGunModelDefinition =
|
||||
protagonistTurretModelDefinition.guns[protagonistGun.id];
|
||||
const protagonistHullOrigin = new Vector3(
|
||||
protagonistTrackModelDefinition.origin!.x,
|
||||
protagonistTrackModelDefinition.origin!.y,
|
||||
-protagonistTrackModelDefinition.origin!.z,
|
||||
);
|
||||
const protagonistTurretOrigin = new Vector3(
|
||||
protagonistModelDefinition.turret_origin!.x,
|
||||
protagonistModelDefinition.turret_origin!.y,
|
||||
-protagonistModelDefinition.turret_origin!.z,
|
||||
);
|
||||
const protagonistGunOrigin = new Vector3(
|
||||
protagonistTurretModelDefinition.gun_origin!.x,
|
||||
protagonistTurretModelDefinition.gun_origin!.y,
|
||||
-protagonistTurretModelDefinition.gun_origin!.z,
|
||||
);
|
||||
const antagonistGunHeight =
|
||||
protagonistTrackModelDefinition.origin!.y +
|
||||
antagonistModelDefinition.turret_origin!.y +
|
||||
antagonistTurretModelDefinition.gun_origin!.y;
|
||||
const disturbed = Tankopedia.use((state) => state.disturbed);
|
||||
const doAutoRotate = autoRotate && !disturbed;
|
||||
const gunHeight =
|
||||
protagonistHullOrigin.y +
|
||||
protagonistTurretOrigin.y +
|
||||
protagonistGunOrigin.y;
|
||||
|
||||
useEffect(() => {
|
||||
function handleControlsEnabled(event: QuicklimeEvent<boolean>) {
|
||||
if (!orbitControls.current) return;
|
||||
orbitControls.current.enabled = event.data;
|
||||
}
|
||||
|
||||
controlsEnabledEvent.on(handleControlsEnabled);
|
||||
|
||||
function handlePoseEvent(event: Pose) {
|
||||
const hasImprovedVerticalStabilizer = hasEquipment(
|
||||
122,
|
||||
Duel.state.protagonist.tank.equipment_preset,
|
||||
Duel.state.protagonist.equipmentMatrix,
|
||||
);
|
||||
const hasDownImprovedVerticalStabilizer = hasEquipment(
|
||||
124,
|
||||
Duel.state.protagonist.tank.equipment_preset,
|
||||
Duel.state.protagonist.equipmentMatrix,
|
||||
);
|
||||
|
||||
switch (event) {
|
||||
case Pose.HullDown: {
|
||||
const [pitch] = applyPitchYawLimits(
|
||||
-Infinity,
|
||||
0,
|
||||
protagonistGunModelDefinition.pitch!,
|
||||
protagonistTurretModelDefinition.yaw,
|
||||
hasImprovedVerticalStabilizer,
|
||||
hasDownImprovedVerticalStabilizer,
|
||||
);
|
||||
|
||||
camera.position
|
||||
.set(0, 0, 0)
|
||||
.add(protagonistHullOrigin)
|
||||
.add(protagonistTurretOrigin)
|
||||
.add(protagonistGunOrigin)
|
||||
.add(
|
||||
new Vector3(
|
||||
0,
|
||||
poseDistances[event] * Math.sin(pitch),
|
||||
poseDistances[event] * -Math.cos(pitch),
|
||||
),
|
||||
);
|
||||
camera.lookAt(
|
||||
protagonistHullOrigin
|
||||
.clone()
|
||||
.add(protagonistTurretOrigin)
|
||||
.add(protagonistGunOrigin),
|
||||
);
|
||||
orbitControls.current?.target.set(0, antagonistGunHeight, 0);
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case Pose.FaceHug: {
|
||||
const [pitch] = applyPitchYawLimits(
|
||||
0,
|
||||
0,
|
||||
protagonistGunModelDefinition.pitch!,
|
||||
protagonistTurretModelDefinition.yaw,
|
||||
hasImprovedVerticalStabilizer,
|
||||
hasDownImprovedVerticalStabilizer,
|
||||
);
|
||||
|
||||
camera.position
|
||||
.set(0, 0, 0)
|
||||
.add(protagonistHullOrigin)
|
||||
.add(protagonistTurretOrigin)
|
||||
.add(protagonistGunOrigin)
|
||||
.add(
|
||||
new Vector3(
|
||||
0,
|
||||
poseDistances[event] * Math.sin(pitch),
|
||||
poseDistances[event] * -Math.cos(pitch),
|
||||
),
|
||||
);
|
||||
orbitControls.current?.target
|
||||
.set(0, 0, 0)
|
||||
.add(protagonistHullOrigin)
|
||||
.add(protagonistTurretOrigin)
|
||||
.add(protagonistGunOrigin)
|
||||
.add(
|
||||
new Vector3(
|
||||
0,
|
||||
0.5 * poseDistances[event] * Math.sin(pitch),
|
||||
0.5 * poseDistances[event] * -Math.cos(pitch),
|
||||
),
|
||||
);
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case Pose.Default: {
|
||||
camera.position.copy(inspectModeInitialPosition);
|
||||
orbitControls.current?.target.set(0, 1.25, 0);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
invalidate();
|
||||
}
|
||||
|
||||
poseEvent.on(handlePoseEvent);
|
||||
|
||||
return () => {
|
||||
controlsEnabledEvent.off(handleControlsEnabled);
|
||||
poseEvent.off(handlePoseEvent);
|
||||
};
|
||||
}, [camera, protagonistTank.id, antagonistTank.id]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleWheel(event: WheelEvent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function handleScroll(event: Event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function disturb() {
|
||||
Tankopedia.mutate((draft) => {
|
||||
draft.disturbed = true;
|
||||
});
|
||||
}
|
||||
|
||||
poseEvent.on(disturb);
|
||||
canvas.addEventListener("pointerdown", disturb);
|
||||
canvas.addEventListener("wheel", handleWheel);
|
||||
document.body.addEventListener("scroll", handleScroll);
|
||||
|
||||
function updateCamera() {
|
||||
if (!orbitControls.current) return;
|
||||
|
||||
orbitControls.current.rotateSpeed = 0.25;
|
||||
|
||||
camera.position.copy(inspectModeInitialPosition);
|
||||
orbitControls.current.target.set(0, gunHeight * 0.6, 0);
|
||||
orbitControls.current.enablePan = true;
|
||||
orbitControls.current.enableZoom = true;
|
||||
camera.fov = 25;
|
||||
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
updateCamera();
|
||||
|
||||
return () => {
|
||||
canvas.removeEventListener("pointerdown", disturb);
|
||||
poseEvent.off(disturb);
|
||||
canvas.removeEventListener("wheel", handleWheel);
|
||||
document.body.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{doAutoRotate && <Animator />}
|
||||
|
||||
<OrbitControls
|
||||
enableRotate={enableRotate}
|
||||
maxDistance={40}
|
||||
minDistance={5}
|
||||
enableZoom={zoomable}
|
||||
zoomSpeed={zoomable ? undefined : 0}
|
||||
ref={orbitControls}
|
||||
enabled={controlsEnabledEvent.last!}
|
||||
enableDamping={false}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Animator() {
|
||||
const clock = useThree((state) => state.clock);
|
||||
const t0 = useRef(clock.elapsedTime);
|
||||
|
||||
useFrame(({ camera }) => {
|
||||
const t = clock.elapsedTime - t0.current;
|
||||
|
||||
camera.position
|
||||
.copy(inspectModeInitialPosition)
|
||||
.applyAxisAngle(I_HAT, (Math.PI / 32) * Math.sin(t / 9))
|
||||
.applyAxisAngle(J_HAT, (-Math.PI / 16) * Math.sin(t / 7));
|
||||
|
||||
invalidate();
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in new issue
Block a user