feat: more props

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -97,7 +97,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
           style={{
             backgroundImage: `url(${imgur('27Gwth4')})`,
             backgroundSize: 'contain',
-            transform: 'translate(-50%, -50%)',
+            transform: 'translateX(-50%)',
             borderRadius: '50%',
           }}
         />

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx

@@ -25,10 +25,8 @@ const ARCADE_MODE_ANGLE = Math.PI / 8;
 export const ARCADE_MODE_FOV = 54;
 export const INSPECT_MODE_FOV = 25;
 
-const emptyVector = new Vector2();
 
 export function Controls() {
-  const helper = useRef<AxesHelper>(null);
   const display = TankopediaEphemeral.use((state) => state.display);
   const duelStore = Duel.useStore();
   const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
@@ -81,8 +79,6 @@ export function Controls() {
     protagonistTurretOrigin.y +
     protagonistGunOrigin.y;
   const initialPosition = [-8, gunHeight + 4, -13] as const;
-  const raycaster = useThree((state) => state.raycaster);
-  const scene = useThree((state) => state.scene);
 
   useEffect(() => {
     if (!orbitControls.current) return;
@@ -237,38 +233,16 @@ export function Controls() {
   }, []);
 
   return (
-    <>
-      <axesHelper ref={helper} />
-      <OrbitControls
-        maxDistance={20}
-        minDistance={5}
-        ref={orbitControls}
-        enabled={tankopediaEphemeralStore.getState().controlsEnabled}
-        rotateSpeed={0.25}
-        enableDamping={false}
-        maxPolarAngle={degToRad(100)}
-        autoRotate={autoRotate}
-        autoRotateSpeed={1 / 4}
-        onChange={() => {
-          if (display !== TankopediaDisplay.ShootingRange || !helper.current) {
-            return;
-          }
-
-          raycaster.setFromCamera(emptyVector, camera);
-
-          const intersections = raycaster.intersectObjects(
-            scene.children,
-            true,
-          );
-          const first = intersections.find(
-            (intersection) => intersection.object !== helper.current,
-          );
-
-          if (first === undefined) return;
-
-          helper.current.position.copy(first.point);
-        }}
-      />
-    </>
+    <OrbitControls
+      maxDistance={20}
+      minDistance={5}
+      ref={orbitControls}
+      enabled={tankopediaEphemeralStore.getState().controlsEnabled}
+      rotateSpeed={0.25}
+      enableDamping={false}
+      maxPolarAngle={degToRad(100)}
+      autoRotate={autoRotate}
+      autoRotateSpeed={1 / 4}
+    />
   );
 }

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx

@@ -1,18 +1,28 @@
 import { useFrame, useLoader } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
 import { useRef } from 'react';
-import { MeshStandardMaterial, TextureLoader } from 'three';
+import {
+  AxesHelper,
+  Group,
+  MeshStandardMaterial,
+  TextureLoader,
+  Vector2,
+} from 'three';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
 import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
 
+const emptyVector = new Vector2();
+
 export function SceneProps() {
+  const helper = useRef<AxesHelper>(null);
   const show = TankopediaPersistent.use(
     (state) => state.showGrid && !state.showEnvironment,
   );
   const texture = useLoader(TextureLoader, 'https://i.imgur.com/C28Z8nU.png');
   const material = useRef<MeshStandardMaterial>(null);
   const display = TankopediaEphemeral.use((state) => state.display);
+  const playground = useRef<Group>(null);
 
   useFrame(({ camera }) => {
     if (!material.current) return;
@@ -21,6 +31,27 @@ export function SceneProps() {
 
   texture.anisotropy = 2;
 
+  useFrame(({ raycaster, scene, camera }) => {
+    if (
+      display !== TankopediaDisplay.ShootingRange ||
+      !playground.current ||
+      !helper.current
+    ) {
+      return;
+    }
+
+    raycaster.setFromCamera(emptyVector, camera);
+
+    const intersections = raycaster.intersectObjects(
+      playground.current.children,
+      true,
+    );
+
+    if (intersections.length === 0) return;
+
+    helper.current.position.copy(intersections[0].point);
+  });
+
   return (
     <>
       {show && display !== TankopediaDisplay.ShootingRange && (
@@ -29,13 +60,27 @@ export function SceneProps() {
           <meshStandardMaterial ref={material} map={texture} transparent />
         </mesh>
       )}
+
       {display === TankopediaDisplay.ShootingRange && (
         <>
-          {/* <fog color="black" /> */}
-          <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
-            <planeGeometry args={[100, 100]} />
-            <meshStandardMaterial color={0x404040} />
-          </mesh>
+          <axesHelper ref={helper} />
+
+          <group ref={playground}>
+            <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+              <planeGeometry args={[100, 100]} />
+              <meshStandardMaterial color={0x404040} />
+            </mesh>
+
+            <mesh
+              receiveShadow
+              castShadow
+              position={[10, 1.5, -10]}
+              rotation={[0, Math.PI / 4, 0]}
+            >
+              <boxGeometry args={[1, 3, 1]} />
+              <meshStandardMaterial color={0xff8040} />
+            </mesh>
+          </group>
         </>
       )}
     </>