feat: tighter cam fit

tresabhi · Dec 2, 2024 · 5a34a35 · 5a34a35
1 parent 1281503
commit 5a34a35
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 24 deletions.
diff --git a/...bsite/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx b/...bsite/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
@@ -3,6 +3,7 @@ import { invalidate, useThree } from '@react-three/fiber';
 import { useEffect, useRef, useState } from 'react';
 import { PerspectiveCamera, Vector3 } from 'three';
 import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
+import { degToRad } from 'three/src/math/MathUtils.js';
 import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
@@ -19,7 +20,7 @@ const poseDistances: Record<Pose, number> = {
 
 const modelDefinitions = await awaitableModelDefinitions;
 
-const ARCADE_MODE_DISTANCE = 19;
+const ARCADE_MODE_DISTANCE = 16;
 const ARCADE_MODE_ANGLE = Math.PI / 8;
 
 export const ARCADE_MODE_FOV = 54;
@@ -73,13 +74,11 @@ export function Controls() {
   const [autoRotate, setAutoRotate] = useState(
     display !== TankopediaDisplay.ShootingRange,
   );
-  let initialPosition = [
-    -8,
+  const gunHeight =
     protagonistHullOrigin.y +
-      protagonistTurretOrigin.y +
-      protagonistGunOrigin.y,
-    -13,
-  ] as const;
+    protagonistTurretOrigin.y +
+    protagonistGunOrigin.y;
+  const initialPosition = [-8, gunHeight + 4, -13] as const;
 
   useEffect(() => {
     if (!orbitControls.current) return;
@@ -88,16 +87,16 @@ export function Controls() {
       (camera as PerspectiveCamera).fov = ARCADE_MODE_FOV;
       camera.position.set(
         0,
-        initialPosition[1] + ARCADE_MODE_DISTANCE * Math.sin(ARCADE_MODE_ANGLE),
+        gunHeight + ARCADE_MODE_DISTANCE * Math.sin(ARCADE_MODE_ANGLE),
         ARCADE_MODE_DISTANCE * Math.cos(ARCADE_MODE_ANGLE),
       );
-      orbitControls.current.target.set(0, initialPosition[1] + 3, 0);
+      orbitControls.current.target.set(0, gunHeight + 3, 0);
       orbitControls.current.enablePan = false;
       orbitControls.current.enableZoom = false;
     } else {
       (camera as PerspectiveCamera).fov = INSPECT_MODE_FOV;
       camera.position.set(...initialPosition);
-      orbitControls.current.target.set(0, initialPosition[1] / 2, 0);
+      orbitControls.current.target.set(0, gunHeight / 2, 0);
       orbitControls.current.enablePan = true;
       orbitControls.current.enableZoom = true;
     }
@@ -243,6 +242,7 @@ export function Controls() {
       enabled={tankopediaEphemeralStore.getState().controlsEnabled}
       rotateSpeed={0.25}
       enableDamping={false}
+      maxPolarAngle={degToRad(100)}
       autoRotate={autoRotate}
       autoRotateSpeed={1 / 4}
     />

diff --git a/...site/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx b/...site/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx
@@ -1,10 +1,13 @@
 import { Environment } from '@react-three/drei';
+import { times } from 'lodash-es';
 import { useModel } from '../../../../../../hooks/useModel';
 import { Duel } from '../../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
 import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
 
+const LIGHTS_COUNT = 5;
+
 export function Lighting() {
   const protagonist = Duel.use((state) => state.protagonist);
   const display = TankopediaEphemeral.use((state) => state.display);
@@ -18,11 +21,29 @@ export function Lighting() {
 
   return (
     <>
-      <Environment
-        preset={environment}
-        background={showEnvironment}
-        environmentIntensity={isBrighterLighting ? 3 : 1}
-      />
+      {display !== TankopediaDisplay.ShootingRange && (
+        <Environment
+          preset={environment}
+          background={showEnvironment}
+          environmentIntensity={isBrighterLighting ? 3 : 1}
+        />
+      )}
+      {display === TankopediaDisplay.ShootingRange && (
+        <>
+          <directionalLight position={[0, -1, 0]} />
+
+          {times(LIGHTS_COUNT, (index) => (
+            <directionalLight
+              castShadow
+              position={[
+                Math.sin(2 * Math.PI * (index / LIGHTS_COUNT)),
+                1,
+                Math.cos(2 * Math.PI * (index / LIGHTS_COUNT)),
+              ]}
+            />
+          ))}
+        </>
+      )}
     </>
   );
 }
diff --git a/...te/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx b/...te/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx
@@ -31,11 +31,11 @@ export function SceneProps() {
       )}
       {display === TankopediaDisplay.ShootingRange && (
         <>
-          {/* <TransformControls>
-            <mesh rotation={[-Math.PI / 2, 0, 0]}>
-              <boxGeometry args={[1, 1, 1]} />
-            </mesh>
-          </TransformControls> */}
+          {/* <fog color="black" /> */}
+          <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+            <planeGeometry args={[100, 100]} />
+            <meshStandardMaterial color={0x404040} />
+          </mesh>
         </>
       )}
     </>

diff --git a/...ite/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx b/...ite/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx
@@ -102,7 +102,7 @@ export const TankModel = memo(() => {
         return jsxTree(
           node,
           {
-            mesh: { onPointerDown },
+            mesh: { onPointerDown, castShadow: true },
             // group(group) {
             //   return {
             //     visible:
@@ -194,7 +194,7 @@ export const TankModel = memo(() => {
           return jsxTree(
             node,
             {
-              mesh: { onPointerDown },
+              mesh: { onPointerDown, castShadow: true },
               // group(group) {
               //   return {
               //     visible:
@@ -289,7 +289,7 @@ export const TankModel = memo(() => {
             return jsxTree(
               node,
               {
-                mesh: { onPointerDown },
+                mesh: { onPointerDown, castShadow: true },
                 // group(group) {
                 //   return {
                 //     visible:

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx
@@ -177,7 +177,6 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
         style={{ userSelect: 'none' }}
         camera={{
           fov: INSPECT_MODE_FOV,
-          far: 32,
         }}
       >
         <Controls />