react-three-renderer-objects
v0.0.6
Published
Load 3D objects and materials in react-three-renderer
Downloads
69
Readme
three.js Object import component for React
Overview
Import OBJ models into your three.js scene (WebGL). Using this package along with react-three-renderer will allow you to easily place fully rendered 3D objects (models with associated materials).
Options
- Name (required)
- Model
- Material
- Position
- Rotation
- Scale
- Scene
- Group (name of parent group)
Usage
import ObjectModel from 'react-three-renderer-objects';
<ObjectModel
name="objectName"
model={model}
material={material}
position={new THREE.Vector3(0, 0, 0)}
rotation={new THREE.Euler(0, 0, 0)}
scale={new THREE.Vector3(1, 1, 1)}
scene={scene}
group="groupName"
/>
Example scene
import * as THREE from "three";
import React from "react";
import React3 from "react-three-renderer";
import ObjectModel from 'react-three-renderer-objects';
import exampleObject from "../../assets/models/example.obj";
import exampleMaterial from "../../assets/materials/example.mtl";
class DemoScene extends React.Component {
constructor(props) {
super(props);
this.state = {
scene: {}
};
}
componentDidMount() {
const { scene } = this.refs;
this.setState({ scene });
}
render() {
return (
<React3
mainCamera="camera"
width={500}
height={500}
alpha={true}
>
<scene ref="scene">
<perspectiveCamera
key={`perspectiveCamera`}
name="camera"
fov={75}
aspect={1}
near={0.1}
far={1000}
position={new THREE.Vector3(0, 0, 25)}
lookAt={new THREE.Vector3(0, 0, 0)}
/>
<group name="exampleGroup">
<ObjectModel
name="exampleObject"
material={exampleMaterial}
model={exampleObject}
scene={this.state.scene}
group="exampleGroup"
/>
</group>
</scene>
</React3>
);
}
}
export default DemoScene;