feat - add appartment v4

src/components/gl/House/HotSpots/AppartmentHotspot.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStoreDragging } from '../../../../stores/storeDragging';
 import type { AppartmentHotSpot } from './types';
+import { useCursor } from '@react-three/drei';
 
 export const AppartmentHotspot = ({
   geometry,
@@ -14,6 +15,7 @@ export const AppartmentHotspot = ({
 }: AppartmentHotSpot & MeshProps) => {
   const [isHovered, setIsHovered] = useState(false);
   const service = useInterpret(hotSpotMachine);
+  useCursor(isHovered);
 
   // TODO : use below solution when availble ===> registers hotspot machine in game machine
   // const gameMachine = useGameMachineProvider();
@@ -38,7 +40,7 @@ export const AppartmentHotspot = ({
 
   // setup easings
   const { glow, scale } = useSpring({
-    glow: isHovered ? 2 : 1,
+    glow: isHovered ? 3 : 1,
     scale: isHovered ? [1, 1.05, 1.05] : [1, 1, 1],
   });
 
@@ -48,31 +50,29 @@ export const AppartmentHotspot = ({
       setDraggingId(null);
 
       draggingActorRef &&
-        service.send({ type: 'onAddPerson', person: draggingActorRef });
+        service.send({
+          type: 'onAddPerson',
+          person: draggingActorRef,
+        });
     }
   };
 
   return (
     // @ts-ignore
     <a.group scale={scale} onClick={handleOnClick}>
-      <mesh
+      {/* @ts-ignore */}
+      <a.mesh
         onPointerEnter={() => setIsHovered(true)}
         onPointerLeave={() => setIsHovered(false)}
         geometry={geometry}
         material={materials}
         {...props}
-      >
-        {/* @ts-ignore */}
-        <a.meshLambertMaterial
-          map={materials.map} // TODO: render some button in a different RenderTexture, to control light pulsing diffrent rythm
-          alphaTest={0.1}
-          transparent
-          toneMapped={false}
-          emissive={0xffffff}
-          emissiveMap={materials.map}
-          emissiveIntensity={glow}
-        />
-      </mesh>
+        material-tonedMapped={false}
+        material-emissive={0xffffff}
+        material-emissiveIntensity={glow}
+        material-map={materials.map}
+        material-emissiveMap={materials.map}
+      />
     </a.group>
   );
 };

src/components/gl/Person/Person.tsx

@@ -55,7 +55,6 @@ export const Person = ({
   const ref = useRef<Mesh>(null);
   const beforeDragPosition = useRef<Vector3>(new Vector3(0, 0, 0));
   const refGroup = useRef<Group>(null);
-  const refShadow = useRef<Mesh>(null);
   const tex = useTexture('assets/dudess.png');
   const serviceId = actor.id;
 
@@ -66,15 +65,6 @@ export const Person = ({
 
   const isBeingDragged = draggingId === serviceId;
 
-  // init easings
-  const shadow = useSpring({
-    opacity: isBeingDragged ? 0.9 : 0.1,
-    color: isBeingDragged ? '#FFA500' : 'grey',
-    scale: isBeingDragged
-      ? ([1.25, 1.25, 1.25] as const)
-      : ([0.75, 0.75, 0.75] as const),
-  });
-
   // position tick for the drag back shadow
   useEffect(() => {
     if (isBeingDragged && refGroup.current) {
@@ -86,41 +76,20 @@ export const Person = ({
   useEffect(() => {
     if (ref.current && refGroup.current && !isExists.current) {
       ref.current.geometry.translate(0, PERSON_HEIGHT * 0.5, 0);
-      refGroup.current.position.copy(pos || new Vector3(-31, 0, 9));
+      refGroup.current.position.copy(pos || new Vector3(-31, 0, 11.5));
       isExists.current = true;
       actor.send('triggerStart');
     }
   }, [isExists, pos, actor]);
 
-  useFrame(({ raycaster, camera, clock }) => {
+  useFrame(({ camera, clock }) => {
     if (!ref.current || !refGroup.current || !refFloor) {
       return;
     }
 
-    // const intersects =
-    //   refFloor.current && raycaster.intersectObject(refFloor.current);
-
-    // drag
-    // if (intersects && intersects.length > 0 && isBeingDragged) {
-    //   const [intersect] = intersects;
-    //   if (isDragging) {
-    //     const newGroupPos = new Vector3(
-    //       intersect.point.x,
-    //       0,
-    //       intersect.point.z,
-    //     );
-    //     refGroup.current.position.lerp(newGroupPos, 0.1);
-    //     ref.current.position.y = MathUtils.lerp(
-    //       ref.current.position.y,
-    //       PERSON_HEIGHT * 0.15,
-    //       0.2,
-    //     );
-    //   }
-    // }
-
     if (isBeingDragged) {
       refGroup.current.position.lerp(
-        new Vector3(camera.position.x, refGroup.current.position.y, 8),
+        new Vector3(camera.position.x, refGroup.current.position.y, 11),
         0.75,
       );
     }
@@ -168,26 +137,6 @@ export const Person = ({
         <Statbar position-y={6.25} value={pee} />
         <Statbar position-y={6.5} value={hype} />
 
-        <a.mesh
-          ref={refShadow}
-          rotation-x={Math.PI * -0.5}
-          position-y={-1.1}
-          scale={shadow.scale}
-        >
-          <circleBufferGeometry />
-
-          {/* @ts-ignore */}
-          <a.meshLambertMaterial
-            transparent
-            opacity={shadow.opacity}
-            depthWrite={false}
-            color={shadow.color}
-            toneMapped={false}
-            emissive={0xf4f400}
-            emissiveIntensity={0.15}
-          />
-        </a.mesh>
-
         {/* Debug  */}
         {showActionButtons && (
           <Html>

src/components/gl/Person/PersonShadowRecall.tsx

@@ -24,7 +24,7 @@ export const PersonShadowRecall = ({
     if (refShadowRecall.current) {
       refShadowRecall.current.position.set(
         beforeDragPosition.x,
-        -0.9,
+        -1.5,
         beforeDragPosition.z,
       );
     }
@@ -43,6 +43,9 @@ export const PersonShadowRecall = ({
         opacity={shadow.opacity}
         depthWrite={false}
         color={shadow.color}
+        toneMapped={false}
+        emissive={0xffffff}
+        emissiveIntensity={1.2}
       />
     </a.mesh>
   );

src/components/gl/Scene/Scene.tsx

@@ -1,5 +1,6 @@
 import { Canvas } from '@react-three/fiber';
 import { World } from '../World/World';
+import { Stars } from '@react-three/drei';
 
 export const Scene = () => {
   return (
@@ -8,6 +9,8 @@ export const Scene = () => {
       gl={{ alpha: true, antialias: true }}
       style={{ width: '100vw', height: '100vh' }}
     >
+      <Stars />
+      <color attach="background" args={['purple']} />
       <ambientLight intensity={1.5} />
 
       <World />

src/components/gl/World/Cam.tsx

@@ -37,9 +37,9 @@ export const Cam = () => {
         distance={23}
         truckSpeed={4}
         // truckSpeed={isDragging ? -4 : 4}
-        polarAngle={DEG2RAD * 85}
-        minPolarAngle={DEG2RAD * 85}
-        maxPolarAngle={DEG2RAD * 85}
+        polarAngle={DEG2RAD * 87}
+        minPolarAngle={DEG2RAD * 87}
+        maxPolarAngle={DEG2RAD * 87}
         mouseButtons={{
           left: 2,
           wheel: 0,

src/components/gl/World/World.tsx

@@ -2,33 +2,10 @@ import { useSelector } from '@xstate/react';
 import { Suspense, useRef } from 'react';
 import type { Mesh } from 'three';
 import { useGameMachineProvider } from '../../../hooks/use';
-import { Bar } from '../Environment/HotSpot/Bar';
-import { Toilet } from '../Environment/HotSpot/Toilet';
-import { AppartmentModel } from '../House/Appartment_v1';
 import { Person } from '../Person/Person';
-import { Cam } from './Cam';
-import { useFrame } from '@react-three/fiber';
 import { PostProcess } from '../postProcess/PostProcess';
-
-function Debug() {
-  const ref = useRef<Mesh>(null);
-
-  useFrame(({ camera }) => {
-    if (!ref.current) {
-      return;
-    }
-
-    ref.current.position.copy(camera.position);
-    ref.current.position.z = 20;
-  });
-
-  return (
-    <mesh ref={ref}>
-      <boxBufferGeometry args={[1, 1, 1]} />
-      <meshBasicMaterial color="red" />
-    </mesh>
-  );
-}
+import { Cam } from './Cam';
+import { AppartmentV4 } from '../House/Appartment_v4';
 
 export const World = () => {
   const refFloor = useRef<Mesh>(null);
@@ -39,9 +16,9 @@ export const World = () => {
     <>
       <Cam />
 
-      {/* <HouseModel ref={refFloor} /> */}
+      {/* <AppartmentModelv3 ref={refFloor} position-y={-0.5} /> */}
 
-      <AppartmentModel ref={refFloor} />
+      <AppartmentV4 ref={refFloor} position-y={-0.5} />
 
       <Suspense fallback={null}>
         {persons.map((actor) => (
@@ -50,7 +27,6 @@ export const World = () => {
       </Suspense>
 
       <PostProcess />
-      {/* <Debug /> */}
     </>
   );
 };

src/machines/person.machine.ts

@@ -1,5 +1,6 @@
 import { MathUtils } from 'three';
-import { assign, createMachine } from 'xstate';
+import { assign, createMachine, send } from 'xstate';
+import { sendTo } from 'xstate/lib/actions';
 
 const METERS_CONFIG = {
   thirst: {
@@ -276,7 +277,9 @@ export const personMachine = createMachine(
         ...context,
         hotspot: event.hotspot,
       })),
-      unregisterHotspot: assign((context) => ({ ...context, hotspot: '' })),
+      unregisterHotspot: assign((context) => {
+        return { ...context, hotspot: '' };
+      }),
     },
     guards: {
       isPeeEmpty: (context) => context.meters.pee <= 0,