How to use troika-core - 10 common examples

}
    }
    return hits && hits.length ? hits : null
  }


  destructor() {
    this.layers.destructor()
    super.destructor()
  }
}

// Extend as FlexNode
const UIBlock3DFacade$FlexNode = UIBlock3DFacade = extendAsFlexNode(UIBlock3DFacade)

utils.assign(UIBlock3DFacade.prototype, {
  font: 'inherit',
  fontSize: 'inherit',
  lineHeight: 'inherit',
  letterSpacing: 'inherit',
  whiteSpace: 'inherit',
  overflowWrap: 'inherit',
  color: 'inherit'
})



function wheelHandler(e) {
  if (!e._didScroll) {
    const facade = e.currentTarget
    let {deltaX, deltaY, deltaMode} = e.nativeEvent
    let deltaMultiplier

this.isXRInputSource = true

    // Required props
    this.xrInputSource = null
    this.xrSession = null
    this.xrReferenceSpace = null

    // Current frame state data, passed to all children:
    this.targetRayPose = null
    this.gripPose = null
    this.rayIntersection = null

    // Child object configs:
    this.cursor = utils.assign(DEFAULT_CURSOR)
    this.targetRay = utils.assign(DEFAULT_TARGET_RAY)
    this.grip = utils.assign(DEFAULT_GRIP)

    // Pointing - true for all inputs by default
    this.isPointing = true

    this.children = [
      null, //cursor
      null, //targetRay
      null //grip
    ]

    this._ray = new Ray()

    this._onSessionEvent = this._onSessionEvent.bind(this)
    this._onSceneRayEvent = this._onSceneRayEvent.bind(this)
    this.addEventListener('xrframe', this._onXrFrame.bind(this))

this.worldTexture.image = canvas

          innerWorld = this._worldFacade = new newWorldConfig.facade(canvas)

          // Trigger texture update whenever the inner world is rerendered
          innerWorld.onAfterRender = () => {
            this.worldTexture.needsUpdate = true
            this.notifyWorld('needsRender')
          }
        }
      }

      // Update the inner world
      if (innerWorld) {
        innerWorld.renderingScheduler = this._getOuterWorld().renderingScheduler
        utils.assign(innerWorld, newWorldConfig)
        innerWorld.afterUpdate()
      }

      super.afterUpdate()
    }

import { utils } from 'troika-core'
import Object2DFacade from './Object2DFacade'

class Text2DFacade extends Object2DFacade {
  render(context) {
    context.font = `${ this.fontStyle } ${ this.fontWeight } ${ this.fontStretch } ${ this.fontSize } ${ this.fontFamily }`
    context.textAlign = this.textAlign
    context.textBaseline = this.textBaseline
    context.fillStyle = this.color
    context.globalAlpha = this.opacity
    context.fillText(this.text, 0, 0)
  }
}

// Defaults
utils.assign(Text2DFacade.prototype, {
  color: '#fff',
  fontFamily: 'sans-serif',
  fontSize: '12px',
  fontStretch: '',
  fontStyle: '',
  fontWeight: '',
  textAlign: 'start',
  textBaseline: 'alphabetic',
  text: '',
  opacity: 1
})

export default Text2DFacade

mousedown: 'xrsqueezestart',
    mouseup: 'xrsqueezeend',
    click: 'xrsqueeze'
  },
  // TODO decide on event names, and handle touching without press:
  // all: {
  //   mousedown: 'xrbuttondown',
  //   mouseup: 'xrbuttonup',
  //   click: 'xrbuttonclick'
  // }
}

// ...and add shortcut event handler properties on Object3DFacade for those events:
Facade.defineEventProperty(Object3DFacade, 'onXRSelectStart', 'xrselectstart')
Facade.defineEventProperty(Object3DFacade, 'onXRSelect', 'xrselect')
Facade.defineEventProperty(Object3DFacade, 'onXRSelectEnd', 'xrselectend')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeStart', 'xrsqueezestart')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueeze', 'xrsqueeze')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeEnd', 'xrsqueezeend')


export default XRInputSourceFacade

},
  // TODO decide on event names, and handle touching without press:
  // all: {
  //   mousedown: 'xrbuttondown',
  //   mouseup: 'xrbuttonup',
  //   click: 'xrbuttonclick'
  // }
}

// ...and add shortcut event handler properties on Object3DFacade for those events:
Facade.defineEventProperty(Object3DFacade, 'onXRSelectStart', 'xrselectstart')
Facade.defineEventProperty(Object3DFacade, 'onXRSelect', 'xrselect')
Facade.defineEventProperty(Object3DFacade, 'onXRSelectEnd', 'xrselectend')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeStart', 'xrsqueezestart')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueeze', 'xrsqueeze')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeEnd', 'xrsqueezeend')


export default XRInputSourceFacade

// Predefine shape to facilitate JS engine optimization
assign(Object3DFacade.prototype, {
  lookAt: null,
  threeObject: null,
  _parentObject3DFacade: null,
  _removeChildIds: null,
  _matrixChanged: true,
  _worldMatrixVersion: -1,
  _worldMatrixVersionAfterLastUpdate: -1,
  _boundingSphereChanged: false
})

// Define onBeforeRender/onAfterRender event handler properties
Facade.defineEventProperty(Object3DFacade, 'onBeforeRender', 'beforerender')
Facade.defineEventProperty(Object3DFacade, 'onAfterRender', 'afterrender')


export default Object3DFacade

Object.defineProperty(Object3DFacade.prototype, 'isObject3DFacade', {value: true})

// Predefine shape to facilitate JS engine optimization
assign(Object3DFacade.prototype, {
  lookAt: null,
  threeObject: null,
  _parentObject3DFacade: null,
  _removeChildIds: null,
  _matrixChanged: true,
  _worldMatrixVersion: -1,
  _worldMatrixVersionAfterLastUpdate: -1,
  _boundingSphereChanged: false
})

// Define onBeforeRender/onAfterRender event handler properties
Facade.defineEventProperty(Object3DFacade, 'onBeforeRender', 'beforerender')
Facade.defineEventProperty(Object3DFacade, 'onAfterRender', 'afterrender')


export default Object3DFacade

[BUTTON_SQUEEZE]: {
    mousedown: 'xrsqueezestart',
    mouseup: 'xrsqueezeend',
    click: 'xrsqueeze'
  },
  // TODO decide on event names, and handle touching without press:
  // all: {
  //   mousedown: 'xrbuttondown',
  //   mouseup: 'xrbuttonup',
  //   click: 'xrbuttonclick'
  // }
}

// ...and add shortcut event handler properties on Object3DFacade for those events:
Facade.defineEventProperty(Object3DFacade, 'onXRSelectStart', 'xrselectstart')
Facade.defineEventProperty(Object3DFacade, 'onXRSelect', 'xrselect')
Facade.defineEventProperty(Object3DFacade, 'onXRSelectEnd', 'xrselectend')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeStart', 'xrsqueezestart')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueeze', 'xrsqueeze')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeEnd', 'xrsqueezeend')


export default XRInputSourceFacade

mouseup: 'xrsqueezeend',
    click: 'xrsqueeze'
  },
  // TODO decide on event names, and handle touching without press:
  // all: {
  //   mousedown: 'xrbuttondown',
  //   mouseup: 'xrbuttonup',
  //   click: 'xrbuttonclick'
  // }
}

// ...and add shortcut event handler properties on Object3DFacade for those events:
Facade.defineEventProperty(Object3DFacade, 'onXRSelectStart', 'xrselectstart')
Facade.defineEventProperty(Object3DFacade, 'onXRSelect', 'xrselect')
Facade.defineEventProperty(Object3DFacade, 'onXRSelectEnd', 'xrselectend')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeStart', 'xrsqueezestart')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueeze', 'xrsqueeze')
Facade.defineEventProperty(Object3DFacade, 'onXRSqueezeEnd', 'xrsqueezeend')


export default XRInputSourceFacade