Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat - implement new hotspot system and postprocess basics
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,10 +4,13 @@ Command: npx [email protected] appartment_v1.gltf -t -K -T | |
| Files: appartment_v1.gltf [18.62MB] > appartment_v1-transformed.glb [1.69MB] (91%) | ||
| */ | ||
|
|
||
| import { useGLTF } from '@react-three/drei'; | ||
| import { forwardRef } from 'react'; | ||
| import * as THREE from 'three'; | ||
| import { type GLTF } from 'three-stdlib'; | ||
| import { barMachine } from '../../../machines/bar.machine'; | ||
| import { toiletMachine } from '../../../machines/toilet.machine'; | ||
| import { AppartmentHotspot } from './HotSpots/AppartmentHotspot'; | ||
|
|
||
| type GLTFResult = GLTF & { | ||
| nodes: { | ||
|
|
@@ -97,6 +100,7 @@ export const AppartmentModel = forwardRef< | |
| const { nodes, materials } = useGLTF( | ||
| 'assets/appartment_v1-transformed.glb', | ||
| ) as GLTFResult; | ||
|
|
||
| return ( | ||
| <group {...props} dispose={null}> | ||
| <mesh ref={ref}> | ||
|
|
@@ -204,13 +208,16 @@ export const AppartmentModel = forwardRef< | |
| rotation={[Math.PI / 2, 0, 0]} | ||
| scale={4.673} | ||
| /> | ||
|
|
||
| <AppartmentHotspot | ||
| geometry={nodes.bar001.geometry} | ||
| materials={materials.bar} | ||
| position={[8.725, 1.23, 7.158]} | ||
| rotation={[-Math.PI / 2, 0, -0.191]} | ||
| scale={-5.408} | ||
| hotSpotMachine={barMachine} | ||
| /> | ||
|
|
||
| <mesh | ||
| geometry={nodes.graffitti_party.geometry} | ||
| material={materials.graffitti_party} | ||
|
|
@@ -319,12 +326,23 @@ export const AppartmentModel = forwardRef< | |
| position={[51.326, -0.712, 1.437]} | ||
| scale={11.879} | ||
| /> | ||
|
|
||
| <AppartmentHotspot | ||
| geometry={nodes.cheloupee.geometry} | ||
| materials={materials.cheloupee} | ||
| position={[50.937, 3.299, -2.056]} | ||
| rotation={[Math.PI / 2, 0, 0]} | ||
| scale={4.715} | ||
| hotSpotMachine={toiletMachine} | ||
| /> | ||
|
|
||
| <AppartmentHotspot | ||
| geometry={nodes.cheloupee.geometry} | ||
| materials={materials.cheloupee} | ||
| position={[54.937, 3.299, -2.056]} | ||
| rotation={[Math.PI / 2, 0, 0]} | ||
| scale={4.715} | ||
| hotSpotMachine={toiletMachine} | ||
| /> | ||
| <mesh | ||
| geometry={nodes.sink.geometry} | ||
|
|
@@ -359,14 +377,17 @@ export const AppartmentModel = forwardRef< | |
| materials.render_map_brick, | ||
| 8, | ||
| ]} | ||
| // @ts-ignore | ||
| instanceMatrix={nodes.render_map_brick.instanceMatrix} | ||
| /> | ||
| <instancedMesh | ||
| args={[nodes.window002.geometry, materials.window, 7]} | ||
| // @ts-ignore | ||
| instanceMatrix={nodes.window002.instanceMatrix} | ||
| /> | ||
| <instancedMesh | ||
| args={[nodes.Cube001.geometry, nodes.Cube001.material, 8]} | ||
| // @ts-ignore | ||
| instanceMatrix={nodes.Cube001.instanceMatrix} | ||
| /> | ||
| </mesh> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { a, useSpring } from '@react-spring/three'; | ||
| import type { MeshProps } from '@react-three/fiber'; | ||
| import { useInterpret } from '@xstate/react'; | ||
| import { useState } from 'react'; | ||
| import { shallow } from 'zustand/shallow'; | ||
| import { useStoreDragging } from '../../../../stores/storeDragging'; | ||
| import type { AppartmentHotSpot } from './types'; | ||
|
|
||
| export const AppartmentHotspot = ({ | ||
| geometry, | ||
| materials, | ||
| hotSpotMachine, | ||
| ...props | ||
| }: AppartmentHotSpot & MeshProps) => { | ||
| const [isHovered, setIsHovered] = useState(false); | ||
| const service = useInterpret(hotSpotMachine); | ||
|
|
||
| // TODO : use below solution when availble ===> registers hotspot machine in game machine | ||
| // const gameMachine = useGameMachineProvider(); | ||
|
|
||
| // useEffect(() => { | ||
| // gameMachine.send({ type: 'HOTSPOT_CREATED', service }); | ||
| // return () => { | ||
| // gameMachine.send({ type: 'HOTSPOT_DESTROYED', service }); | ||
| // }; | ||
| // }, []); | ||
|
|
||
| const { setIsDragging, isDragging, setDraggingId, draggingActorRef } = | ||
| useStoreDragging( | ||
| (state) => ({ | ||
| isDragging: state.isDragging, | ||
| setDraggingId: state.setDraggingId, | ||
| setIsDragging: state.setIsDragging, | ||
| draggingActorRef: state.draggingActorRef, | ||
| }), | ||
| shallow, | ||
| ); | ||
|
|
||
| // setup easings | ||
| const { glow, scale } = useSpring({ | ||
| glow: isHovered ? 2 : 1, | ||
| scale: isHovered ? [1, 1.05, 1.05] : [1, 1, 1], | ||
| }); | ||
|
|
||
| const handleOnClick = () => { | ||
| if (isDragging) { | ||
| setIsDragging(false); | ||
| setDraggingId(null); | ||
|
|
||
| draggingActorRef && | ||
| service.send({ type: 'onAddPerson', person: draggingActorRef }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| // @ts-ignore | ||
| <a.group scale={scale} onClick={handleOnClick}> | ||
| <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> | ||
| </a.group> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import type { BufferGeometry, MeshStandardMaterial } from 'three'; | ||
| import type {} from 'xstate'; | ||
| import type { toiletMachine } from '../../../../machines/toilet.machine'; | ||
| import type { barMachine } from '../../../../machines/bar.machine'; | ||
|
|
||
| export type AppartmentHotSpot = { | ||
| geometry: BufferGeometry; | ||
| materials: MeshStandardMaterial; | ||
| hotSpotMachine: typeof barMachine | typeof toiletMachine; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,7 +21,7 @@ const fragmentShader = ` | |
| } | ||
| gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); | ||
| } | ||
| `; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.