From bc211822aadf4f7172e66a670ae007404dcde2c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 22 Feb 2024 18:36:21 -0600 Subject: [PATCH] fix: armor mesh rotation dysync --- .../[id]/components/Characteristics/index.tsx | 2 ++ .../tankopedia/[id]/components/Control.tsx | 4 ++-- .../components/ArmorHighlighting.tsx | 4 ++-- .../components/ExternalModuleMask.tsx | 2 +- .../TankArmor/components/SpacedArmorDepth.tsx | 2 +- .../components/Model/components/TankModel.tsx | 21 +++++-------------- src/core/blitzkrieg/jsxTree.tsx | 6 ++++-- 7 files changed, 17 insertions(+), 24 deletions(-) diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx index 084df92a7..b7d4d3e17 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx @@ -617,6 +617,7 @@ export function Characteristics() { return ( <> 1 ? ` x ${count}` : ''}`} unit="%" decimals={0} @@ -627,6 +628,7 @@ export function Characteristics() { {member.substitute && ( diff --git a/src/app/tools/tankopedia/[id]/components/Control.tsx b/src/app/tools/tankopedia/[id]/components/Control.tsx index 210165f42..4ec96c286 100644 --- a/src/app/tools/tankopedia/[id]/components/Control.tsx +++ b/src/app/tools/tankopedia/[id]/components/Control.tsx @@ -55,7 +55,7 @@ export function Controls() { useEffect(() => { camera.position.set(-4, 4, -16); - orbitControls.current?.target.set(0, antagonistGunHeight / 2, 0); + orbitControls.current?.target.set(0, 1.25, 0); const unsubscribeTankopedia = useTankopediaPersistent.subscribe( (state) => state.model.visual.controlsEnabled, @@ -135,7 +135,7 @@ export function Controls() { case Pose.Default: { camera.position.set(-4, 4, -16); - orbitControls.current?.target.set(0, antagonistGunHeight / 2, 0); + orbitControls.current?.target.set(0, 1.25, 0); break; } } diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx index 653150abb..e547a01fe 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx @@ -87,14 +87,14 @@ export function ArmorHighlighting() { }, ); - handleModelTransform(useDuel.getState().protagonist!); + handleModelTransform(protagonist); modelTransformEvent.on(handleModelTransform); return () => { modelTransformEvent.off(handleModelTransform); unsubscribe(); }; - }, []); + }); const armorGltf = useArmor(protagonist.tank.id); const armorNodes = Object.values(armorGltf.nodes); diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx index 5383d6baa..66858e5bd 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx @@ -102,7 +102,7 @@ export const ExternalModuleMask = memo( turretContainer.current?.rotation.copy(turretRotation); } - handleModelTransform(useDuel.getState().protagonist!); + handleModelTransform(protagonist); modelTransformEvent.on(handleModelTransform); return () => { diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx index 577ccf0a0..a856743ae 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx @@ -108,7 +108,7 @@ export const SpacedArmorDepth = memo( turretContainer.current?.rotation.copy(turretRotation); } - handleModelTransform(useDuel.getState().protagonist!); + handleModelTransform(protagonist); modelTransformEvent.on(handleModelTransform); return () => { diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx index 75e47b20d..daabe800e 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx @@ -1,19 +1,17 @@ import { ThreeEvent, useThree } from '@react-three/fiber'; -import { memo, useEffect, useRef, useState } from 'react'; +import { memo, useEffect, useRef } from 'react'; import { Euler, Group, Vector3 } from 'three'; import { degToRad } from 'three/src/math/MathUtils'; import { I_HAT, J_HAT, K_HAT } from '../../../../../../../constants/axis'; import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits'; import { jsxTree } from '../../../../../../../core/blitzkrieg/jsxTree'; -import { - ModelDefinitions, - modelDefinitions, -} from '../../../../../../../core/blitzkrieg/modelDefinitions'; +import { modelDefinitions } from '../../../../../../../core/blitzkrieg/modelDefinitions'; import { ModelTransformEventData, modelTransformEvent, } from '../../../../../../../core/blitzkrieg/modelTransform'; import { normalizeAnglePI } from '../../../../../../../core/math/normalizeAngle180'; +import { useAwait } from '../../../../../../../hooks/useAwait'; import { useModel } from '../../../../../../../hooks/useModel'; import { mutateDuel, useDuel } from '../../../../../../../stores/duel'; import mutateTankopediaPersistent, { @@ -21,9 +19,7 @@ import mutateTankopediaPersistent, { } from '../../../../../../../stores/tankopedia'; export const TankModel = memo(() => { - const [awaitedModelDefinitions, setAwaitedModelDefinitions] = useState< - ModelDefinitions | undefined - >(undefined); + const awaitedModelDefinitions = useAwait(modelDefinitions); const protagonist = useDuel((draft) => draft.protagonist!); const canvas = useThree((state) => state.gl.domElement); const hullContainer = useRef(null); @@ -31,14 +27,6 @@ export const TankModel = memo(() => { const gunContainer = useRef(null); useEffect(() => { - (async () => { - setAwaitedModelDefinitions(await modelDefinitions); - })(); - }, []); - - useEffect(() => { - if (!awaitedModelDefinitions) return; - const hullOrigin = new Vector3( trackModelDefinition.origin[0], trackModelDefinition.origin[1], @@ -103,6 +91,7 @@ export const TankModel = memo(() => { turretContainer.current?.rotation.copy(turretRotation); } + handleModelTransform(protagonist); modelTransformEvent.on(handleModelTransform); return () => { diff --git a/src/core/blitzkrieg/jsxTree.tsx b/src/core/blitzkrieg/jsxTree.tsx index ac2bf4364..044c4a771 100644 --- a/src/core/blitzkrieg/jsxTree.tsx +++ b/src/core/blitzkrieg/jsxTree.tsx @@ -1,10 +1,11 @@ import { MeshProps } from '@react-three/fiber'; import { Mesh, Object3D } from 'three'; -export function jsxTree(node: Object3D, mesh?: MeshProps) { +export function jsxTree(node: Object3D, mesh?: MeshProps, key?: string) { if (node instanceof Mesh) { return ( - {node.children.map((child) => jsxTree(child, mesh))} + {node.children.map((child) => jsxTree(child, mesh, child.uuid))} ); }