Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import React, { memo, useEffect } from 'react';
import { Entity } from '@playcanvas/react';
import { GSplat } from '@playcanvas/react/components';
import { useSplat } from '@playcanvas/react/hooks';
import BlockingSpinner from './BlockingSpinner';
import SplatCrop from './SplatCrop';
import SplatFadeCrop from './SplatFadeCrop';
import SplatRevealRain from './SplatRevealRain';
export interface SplatModelProps {
splatSrc: string;
rotation?: [number, number, number];
cropAabbMin?: [number, number, number];
cropAabbMax?: [number, number, number];
cropEdgeScaleFactor?: number;
cropFade?: boolean;
cropFadeDistance?: number;
revealRain?: boolean;
onError?: (error: Error) => void;
}
const SplatModel = ({
splatSrc,
rotation,
cropAabbMin,
cropAabbMax,
cropEdgeScaleFactor,
cropFade = false,
cropFadeDistance = 0.5,
revealRain = false,
onError,
}: SplatModelProps) => {
// A filename is required for the file props to assist with the asset loading. Otherwise it assumes that the splatSrc is a ply file.
const { asset, loading, error } = useSplat(splatSrc, { file: { filename: 'model.sog' } });
useEffect(() => {
if (error) {
onError?.(new Error(error));
}
}, [error, onError]);
if (loading) {
return <BlockingSpinner />;
}
if (!asset) {
return null;
}
return (
<Entity name='splat' rotation={rotation}>
<GSplat asset={asset} unified />
{(cropAabbMin || cropAabbMax) &&
(cropFade ? (
<SplatFadeCrop aabbMin={cropAabbMin} aabbMax={cropAabbMax} fadeDistance={cropFadeDistance} />
) : (
<SplatCrop aabbMin={cropAabbMin} aabbMax={cropAabbMax} edgeScaleFactor={cropEdgeScaleFactor} />
))}
<SplatRevealRain enabled={revealRain} />
</Entity>
);
};
export default memo(SplatModel);
|