Skip to content
/ arc-ball Public

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

License

Notifications You must be signed in to change notification settings

9am/arc-ball

Repository files navigation

arc-ball-logo

<arc-ball>

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

GitHub npm npm npm bundle size

Inspired by wonderful demos1 made by Bartosz Ciechanowski, and a great paper2 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.

arc-ball-demo-0 arc-ball-demo-3 arc-ball-demo-4 arc-ball-demo-2 arc-ball-demo-1 arc-ball-demo-5

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