TroisJS

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](#access-threejs-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
To directly set the size of the renderer you can call the built in three function: this.$refs.renderer.three.setSize(width, height)		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;

Access ThreeJS OrbitControls

In the same fashion you can access the renderer's three object which contains different functions to control the scene, amongst which is cameraCtrl, handling the ThreeJS OrbitControls settings

const orbitCtrl = this.$ref.renderer.three.cameraCtrl;

Events

To use events, apply an event listener in mounted() section of your App.


orbitCtrl.addEventListener('change', () => {
      // Do something when the camera has been transformed by the controls.
    })

orbitCtrl.addEventListener('start', () => {
      // Do something when an interaction was initiated.
    })

orbitCtrl.addEventListener('end', () => {
      // Do something when an interaction has finished.
    })

Properties, Methods

You can apply all properties and methods in the same way as listed in the official ThreeJS docs

Example:

orbitCtrl.enablePan = false