Skip to content
flatland

observable

const observable: object

Defined in: packages/three-flatland/src/observable/index.ts:307

Observable strategies for three.js value types. Call a strategy’s attach(value, notify) directly to make a value fire notify on in-place mutation (R3F compat).

  • observable.color — Color (r, g, b)
  • observable.vector2 — Vector2 (x, y)
  • observable.vector3 — Vector3 (x, y, z)
  • observable.euler — Euler (x, y, z, order) — hooks into three’s existing _onChangeCallback rather than installing accessors

Type Declaration

Section titled “Type Declaration”

color

Section titled “color”

readonly color: object

color.attach

Section titled “color.attach”

attach: (c, notify) => void = attachColor

Parameters
Section titled “Parameters”
c
Section titled “c”

Color 

notify
Section titled “notify”

() => void

Returns
Section titled “Returns”

void

color.snapshot

Section titled “color.snapshot”

snapshot: (c) => Snapshot = snapshotColor

Parameters
Section titled “Parameters”
c
Section titled “c”

Color 

Returns
Section titled “Returns”

Snapshot

euler

Section titled “euler”

readonly euler: object

euler.attach

Section titled “euler.attach”

attach: (e, notify) => void = attachEuler

Parameters
Section titled “Parameters”
e
Section titled “e”

Euler 

notify
Section titled “notify”

() => void

Returns
Section titled “Returns”

void

euler.snapshot

Section titled “euler.snapshot”

snapshot: (e) => Snapshot = snapshotEuler

Parameters
Section titled “Parameters”
e
Section titled “e”

Euler 

Returns
Section titled “Returns”

Snapshot

vector2

Section titled “vector2”

readonly vector2: object

vector2.attach

Section titled “vector2.attach”

attach: (v, notify) => void = attachVector2

Parameters
Section titled “Parameters”
v
Section titled “v”

Vector2 

notify
Section titled “notify”

() => void

Returns
Section titled “Returns”

void

vector2.snapshot

Section titled “vector2.snapshot”

snapshot: (v) => Snapshot = snapshotVector2

Parameters
Section titled “Parameters”
v
Section titled “v”

Vector2 

Returns
Section titled “Returns”

Snapshot

vector3

Section titled “vector3”

readonly vector3: object

vector3.attach

Section titled “vector3.attach”

attach: (v, notify) => void = attachVector3

Parameters
Section titled “Parameters”
v
Section titled “v”

Vector3 

notify
Section titled “notify”

() => void

Returns
Section titled “Returns”

void

vector3.snapshot

Section titled “vector3.snapshot”

snapshot: (v) => Snapshot = snapshotVector3

Parameters
Section titled “Parameters”
v
Section titled “v”

Vector3 

Returns
Section titled “Returns”

Snapshot

DocsExamples

Getting Started

IntroductionInstallationQuick Start

Concepts

The Flatland PipelineBatch Rendering2D LightingShadows & OcclusionDevtools Architecture

Guides

SpritesSet up a Flatland sceneAlpha API MigrationPixel-Perfect RenderingAnimationLoadersTilemapsHit TestingLightingShadowsBakingTSL NodesPass EffectsSkiaSlug TextDevtools

Resources

BrandingLLMs

API Reference

nodes/src
Interfaces
CRTOptionsDissolveOptionsLight2DResultLitSpriteOptionsOutlineOptions
Type Aliases
ColorInputFloatInputVec2InputVec3InputVec4Input
Functions
afterimageafterimageGlowafterimageTintedalphaMaskalphaMaskInvertalphaMaskValuealphaTestalphaTestOpaqueambientLight2DanalogGlitchbayerDitherbayerDither2x2bayerDither4x4bayerDither8x8bloombloomAnamorphicbloomSimplebloomThresholdblurBoxblurBox3x3blurBoxDirectionalblurBoxSmoothblurFocusblurGaussianblurGaussian2PassblurGaussian9blurKawaseblurKawaseDownblurKawaseMultiblurKawaseSimpleblurKawaseUpblurMotionblurMotionObjectblurMotionVelocityblurRadialblurRadialDistanceblurShakeblurSpinbrightnessbrightnessClampedbrightnessMultiplyc64PalettecgaPalettechromaticAberrationchromaticAberrationCustomchromaticAberrationPulsechromaticAberrationRadialcolorBleedingcolorRemapcolorRemapCustomcolorReplacecolorReplaceHardcolorReplaceMultiplecontrastcontrastSCurvecrtBloomcrtColorBleedcrtCompletecrtConvergencecrtCurvaturecrtCurvatureWithCornerscrtVignettedirectionalLight2DdissolvedissolveDirectionaldissolvePixelateddissolveSimpledistortBarreldistortBulgedistortDisplacedistortNoisedistortPerlindistortPinchdistortPixelatedistortPixelateCountdistortShatterdistortSimplexdistortSpherizedistortTurbulencedistortTwirldmgPalettedotMatrixeaglefadeEdgefadeEdgeHorizontalfadeEdgeRadialfadeEdgeVerticalfilmGrainflashflashAdditiveflashAlphaflashDamageflashHealflashPowerUpflashSmoothgbcPaletteghostghostSpeedghostTrailglowSelectivegrayscalehq2xhq3xhq4xhueShifthueShiftNormalizedinterlacinglcdBacklightBleedlcdGBClcdGhostinglcdGridlcdMotionGhostlcdPocketlinearRgbToOklablinearRgbToOklchlitCelShadedlitDiffuselitRimlitSpecularlitSpritelitSpriteMultimd9bitPalettenormalFromHeightnormalFromHeightSmoothntscCompositeoklabLerpoklabToLinearRgboklabToRgboklchHueShiftoklchLerpoklchLightnessoklchSaturateoklchToLinearRgboklchToRgboutlineoutline8palettizepalettizeDitheredpalettizeNearestphosphorApertureGrillephosphorMaskphosphorShadowMaskphosphorSimplephosphorSlotMaskpixelatepixelateBySizepocketPalettepointLight2DposterizeposterizeGammappuPalettepulsepulseGlowpulseHeartbeatpulseRadialpulseRainbowquantizequantizeRGBrgbToOklabrgbToOklchsai2xsampleSpritesaturatescale2xscale3xscanlinesscanlinesGlowscanlinesGridscanlinesInterlacedscanlinesSmoothshadow2DshadowDropshadowDropSoftshadowSDF2DshadowSoft2DshimmershimmerHolographicshimmerMetallicshimmerWavesignalInterferencesnesPalettesparklesparkleRainbowsparkleStarspeedLinesspotLight2DspriteUVstaticNoisesuperEagletinttintAdditivetrailtrailAdditivetrailBlurtrailVelocityuvFlipuvOffsetuvRotateuvScalevbPalettevhsDistortionvignettewaveHorizontalwaveRadialwaveRipplewaveVerticalwaveWater
presets/src
Variables
DefaultLightEffectNormalMapProvider
three-flatland/src
Classes
AlphaMapAnimatedSprite2DAnimationControllerBatchQueryViewEffectMaterialFlatlandFlatlandConfigForwardPlusLightingGlobalUniformsLDtkLoaderLight2DLightEffectMaterialEffectPassEffectPixelPerfectCameraRenderingConfigSortLayerSortLayerGroupSprite2DSprite2DMaterialSpriteGroupSpriteSheetLoaderTextureConfigTextureLoaderTiledLoaderTileLayerTileMap2DTileset
Interfaces
AnimatedSprite2DOptionsAnimationAnimationFrameAnimationSetDefinitionAnimationStateAtlasJsonBatchKeyBatchQueryTagChannelNodeContextChannelNodeMapChunkCoordColorTransformContextDevtoolsProviderHandleEffectFieldEffectMaterialOptionsEffectNodeContextFlatlandConfigOptionsFlatlandOptionsInstanceAttributeConfigLDtkLoaderOptionsLight2DOptionsLight2DUniformsLightEffectBuildContextLightEffectRuntimeContextNormalRegionNormalSourceDescriptorObjectLayerDataOcclusionPassOptionsOklabOklchPassEffectContextPixelPerfectCameraOptionsPlayOptionsRayPlaneHitRemoteBridgeHandleRenderingOptionsRenderStatsResolveAlphaMapOptionsSortLayerConfigSortLayerDescriptorSortLayerRegistrySprite2DMaterialOptionsSprite2DOptionsSpriteFrameSpriteFrameRectSpriteGroupOptionsSpriteSheetSpriteSheetJSONArraySpriteSheetJSONHashSpriteSheetLoaderOptionsTextureLoaderOptionsTextureOptionsTileAnimationFrameTileDefinitionTiledLoaderOptionsTileInstanceTileLayerDataTileLayerOptionsTileMap2DOptionsTileMapDataTileMapObjectTileNormalCustomDataTilesetCellTilesetDataTilesetGridTilesetGridOptionsWebSocketLike
Type Aliases
BlendModeBuiltInSortLayerChannelNameClipRectCollisionShapeColorTransformFnEffectConstantsEffectSchemaEffectSchemaValueEffectValuesFlatlandPresetFlatlandSettingHitTestModeInstanceAttributeTypeLight2DTypeLightEffectClassMaterialEffectClassNormalBumpNormalDirectionObservableStrategyPassEffectClassPassEffectFnPixelScaleRenderingPresetRenderingSettingSnapshotSortLayerNameSortLayerValueSortModeSpriteSortFunctionTexturePresetTileLookupFnUniformKeysWithRequiredChannels
Variables
ALL_HIT_TEST_MODESALPHA_SIDECAR_DESCRIPTORchannelDefaultsEFFECT_BIT_OFFSETFLATLAND_PRESETSIsAlphaBlendedBatchIsAlphaTestedBatchIsLitBatchIsUnlitBatchLIT_FLAG_MASKMAX_LIGHTS_PER_TILEobservableRECEIVE_SHADOWS_MASKRENDERING_PRESETSSortLayersTEXTURE_PRESETSTILE_SIZEVERSION
Functions
analogousapplyHierarchicalPresetsapplyTextureOptionsbuildTilesetGridclampOklchcolorToOklabcolorToOklchcomplementarycomputeTierconcatAnimationscontrastRatiocreateAnimationcreateAnimationFromPatterncreateAnimationsFromNamingcreateConsumerRemoteBridgecreateDevtoolsProvidercreateIntersectioncreateLightEffectcreateMaterialEffectcreatePassEffectcreateProviderRemoteBridgedeclareSortLayerdecodeAlphaPngdecodeDebugMessagedecodeSortKeydeltaEOklabencodeDebugMessageencodeSortKeyequallySpacedHuesframesToRegionsgamutMapOklchgetPackedComponentgetSortLayergradientOklchisDevtoolsActiveisInGamutisLight2DlerpOklablerpOklchlinearRgbToOklablinearToSrgbmonochromaticPaletteoklabToColoroklabToLinearRgboklabToOklchoklchToColoroklchToOklabrayPlaneZ0readCastShadowFlagreadEnableBitsreadFlipreadLitFlagreadReceiveShadowsFlagreadShadowRadiusreadSystemFlagsregisterDebugArrayregisterDebugTexturerelativeLuminanceresolveAlphaMapresolveHitTestModeresolvePixelPerfectresolveRenderingOptionsresolveSortLayerresolveTextureOptionsreverseAnimationshallowEqualsplitComplementarysrgbToLineartetradictilesetCellAttilesetToRegionstileToRegionstouchDebugArraytouchDebugTexturetriadicunregisterDebugArrayunregisterDebugTextureuvToWorldwcagLevelwholeTextureRegionworldToUVwrapWithLightFlags
three-flatland/src/react
Interfaces
UsePixelPerfectCameraBindingOptionsUsePixelPerfectCameraOptions
Type Aliases
EffectElementLightEffectElement
Functions
attachEffectattachLightingcreateFlatlandComputeusePixelPerfectCamerausePixelPerfectCameraBinding