@playcanvas/react
Version:
A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.
48 lines • 2 kB
JavaScript
"use client";
import { useLayoutEffect, useRef } from "react";
import { useParent } from "../hooks";
import { Entity } from "playcanvas";
import { validateAndSanitizeProps, createComponentDefinition, getStaticNullApplication } from "../utils/validation";
/**
* The GSplat component allows an entity to render a Gaussian Splat.
* @param {GSplatProps} props - The props to pass to the GSplat component.
* @see https://api.playcanvas.com/engine/classes/GSplatComponent.html
* @example
* const { data: splat } = useSplat('./splat.ply')
* <GSplat asset={splat} />
*/
export const GSplat = (props) => {
const safeProps = validateAndSanitizeProps(props, componentDefinition);
const { asset, vertex, fragment } = safeProps;
const parent = useParent();
const assetRef = useRef(null);
useLayoutEffect(() => {
if (asset) {
assetRef.current = asset.resource.instantiate({ vertex, fragment });
if (assetRef.current)
parent.addChild(assetRef.current);
}
return () => {
if (!assetRef.current)
return;
parent.removeChild(assetRef.current);
};
}, [asset]);
return null;
};
const componentDefinition = createComponentDefinition("GSplat", () => new Entity("mock-gsplat", getStaticNullApplication()).addComponent('gsplat'), (component) => component.system.destroy(), "GSplatComponent");
// include additional props
componentDefinition.schema = {
...componentDefinition.schema,
vertex: {
validate: (value) => typeof value === 'string',
errorMsg: (value) => `Vertex shader must be a string, received ${value}`,
default: null // Allows engine to handle the default shader
},
fragment: {
validate: (value) => typeof value === 'string',
errorMsg: (value) => `Fragment shader must be a string, received ${value}`,
default: null // Allows engine to handle the default shader
}
};
//# sourceMappingURL=GSplat.js.map