Load 3D JSON models into state to render on a three.js canvas. Utilises the JSONLoader.
This loader is best used with react-three-renderer.
This package is very much a work in progress, use with caution.
npm install --save https://github.com/Rapsac11/react-three-model-loader
import * as THREE from 'three';
import { loadModelLocally } from 'react-three-model-loader'
loadModelLocally()
returns a Promise containing a three.js object. It takes in a url and a name and is used like so:
componentDidMount(){
loadModelLocally(url, name)
.then(loadedObject => {this.setState({model: loadedObject})})
}
import * as THREE from 'three';
import { connect } from 'react-redux'
import { loadModel } from 'react-three-model-loader'
loadModel()
is an Action Creator that will place a three.js object in the global store. In order for this to work you will need to combine the modelLoaderReducer
provided in this package with the local reducer. It also takes in a url and a name and is used like so:
componentDidMount(){
const { loadModel } = this.props
loadModel(url, name)
}
export default connect(
state => ({
model: state.modelLoaderReducer.loadedObject
}),
{
loadModel
}
)(MyComponent)
and in your Reducer.js (or similar):
import { combineReducers } from 'redux'
import { modelLoaderReducer } from 'react-three-model-loader'
//import myOtherReducer from './myOtherReducer'
export default combineReducers({
modelLoaderReducer,
//myOtherReducer
})
The <ThreeDModel />
component can be used for quick rendering of the model inside a react-three-renderer <scene />
<ThreeDModel
data={this.state.model} //required prop
name='dummy' //required prop
/>
To bind the OrbitControls to the mouse:
import * as THREE from 'three';
import { OrbitControls} from 'react-three-model-loader'
componentDidMount() {
const controls = new OrbitControls(this.refs.camera);
this.controls = controls;
}
componentWillUnmount() {
this.controls.dispose();
delete this.controls;
}
The example below uses react-three-renderer to get up and running fast
import React, {Component} from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import { connect } from 'react-redux'
import { OrbitControls, ThreeDModel, loadModelLocally, loadModel } from 'react-three-model-loader'
class ReactThreeRenderer extends Component {
constructor(props, context) {
super(props, context);
this.state = {
loadedModel: null
};
this.cameraPosition = new THREE.Vector3(0, 400, 100);
this.cameraQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0.9, 0, 0), -Math.PI / 2);
}
componentWillMount(){
const { loadModel } = this.props
loadModel(
'url',
'reduxModel'
)
loadModelLocally(
'url',
'setStateModel'
)
.then(loadedObject => {console.log(loadedObject); this.setState({loadedModel: loadedObject})})
}
componentDidMount() {
const controls = new OrbitControls(this.refs.camera);
this.controls = controls;
}
componentWillUnmount() {
this.controls.dispose();
delete this.controls;
}
render() {
const { model } = this.props
const { loadedModel } = this.state
const width = window.innerWidth;
const height = 400;
const aspectratio = width / height;
var cameraprops = {
fov : 75,
aspect : aspectratio,
near : 0.1,
far : 1000,
position : new THREE.Vector3(0,40,200),
lookAt : new THREE.Vector3(0,0,0)
};
return (
<React3 mainCamera="maincamera" width={width} height={height} clearColor={0xbcbcbc}>
<scene>
<perspectiveCamera ref="camera" name="maincamera" {...cameraprops} />
<ThreeDModel data={model} name='reduxModel'/>
<ThreeDModel data={loadedModel} name='setStateModel'/>
</scene>
</React3>
);
}
}
export default connect(
state => ({
model: state.modelLoaderReducer.loadedObject
}),
{
loadModel
}
)(ReactThreeRenderer)
Feel free to contribute, please remember to run npm run modularise
prior to committing.