@playcanvas/react
Version:
A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.
143 lines • 7.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Examples demonstrating the GLTF Declarative Modification API
*
* This file contains various usage examples showing how to use the
* Gltf and Modify components to declaratively modify
* loaded GLTF assets.
*/
import { Gltf, Modify, useEntity } from "./index.js";
import { useModel } from "../hooks/use-asset.js";
import { Light } from "../components/Light.js";
import { Render } from "../components/Render.js";
import { Entity } from "../Entity.js";
/**
* Example 1: Basic Usage - Render GLTF with default visuals
*/
export function Example1_BasicUsage() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset }, asset.id));
}
/**
* Example 2: Remove Components - Remove all lights from the scene
*/
export function Example2_RemoveComponents() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: "[light]", children: _jsx(Modify.Light, { remove: true }) }) }, asset.id));
}
/**
* Example 3: Modify Components - Change light properties with prop merging
*/
export function Example3_ModifyComponents() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: "[light]", children: _jsx(Modify.Light, { color: "red", intensity: 2 }) }) }, asset.id));
}
/**
* Example 4: Functional Updates - Use functions to update based on existing values
*/
export function Example4_FunctionalUpdates() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: "[light]", children: _jsx(Modify.Light, { intensity: (val) => (val || 1) * 2, castShadows: true }) }) }, asset.id));
}
/**
* Example 5: Add Children - Add new entities to matched nodes
*/
export function Example5_AddChildren() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: "Head", children: _jsx(Entity, { name: "HelmetLight", position: [0, 1, 0], children: _jsx(Light, { type: "omni", color: "yellow", intensity: 3 }) }) }) }, asset.id));
}
/**
* Example 6: Clear Children - Remove all children and replace
*/
export function Example6_ClearChildren() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: "Head", clearChildren: true, children: _jsx(Entity, { name: "NewHelmet", children: _jsx(Render, { type: "box" }) }) }) }, asset.id));
}
/**
* Example 7: Wildcard Patterns - Modify all children with wildcards
*/
export function Example7_WildcardPatterns() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsxs(Gltf, { asset: asset, children: [_jsx(Modify.Node, { path: "Body.*", children: _jsx(Modify.Render, { castShadows: false }) }), _jsx(Modify.Node, { path: "Arm.**", children: _jsx(Entity, { name: "Glow", children: _jsx(Light, { type: "omni", color: "green" }) }) })] }, asset.id));
}
/**
* Example 8: Combined Queries - Mix path and component filters
*/
export function Example8_CombinedQueries() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: "Head.*[light]", children: _jsx(Modify.Light, { color: "orange" }) }) }, asset.id));
}
/**
* Example 9: Predicate Functions - Use custom logic for matching
*/
export function Example9_PredicateFunctions() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: (entity) => {
// Match entities with "weapon" in the name
return entity.name.toLowerCase().includes('weapon');
}, children: _jsx(Modify.Render, { castShadows: true }) }) }, asset.id));
}
/**
* Example 10: Multiple Rules - Apply multiple modifications
*/
export function Example10_MultipleRules() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsxs(Gltf, { asset: asset, children: [_jsx(Modify.Node, { path: "[light]", children: _jsx(Modify.Light, { remove: true }) }), _jsx(Modify.Node, { path: "Head", children: _jsx(Entity, { name: "MainLight", children: _jsx(Light, { type: "directional", color: "white", intensity: 1 }) }) }), _jsx(Modify.Node, { path: "**[render]", children: _jsx(Modify.Render, { receiveShadows: true }) })] }, asset.id));
}
/**
* Example 11: Using useEntity Hook - Find entities within children
*/
function HandGlow() {
// Find the hand entity relative to current parent
const handEntity = useEntity('Hand');
if (!handEntity)
return null;
return (_jsx(Entity, { name: "HandGlow", position: [0, 0.1, 0], children: _jsx(Light, { type: "omni", color: "cyan", intensity: 2 }) }));
}
export function Example11_UseEntityHook() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsx(Gltf, { asset: asset, children: _jsx(Modify.Node, { path: "Arm", children: _jsx(HandGlow, {}) }) }, asset.id));
}
/**
* Example 12: Specificity and Conflict Resolution
* More specific rules win over less specific ones
*/
export function Example12_Specificity() {
const { asset } = useModel('model.glb');
if (!asset)
return null;
return (_jsxs(Gltf, { asset: asset, children: [_jsx(Modify.Node, { path: "[light]", children: _jsx(Modify.Light, { color: "red" }) }), _jsx(Modify.Node, { path: "Head.Helmet[light]", children: _jsx(Modify.Light, { color: "blue" }) })] }, asset.id));
}
/**
* Example 13: Complex Scene Modification
* Combines multiple techniques for a complete scene transformation
*/
export function Example13_ComplexModification() {
const { asset } = useModel('robot.glb');
if (!asset)
return null;
return (_jsxs(Gltf, { asset: asset, children: [_jsx(Modify.Node, { path: "**[light]", children: _jsx(Modify.Light, { remove: true }) }), _jsx(Modify.Node, { path: "**[render]", children: _jsx(Modify.Render, { castShadows: true, receiveShadows: true }) }), _jsx(Modify.Node, { path: "Head", children: _jsx(Entity, { name: "HeadLight", position: [0, 0.5, 0], children: _jsx(Light, { type: "omni", color: "#00ff00", intensity: 3, range: 5 }) }) }), _jsx(Modify.Node, { path: "Body.Chest", children: _jsx(Entity, { name: "ChestGlow", position: [0, 0, 0.2], children: _jsx(Light, { type: "spot", color: "#0088ff", intensity: 2 }) }) }), _jsx(Modify.Node, { path: "Arm.Right.WeaponMount", clearChildren: true, children: _jsxs(Entity, { name: "NewWeapon", rotation: [0, 90, 0], children: [_jsx(Render, { type: "cylinder" }), _jsx(Entity, { name: "WeaponLight", position: [0, 0, 1], children: _jsx(Light, { type: "spot", color: "red", intensity: 5 }) })] }) })] }, asset.id));
}
//# sourceMappingURL=examples.js.map