The hooks are useful to get access to scene or engine object or get access to
render loop or hover/click on meshes, etc. The hooks for SceneLoader and
AssetManager require that the component using them be enclosed in Suspense
.
(This is just generated for now and needs cleanup + examples)
Due to using code generation from the Babylon typings, all of these declarative elements will adhere to the same API (See CustomProps below for exceptions) as you find on Babylon.js documentation site:
If you want to declaratively use something not listed here create an issue :) Some extensions have been added to allow for declarative scene creation (ie: Shadows, Textures, etc.)
-
Node -> Mesh - abstractMesh, goldbergMesh, greasedLineBaseMesh, greasedLineMesh, greasedLineRibbonMesh, groundMesh, instancedLinesMesh, instancedMesh, linesMesh, mesh, trailMesh
-
Cameras - anaglyphArcRotateCamera, anaglyphFreeCamera, anaglyphGamepadCamera, anaglyphUniversalCamera, arcFollowCamera, arcRotateCamera, camera, deviceOrientationCamera, flyCamera, followCamera, freeCamera, gamepadCamera, stereoscopicArcRotateCamera, stereoscopicFreeCamera, stereoscopicGamepadCamera, stereoscopicScreenUniversalCamera, stereoscopicUniversalCamera, targetCamera, touchCamera, universalCamera, virtualJoysticksCamera, vrDeviceOrientationArcRotateCamera, vrDeviceOrientationFreeCamera, vrDeviceOrientationGamepadCamera, webXrCamera
-
Geometries (meshes) - box, capsule, cylinder, dashedLines, decal, disc, extrudePolygon, extrudeShape, extrudeShapeCustom, geodesic, goldberg, ground, groundFromHeightMap, icoSphere, lathe, lines, lineSystem, plane, babylon-polygon, polyhedron, ribbon, sphere, babylon-text, tiledBox, tiledGround, tiledPlane, torus, torusKnot, tube
note:
babylon-polygon
andbabylon-text
instead ofpolygon
due to JSX conflict withReact.SVGProps<SVGPolygonElement>
-
Materials - backgroundMaterial, fluentBackplateMaterial, fluentButtonMaterial, fluentMaterial, greasedLineSimpleMaterial, handleMaterial, material, mrdlBackglowMaterial, mrdlBackplateMaterial, mrdlFrontplateMaterial, mrdlInnerquadMaterial, mrdlSliderBarMaterial, mrdlSliderThumbMaterial, multiMaterial, nodeMaterial, occlusionMaterial, pbrBaseMaterial, pbrBaseSimpleMaterial, pbrMaterial, pbrMetallicRoughnessMaterial, pbrSpecularGlossinessMaterial, pushMaterial, shaderMaterial, standardMaterial
note: Materials can have configuration (read-only) properties as classes. With
assignFrom
prop you can declare detailMapConfiguration, imageProcessingConfiguration pbrClearCoatConfiguration, pbrIridescenceConfiguration, pbrAnisotropicConfiguration, pbrbrdfConfiguration, pbrSheenConfiguration, pbrSubSurfaceConfiguration or prePassConfiguration to attach to declaratively. PBRBaseMaterial has all, while StandardMaterial has only detailMapConfiguration. (prePassConfiguration has no updateable properties, but can be attached).
-
Lights - directionalLight, hemisphericLight, light, pointLight, shadowLight, spotLight
-
Textures - advancedDynamicTexture, baseTexture, colorGradingTexture, cubeTexture, customProceduralTexture, dynamicTexture, equiRectangularCubeTexture, hdrCubeTexture, htmlElementTexture, mirrorTexture, multiRenderTarget, multiviewRenderTarget, noiseProceduralTexture, prePassRenderTarget, proceduralTexture, rawCubeTexture, rawTexture, rawTexture2DArray, rawTexture3D, refractionTexture, renderTargetTexture, texture, thinRenderTargetTexture, thinTexture, videoTexture, xrSpaceWarpRenderTarget
-
EffectLayers - effectLayer, glowLayer, highlightLayer
-
Behaviors - autoRotationBehavior, bouncingBehavior, framingBehavior, attachToBoxBehavior, fadeInOutBehavior, followBehavior, handConstraintBehavior, multiPointerScaleBehavior, pointerDragBehavior, sixDofDragBehavior, surfaceMagnetismBehavior
-
PostProcessRenderPipelines: defaultRenderingPipeline, lensRenderingPipeline, postProcessRenderPipeline, ssao2RenderingPipeline, ssaoRenderingPipeline, ssrRenderingPipeline, standardRenderingPipeline
-
PostProcesss anaglyphPostProcess, blackAndWhitePostProcess, bloomMergePostProcess, blurPostProcess, chromaticAberrationPostProcess, circleOfConfusionPostProcess, colorCorrectionPostProcess, convolutionPostProcess, depthOfFieldBlurPostProcess, depthOfFieldMergePostProcess, displayPassPostProcess, extractHighlightsPostProcess, filterPostProcess, fxaaPostProcess, grainPostProcess, highlightsPostProcess, imageProcessingPostProcess, motionBlurPostProcess, passCubePostProcess, passPostProcess, postProcess, refractionPostProcess, screenSpaceCurvaturePostProcess, screenSpaceReflectionPostProcess, sharpenPostProcess, stereoscopicInterlacePostProcess, stereoscopicInterlacePostProcessI, subSurfaceScatteringPostProcess, tonemapPostProcess, volumetricLightScatteringPostProcess, vrDistortionCorrectionPostProcess, vrMultiviewToSingleviewPostProcess
note: for
PostProcess
(andPostProcessRenderPipeline
) theImageProcessingConfiguration
andPrePassConfiguration
properties can be declared withassignFrom
. -
Gizmo axisDragGizmo, axisScaleGizmo, boundingBoxGizmo, cameraGizmo, gizmo, lightGizmo, planeDragGizmo, planeRotationGizmo, positionGizmo, rotationGizmo, scaleGizmo, slateGizmo
-
Sprites spriteManager, spritePackedManager, thinSprite, sprite
-
Sound sound
-
Others - adtForMesh, adtForMeshTexture, adtFullScreenUi, environmentHelper, physicsImpostor, pointsCloudSystem, shadowGenerator / cascadedShadowGenerator, layer, utilityLayerRenderer, viewport, vrExperienceHelper
-
GUI3DManager
-
2D Controls - scrollViewerWindow, baseSlider, 'babylon-button', checkbox, colorPicker, container, control, displayGrid, 'babylon-ellipse', focusableButton, grid, 'babylon-image', imageBasedSlider, imageScrollBar, inputPassword, inputText, inputTextArea, 'babylon-line', multiLine, radioButton, rectangle, scrollBar, scrollViewer, selectionPanel, slider, stackPanel, textBlock, toggleButton, virtualKeyboard
note: 'babylon-*' for
button
,ellipse
,image
&line
due to JSX conflict withReact.SVGProps<T>
, otherwise use the ProperCase equivalent, but you miss editor auto-completion. -
3D Controls - abstractButton3D, button3D, container3D, contentDisplay3D, control3D, cylinderPanel, handMenu, holographicBackplate, holographicButton, holographicSlate, meshButton3D, nearMenu, planePanel, scatterPanel, slider3D, spherePanel, stackPanel3D, touchButton3D, touchHolographicButton, touchHolographicMenu, touchMeshButton3D, volumeBasedPanel
- dynamicTerrain
To be able to allow more declarative capabilities there are additional props that are not on the default babylonjs object. Other than these properties the React host elements follow the babylon API docs. These are all optional.
assignTo
- Assign to this property on the parent. Parent property is cleared on unmount (ie: texture can be assigned to bump/diffuse/etc.)assignFrom
- Assigned from a parent property and then participates with props (ie: PBR configurations or PostProcess properties like grain)fromInstance
- Attach an instance you create (or want re-used) and the renderer will use that instance instead.disposeInstanceOnUnmount
- Applicable only when usingfromInstance
. Defaults tofalse
, but you can set to true for automatic cleanup.
createForParentMesh
- Same as factory method for attaching an ADT to a plane and then the child components are 2D controls.
childrenAsContent
- for 3D control ".content" (which is 2D)linkToTransformNodeByName
-for Control3D, which has position, but not other properties like rotationonControlAdded
- callback when control is added.
addIncludeOnlyChildren
- Adds all child nodes to the glow layer (and nothing else).
attachToMeshesByName
- For attaching the same material to multiple meshes (by mesh name)
childMeshesNotTracked
- Useful if you attach children to a mesh and want the child meshes to participate in GlowLayer or ShadowGenerator (see props below).
shadowCasters
- string array of mesh names to search for, which will be added as shadow casters.shadowCastersExcluding
- string array of mesh names to exclude from casting shadows (all other meshes by name will cast shadows)shadowCastChildren
- adds all child nodes as shadow casters.
connectControlNames
- 2d input control namesdefaultKeyboard
- Use default keyboard
enableInteractions
- callenableInteractions()
.