Model #

Model allows you to render 3D objects in React VR.

At the moment, React VR supports the Wavefront OBJ file format, a common representation for 3D models. In the future, we hope to expand this with the ability to initialize custom loaders at runtime.

The external resource (or resources) containing the model's information are provided using a source attribute, which is an object of key-value pairs mapping resource types to their locations.

The following properties are currently supported: - obj - Location of an OBJ-formatted model - mtl - Location of a MTL-formatted material (the companion to OBJ)

These values can be static strings, asset() calls, or require() statements.

// Model with a material <Model source={{ obj: asset('sculpture.obj'), mtl: asset('sculpture.mtl'), }} /> // Model without a material <Model source={{ obj: asset('standalone.obj'), }} />

Like the 3D primitives, Model also supports the lit and texture props. If lit is true, the Model's materials are affected by scene lighting. This overrides any settings from a MTL file. If texture is specified, React VR will look up the corresponding image and use it to texture the Model. The texture will only be used if a MTL file is not specified. This can be a string, an asset() call, or a require().

Props #

lit?: PropTypes.bool #

The lit property specifies if the Model will be affected by lights placed in the scene.

materialParameters?: PropTypes.object #

set material parameters in three.js

source?: PropTypes.object #

obj is a string representing the resource identifier for the Model, this will be an http address The source properties will enable future expansion to support additional formats

style?: style #

color color
opacity PropTypes.number

texture?: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]) #

texture is a string specifying the url of the texture to be used for the Model, this will be an http address If this si not specified the mtl of the source model will be used

wireframe?: PropTypes.bool #

Specifying true for this property will cause the object to be displayed as a wireframe

You can file an issue on GitHub if you see a typo or error on this page!