diff --git a/packages/website/src/components/Armor/components/DissectorSceneComponent.tsx b/packages/website/src/components/Armor/components/DissectorSceneComponent.tsx index a91af130f..9266aa8e4 100644 --- a/packages/website/src/components/Armor/components/DissectorSceneComponent.tsx +++ b/packages/website/src/components/Armor/components/DissectorSceneComponent.tsx @@ -18,7 +18,7 @@ import { type CSGGeometryRef, } from '@react-three/csg'; import { useGLTF } from '@react-three/drei'; -import { useEffect, useRef } from 'react'; +import { Fragment, useEffect, useRef } from 'react'; import type { Mesh } from 'three'; import { Color, @@ -118,7 +118,7 @@ export function DissectorSceneComponent({ opacity: 2 ** -1, side: DoubleSide, color: moduleColor[armorPlate.type], - clippingPlanes: isModule ? undefined : [clippingPlane.current], + clippingPlanes: isModule ? [] : [clippingPlane.current], }), ); const outline = useRef(null); @@ -137,7 +137,7 @@ export function DissectorSceneComponent({ opacity: 2 ** -6, side: DoubleSide, color: moduleOutlineColor[armorPlate.type], - clippingPlanes: isModule ? undefined : [clippingPlaneInverse.current], + clippingPlanes: isModule ? [] : [clippingPlaneInverse.current], }), ); const worldPosition = new Vector3(); @@ -177,9 +177,13 @@ export function DissectorSceneComponent({ }; }, []); - if (isModule) { - return ( - <> + return ( + + + + + + {isModule && ( + )} - + {!isModule && ( + - - ); - } - - return ( - <> - - - - - - - + )} + ); }, }); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx index 11d834c2d..245c797df 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx @@ -227,10 +227,11 @@ export function SceneProps() { dissectEvent.emit({ rotation: - lastDissection.rotation + (4 * delta.current.x) / window.innerWidth, - // offset: 0, + lastDissection.rotation + + 2 * Math.PI * (delta.current.x / window.innerWidth), offset: clamp( - lastDissection.offset + (4 * delta.current.y) / window.innerHeight, + lastDissection.offset + + GRID_SIZE * (delta.current.y / window.innerHeight), -5, 5, ), diff --git a/packages/website/src/core/blitzkit/jsxTree.tsx b/packages/website/src/core/blitzkit/jsxTree.tsx index 80fab8756..6319d7c08 100644 --- a/packages/website/src/core/blitzkit/jsxTree.tsx +++ b/packages/website/src/core/blitzkit/jsxTree.tsx @@ -8,11 +8,10 @@ export function jsxTree( mesh?: (mesh: Mesh, props: MeshProps) => ReactNode; group?: (object3d: Object3D, props: Object3DProps) => ReactNode; }, - key?: string, ): ReactNode { if (node instanceof Mesh) { const props = { - key, + key: node.uuid, geometry: node.geometry, material: node.material, position: node.position, @@ -23,13 +22,11 @@ export function jsxTree( return mergers?.mesh ? mergers.mesh(node, props) : ; } else if (node instanceof Object3D) { const props = { - key, + key: node.uuid, position: node.position, rotation: node.rotation, scale: node.scale, - children: node.children.map((child) => - jsxTree(child, mergers, child.uuid), - ), + children: node.children.map((child) => jsxTree(child, mergers)), }; return mergers?.group ? mergers.group(node, props) : ;