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.

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></arc-ball-stl>
</arc-ball>
<script>
    $('arc-ball-stl').install(/* stl data */);
</script>

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

npm install @9am/arc-ball

Documentation

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

License

MIT

[^1]: Bartosz Ciechanowski Blog [^2]: ARCBALL: A User Interface for Specifying Three-Dimensional Orientation Using a Mouse