https://github.com/9am/arc-ball
A small Web Component enables arcball 3D view for everything inside.
https://github.com/9am/arc-ball
3d arcball css css-transform perspective preserve-3d web-component
Last synced: 3 months ago
JSON representation
A small Web Component enables arcball 3D view for everything inside.
- Host: GitHub
- URL: https://github.com/9am/arc-ball
- Owner: 9am
- License: mit
- Created: 2024-04-02T08:49:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-17T08:21:58.000Z (about 1 year ago)
- Last Synced: 2025-02-15T16:17:36.583Z (3 months ago)
- Topics: 3d, arcball, css, css-transform, perspective, preserve-3d, web-component
- Language: JavaScript
- Homepage: https://9am.github.io/arc-ball/
- Size: 90.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<arc-ball>
A small Web Component enables arcball 3D view for everything inside.
Inspired by wonderful demos[^1] made by Bartosz Ciechanowski, and a great paper[^2] written by Ken Shoemake, this is a nice little tool for someone who like to create 3D models with CSS transform.
## Demo
Go to the [Home page](https://9am.github.io/arc-ball/).
## Usage
Include via CDN(e.g. unpkg) or Download a copy
```html
preserve-3d CSS transform elements or anything you want
```
```html
```
```html
escape the 3d control
```
```html
```
Or import the ESM version
```html
import 'https://unpkg.com/@9am/arc-ball/dist/index.es.js';
```
Or install via npm
```sh
npm install @9am/arc-ball
```
## Documentation
`width` `height` and `perspective` can be controlled by the style of the `` element.
## License
[MIT](LICENSE)
[^1]: [Bartosz Ciechanowski Blog](https://ciechanow.ski/)
[^2]: [ARCBALL: A User Interface for Specifying Three-Dimensional Orientation Using a Mouse](https://graphicsinterface.org/wp-content/uploads/gi1992-18.pdf)