Renderer

See Renderer.ts and THREE.WebGLRenderer.

Props from THREE.WebGLRenderer

NameDescriptionTypeDefault
alphaWhether the canvas contains an alpha (transparency) buffer or not.Booleanfalse
antialiasWhether to perform antialiasing.Booleanfalse
autoClearDefines whether the renderer should automatically clear its output before rendering a frame.Booleantrue

Custom Props

NameDescriptionTypeDefault
orbitCtrlEnable/disable OrbitControls. If value is an Object, it will be used to configure OrbitControls.Boolean, Objectfalse
pointer Listen for pointer events to track mouse or touch positions (2D and 3D). Use renderer.three.pointer to get :
  • position : 2D position.
  • positionN : nomalized position, can be used for raycasting.
  • 'positionV3' : 3D position.
Boolean, Objectfalse
resize Resize canvas on window resize.
  • false : disabled
  • true : parent size
  • 'window' : window size
Boolean, Stringfalse
shadowUse shadow or not.Booleanfalse
widthFixed widthNumber
heightFixed heightNumber

Events API (v0.3)

You can use the following functions to add/remove event listeners on Renderer component :

NameDescriptionEvent
onInitAdd init listener{ type: 'init', renderer }
onMountedAdd mounted listener{ type: 'mounted', renderer }
onResizeAdd resize listener{ type: 'init', renderer, size }
onBeforeRenderAdd beforerender listener{ type: 'beforerender', renderer, time }
offBeforeRenderRemove beforerender listener
onAfterRenderAdd afterrender listener{ type: 'afterrender', renderer, time }
offAfterRenderRemove afterrender listener

You can also use :

NameDescription
addListener(type, callback)Add event listener
removeListener(type, callback)Remove event listener

Custom render function

You can use a custom render function :

const renderer = this.$refs.renderer
renderer.onInit(() => {
  renderer.renderFn = () => {
    // do what you want
  }
})

Access ThreeJS renderer

You should set a ref on the renderer :

<Renderer ref="renderer">
  ...
</Renderer>

You can then access ThreeJS renderer in your component script :

const renderer = this.$ref.renderer.renderer;