3D camera controller - based on autodesk's Fusion360 cube view
This UI Component is based on Autodesk's Cube view controller from Fusion360 (and many other Autodesk Solutions like ecad.io):
This component uses a 'hacked' version of the three.js orbit controls. I just added few methods to make the callbacks simpler.
Demos (using storybook) lucascassiano.github.io/react-cubeview
To build the examples locally, run:
git clone https://github.com/lucascassiano/react-cubeview
cd ./react-cubeview/
npm install
npm start
local storybook will run at localhost:6060
npm install react-cubeview --save
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}
width={200}
height={200}
/>
This component is designed to be used as a controller of another three.js environment, possibly using other OrbitControls object. -- See examples, at the storyboard page.
function myCustomUpdatedAngles(phi, theta){
//...
update main camera
//...
}
/
//...
<CubeView
aspect={1}
hoverColor={0x0088FF}
cubeSize={2}
zoom={6}
antialias={true}
width={200}
height={200}
onUpdateAngles={this.myCustomUpdatedAngles}
/>
if this was useful to you and you want to contribute so more tools like that can be developed:
TODO
- Add controls for 90ΒΊ rotations
- Improve OrbitControls.js
MIT
Copyright (c) 2017 lucascassiano.