feat: more fluid

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<LineSegments>(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 (
+        <Fragment key={props.key}>
+          <lineSegments ref={outline} material={outlineMaterial.current}>
+            <edgesGeometry args={[props.geometry, 45]} />
+          </lineSegments>
+
+          {isModule && (
             <mesh
               material={material.current}
               ref={baseWrapper}
@@ -199,23 +203,14 @@ export function DissectorSceneComponent({
                 </group>
               </Geometry>
             </mesh>
+          )}
 
-            <lineSegments ref={outline} material={outlineMaterial.current}>
+          {!isModule && (
+            <lineSegments material={outlineMaterialInverse.current}>
               <edgesGeometry args={[props.geometry, 45]} />
             </lineSegments>
-          </>
-        );
-      }
-
-      return (
-        <>
-          <lineSegments material={outlineMaterial.current}>
-            <edgesGeometry args={[props.geometry, 45]} />
-          </lineSegments>
-          <lineSegments material={outlineMaterialInverse.current}>
-            <edgesGeometry args={[props.geometry, 45]} />
-          </lineSegments>
-        </>
+          )}
+        </Fragment>
       );
     },
   });

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,
       ),

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) : <mesh {...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) : <group {...props} />;