KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #typescript #codex #claude-code #mcp #rust #deepseek-harness #ai-agent #cli

react-cubeview

★ 30 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-cubeview

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

![alt text](https://github.com/lucascassiano/react-cubeview/raw/master/docs/cubeview.gif)

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

![original cube](https://github.com/lucascassiano/react-cubeview/raw/master/docs/original.gif)

## 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

Demos (using storybook)
 [lucascassiano.github.io/react-cubeview](http://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`](http://localhost:6060)

## Installation

```
npm install react-cubeview --save
```

## Usage

```js
import CubeView from 'react-cubeview';
//optional css file
import 'react-cubeview/lib/css/react-cubeview.css';

//render()...

```

### Callback - onUpdateAngles
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.
```js
function myCustomUpdatedAngles(phi, theta){
    //...
    update main camera
    //...
}
/
//...

```

## Donation
if this was useful to you and you want to contribute so more tools like that can be developed:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="H8KLQJXPQTZUJ">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

### Notes
TODO

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

## License

MIT

react-cubeview

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README