Feat/repair game #2
@@ -1,34 +1,25 @@
|
|||||||
import { Html } from "@react-three/drei";
|
import { WorldVideoPrompt } from "@/components/three/ui/WorldVideoPrompt";
|
||||||
import type { Vector3Tuple } from "@/types/three/three";
|
import type { Vector3Tuple } from "@/types/three/three";
|
||||||
|
|
||||||
interface RepairPromptVideoProps {
|
interface RepairPromptVideoProps {
|
||||||
src: string;
|
src: string;
|
||||||
position?: Vector3Tuple;
|
position?: Vector3Tuple;
|
||||||
size?: number;
|
size?: number;
|
||||||
|
billboard?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function RepairPromptVideo({
|
export function RepairPromptVideo({
|
||||||
src,
|
src,
|
||||||
position = [0, 1.8, 0],
|
position = [0, 1.8, 0],
|
||||||
size = 96,
|
size = 96,
|
||||||
|
billboard = true,
|
||||||
}: RepairPromptVideoProps): React.JSX.Element {
|
}: RepairPromptVideoProps): React.JSX.Element {
|
||||||
return (
|
return (
|
||||||
<Html position={position} center transform occlude={false}>
|
<WorldVideoPrompt
|
||||||
<video
|
billboard={billboard}
|
||||||
aria-hidden="true"
|
position={position}
|
||||||
autoPlay
|
size={size}
|
||||||
loop
|
src={src}
|
||||||
muted
|
/>
|
||||||
playsInline
|
|
||||||
src={src}
|
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
height: size,
|
|
||||||
objectFit: "contain",
|
|
||||||
pointerEvents: "none",
|
|
||||||
width: size,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Html>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -240,7 +240,9 @@ export function RepairRepairingStep({
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
<RepairPromptVideo src={config.interactUiPath} position={[0, 2.3, 0]} />
|
{isReadyToInstall ? (
|
||||||
|
<RepairPromptVideo src={config.interactUiPath} position={[0, 2.3, 0]} />
|
||||||
|
) : null}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { Html } from "@react-three/drei";
|
||||||
|
import type { Vector3Tuple } from "@/types/three/three";
|
||||||
|
|
||||||
|
interface WorldVideoPromptProps {
|
||||||
|
src: string;
|
||||||
|
position?: Vector3Tuple;
|
||||||
|
size?: number;
|
||||||
|
billboard?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorldVideoPrompt({
|
||||||
|
src,
|
||||||
|
position = [0, 0, 0],
|
||||||
|
size = 96,
|
||||||
|
billboard = true,
|
||||||
|
}: WorldVideoPromptProps): React.JSX.Element {
|
||||||
|
return (
|
||||||
|
<Html
|
||||||
|
position={position}
|
||||||
|
center
|
||||||
|
transform
|
||||||
|
sprite={billboard}
|
||||||
|
occlude={false}
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
aria-hidden="true"
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
src={src}
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
height: size,
|
||||||
|
objectFit: "contain",
|
||||||
|
pointerEvents: "none",
|
||||||
|
width: size,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Html>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user