Entry Point

Wiki ▸ React3

React3

import React3 from 'react-three-renderer';

React3 is a regular React Component that places a canvas on the page.

When React3 is mounted, an instance of React3Renderer is used to render a <react3> internal component into the canvas.

The react3 internal component repeatedly requests animation frames from the browser.

Every frame it re-renders the whole scene.

The attributes are passed on to the react3 internal component so that it can configure the renderer.

Attributes

context

one of [2d, 3d] required: The rendering context.

Currently only '3d' is supported.

width

number required: The height of the canvas and the default viewport.

height

number required: The width of the canvas and the default viewport.

gammaInput

bool: Controls renderer gamma input.

See THREE.WebGLRenderer#gammaInput.

gammaOutput

bool: Controls renderer gamma output.

See THREE.WebGLRenderer#gammaOutput.

sortObjects

bool: Controls renderer object sorting.

See THREE.WebGLRenderer#sortObjects.

mainCamera

string: The name of the camera to render into the canvas.

See perspectiveCamera.name.

If this value is not set, the scene can be rendered into the <viewport/> children of React3.

onAnimate

function: This callback gets called before every frame.

clearColor

one of types [THREE.Color, number, string]: The clear color of the renderer.

Is used as the first parameter for THREE.WebGLRenderer#clearColor.

If the clearAlpha and alpha properties are set, clearAlpha will be used as the second parameter.

clearAlpha

number: Used for the transparency of the canvas.

Expected range: 0 to 1, where 0 is clear and 1 is opaque.

Is used as the second parameter for THREE.WebGLRenderer#clearColor.

If the clearColor property is set, that will be passed as the first parameter.

Requires the alpha property to be set.

shadowMapEnabled

bool: Toggles shadowMap usage.

See THREE.WebGLRenderer#shadowMapEnabled.

WARNING: Updating this value will force all materials to refresh.

shadowMapType

one of [THREE.BasicShadowMap, THREE.PCFShadowMap, THREE.PCFSoftShadowMap]: Controls the shadowMap type.

See THREE.WebGLRenderer#shadowMapType.

WARNING: Updating this value will force all materials to refresh.

shadowMapCullFace

one of [THREE.CullFaceNone, THREE.CullFaceBack, THREE.CullFaceFront, THREE.CullFaceFrontBack]: Controls shadowMap face culling.

See THREE.WebGLRenderer#shadowMapCullFace.

WARNING: Updating this value will force all materials to refresh.

shadowMapDebug

bool: Toggles shadowMap debugging.

See THREE.WebGLRenderer#shadowMapDebug.

WARNING: Updating this value will force all materials to refresh.

pixelRatio

number: The pixel ratio of the renderer.

Preferred value: window.devicePixelRatio.

precision

one of [highp, mediump, lowp]: Sets the precision of the renderer.

See THREE.WebGLRenderer#precision.

WARNING: This recreates the whole canvas.

alpha

bool: Toggles alpha setting of the renderer.

See THREE.WebGLRenderer#alpha.

WARNING: This recreates the whole canvas.

premultipliedAlpha

bool: Toggles the premultipliedAlpha setting of the renderer.

See THREE.WebGLRenderer#premultipliedAlpha.

WARNING: This recreates the whole canvas.

antialias

one of types [bool, number]: Toggles anti-aliasing of the renderer.

See THREE.WebGLRenderer#antialias.

WARNING: This recreates the whole canvas.

stencil

bool: Toggles the stencil property of the renderer.

See THREE.WebGLRenderer#stencil.

WARNING: This recreates the whole canvas.

preserveDrawingBuffer

bool: Toggles the preserveDrawingBuffer property of the renderer.

See THREE.WebGLRenderer#preserveDrawingBuffer.

WARNING: This recreates the whole canvas.

depth

bool: Toggles the depth property of the renderer.

See THREE.WebGLRenderer#depth.

WARNING: This recreates the whole canvas.

logarithmicDepthBuffer

bool: Toggles the logarithmicDepthBuffer property of the renderer.

See THREE.WebGLRenderer#logarithmicDepthBuffer.

WARNING: This recreates the whole canvas.

Additional Attributes:

canvasStyle

any The style properties to be passed onto the canvas.

Static functions:

React3.findTHREEObject

Similar to ReactDOM.findDOMNode.

Finds a THREE.js object from a mounted component.

You are encouraged to use refs instead.

React3.eventDispatcher

Advanced usage. Used to dispatch events. Undocumented for now.

===

View Source