<arc-ball>

A small Web Component enables arcball 3D view for everything inside.

Inspired by wonderful demos¹ made by Bartosz Ciechanowski, and a great paper² 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.

Usage

Include via CDN(e.g. unpkg) or Download a copy

<script src="https://unpkg.com/@9am/arc-ball/dist/index.min.js"></script>

<arc-ball>
    <section>preserve-3d CSS transform elements or anything you want</section>
</arc-ball>

<arc-ball>
    <!-- built-in xyz axis indicator -->
    <arc-ball-axis></arc-ball-axis>
</arc-ball>

<arc-ball>
    <!-- this'll not include by the arcball -->
    <section slot="escape">escape the 3d control</section>
</arc-ball>

<arc-ball>
    <!-- built-in stl renderer -->
    <arc-ball-stl src="/* stl JSON */"></arc-ball-stl>
</arc-ball>

Or import the ESM version

<script type="module">
    import 'https://unpkg.com/@9am/arc-ball/dist/index.es.js';
</script>

Or install via npm

npm install @9am/arc-ball

Documentation

width height and perspective can be controlled by the style of the <arc-ball> element.

License

MIT

Footnotes

1. Bartosz Ciechanowski Blog ↩

2. ARCBALL: A User Interface for Specifying Three-Dimensional Orientation Using a Mouse ↩