@playcanvas/react/dist/components/Render.js

A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.

"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useComponent } from "../hooks/index.js";
import { Container } from "../Container.js";
import { Asset, Entity } from "playcanvas";
import { getStaticNullApplication, validatePropsPartial } from "../utils/validation.js";
import { createComponentDefinition } from "../utils/validation.js";
const RenderComponent = (props) => {
    // console.log('RenderComponent', props.material.diffuse);
    useComponent("render", props, componentDefinition.schema);
    return null;
};
/**
 * A Render component allows an entity to render a 3D model. You can specify the type of model to render with the `type` prop,
 * which can be a primitive shape, or a model asset.
 *
 * @param {RenderProps} props - The props to pass to the render component.
 * @see https://api.playcanvas.com/engine/classes/RenderComponent.html
 *
 * @example
 * const { data: asset } = useAsset('./statue.glb')
 * <Entity name='Box'   >
 *  <Render type="box" />
 * </Entity>
 *
 * @example
 * <Entity name='asset'>
 *  <Render type="asset" asset={asset} />
 * </Entity>
 */
export const Render = (props) => {
    // console.log('Render', props.material.diffuse);
    const safeProps = validatePropsPartial(props, componentDefinition);
    // Don't render if the type is asset and the asset is not provided
    if (safeProps.type === "asset" && !safeProps.asset)
        return null;
    // Render a container if the asset is a container
    if (safeProps.asset?.type === 'container') {
        return _jsx(Container, { asset: safeProps.asset, children: safeProps.children });
    }
    // console.log('safeProps', safeProps);
    // Otherwise, render the component
    return _jsx(RenderComponent, { ...safeProps });
};
const primitiveTypes = ["asset", "box", "capsule", "cone", "cylinder", "plane", "sphere", "torus"];
const componentDefinition = createComponentDefinition("Render", () => new Entity('mock-render', getStaticNullApplication()).addComponent('render'), (component) => component.system.destroy(), "RenderComponent");
componentDefinition.schema = {
    ...componentDefinition.schema,
    children: {
        validate: (value) => typeof value === 'object' && value !== null,
        errorMsg: (value) => `Invalid value for prop "children": ${value}. Expected an object.`,
        default: undefined
    },
    asset: {
        validate: (value) => !value || value instanceof Asset,
        errorMsg: (value) => `Invalid value for prop "asset": ${value}. Expected an Asset.`,
        default: undefined
    },
    type: {
        validate: (value) => typeof value === 'string' && primitiveTypes.includes(value),
        errorMsg: (value) => `Invalid value for prop "type": ${value}. Expected one of: "${primitiveTypes.join('", "')}".`,
        default: "box"
    }
};
export default Render;
//# sourceMappingURL=Render.js.map