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.
Go to the Home page.
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-ballwidth height and perspective can be controlled by the style of the <arc-ball> element.