react-cubeview

3D camera controller - based on autodesk's Fusion360 cube view

UI Reference

This UI Component is based on Autodesk's Cube view controller from Fusion360 (and many other Autodesk Solutions like ecad.io):

Details

This component uses a 'hacked' version of the three.js orbit controls. I just added few methods to make the callbacks simpler.

Demo & Examples

Live demo: lucascassiano.github.io/react-cubeview

To build the examples (storyboard) locally, run:

npm install
npm start

Then open localhost:6060 in a browser.

Installation

npm install react-cubeview --save

Usage

import CubeView from 'react-cubeview';
//optional css file
import 'react-cubeview/lib/css/react-cubeview.css';
 
//render()...
 
<CubeView 
    aspect={1} 
    hoverColor={0x0088FF} 
    cubeSize={2} 
    zoom={6} 
    antialias={true} 
    onUpdateAngles={this.updateAngles} 
/>
 

Callback - onUpdateAngles

function myCustomCallback(phi, theta){
    //...
    update main camera
    //...
}

Notes

TODO

• Add controls for 90º rotations
• Improve OrbitControls.js

License

MIT

Copyright (c) 2017 lucascassiano.