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.
![arc-ball-demo-0](https://private-user-images.githubusercontent.com/1435457/329192874-b7b86f36-229f-4a0b-a8a7-17d699b49e79.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzOTY5MjksIm5iZiI6MTcxOTM5NjYyOSwicGF0aCI6Ii8xNDM1NDU3LzMyOTE5Mjg3NC1iN2I4NmYzNi0yMjlmLTRhMGItYThhNy0xN2Q2OTliNDllNzkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMTAxMDI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NGZjMTdjNTYyNzgxNDM5NTc0NzI5MmFhZDUyYjQ5OTRiYjVhODY0ZDQwYTU3N2JkYzc1OWNkZjg5ZmI4ZDkyMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.SkEnHxzaxMq_dZpMC2XLLelv5N0tRErJt7UYI2X6Z-A)
![arc-ball-demo-3](https://private-user-images.githubusercontent.com/1435457/329453574-18164a91-254c-4a88-9f3d-e4d0101e15d2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzOTY5MjksIm5iZiI6MTcxOTM5NjYyOSwicGF0aCI6Ii8xNDM1NDU3LzMyOTQ1MzU3NC0xODE2NGE5MS0yNTRjLTRhODgtOWYzZC1lNGQwMTAxZTE1ZDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMTAxMDI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGZmZmU2YjEyMGNjYzQxNWY2ZWU4ZDdhZjk2ZjdmNGFlZjgyODY1OTA4YmY1MDlhNjg5YTcxMTM3NDhkNGRkZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.3yeByGOzOQDrx3p-NuRZy7uqG7UZiG27--nRnICEaYQ)
![arc-ball-demo-4](https://private-user-images.githubusercontent.com/1435457/329453585-fe8eac0f-db47-4f2c-a46a-e55ad6146010.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzOTY5MjksIm5iZiI6MTcxOTM5NjYyOSwicGF0aCI6Ii8xNDM1NDU3LzMyOTQ1MzU4NS1mZThlYWMwZi1kYjQ3LTRmMmMtYTQ2YS1lNTVhZDYxNDYwMTAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMTAxMDI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Mzk2NmRjZTAyN2RmYTU3MmY0ODgyZWFlZGNhYzYxZmEzZDQ1YTAyZTY5ZjZhM2MyZDUyMjk4ODZmYzc1YjNjNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.3GpqoY4dWTvmTvCCr_mB7pLbSqZYtiOjHUjiMc0-kRM)
![arc-ball-demo-2](https://private-user-images.githubusercontent.com/1435457/329192888-f317ecd2-b6e0-43ff-8f74-8ab6e878b321.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzOTY5MjksIm5iZiI6MTcxOTM5NjYyOSwicGF0aCI6Ii8xNDM1NDU3LzMyOTE5Mjg4OC1mMzE3ZWNkMi1iNmUwLTQzZmYtOGY3NC04YWI2ZTg3OGIzMjEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMTAxMDI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODU1N2EwYmU1ODZlYjNiMDc5ZDY5YmI0YTAyYzFjY2I1YWY4MWY5OGZjMWVmYzk3NDM0YTAyMWJjOGQzMWUzNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.T_c5r8tDhpaRKvktcQqCCOLczN1hMXI98E27YLGPZqE)
![arc-ball-demo-1](https://private-user-images.githubusercontent.com/1435457/329192883-66f0ed72-934e-40d0-8f7d-f67140cdfde8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzOTY5MjksIm5iZiI6MTcxOTM5NjYyOSwicGF0aCI6Ii8xNDM1NDU3LzMyOTE5Mjg4My02NmYwZWQ3Mi05MzRlLTQwZDAtOGY3ZC1mNjcxNDBjZGZkZTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMTAxMDI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MWIzZDgwMjIxZTI0YTczMTBjOTlmMGI3ZjdmYTBkYzEyMzkxMWE2ZDA5NmE2NGY1YWIyNzlmN2QxNGYyNTM3MCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.MR4snVQwUYlC8UHQvlbnFtYkiyMxzwiGTdK2eHpjZGQ)
![arc-ball-demo-5](https://private-user-images.githubusercontent.com/1435457/330654189-eec3250f-471f-47b2-8cd6-c39057e1f567.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzOTY5MjksIm5iZiI6MTcxOTM5NjYyOSwicGF0aCI6Ii8xNDM1NDU3LzMzMDY1NDE4OS1lZWMzMjUwZi00NzFmLTQ3YjItOGNkNi1jMzkwNTdlMWY1NjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMTAxMDI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTkxNTAwMzVlMjg0NTI4YmRkNzc1YzA0N2Q3ZDk2YmM4OThkNTk4NTllNjVjZDY2YmI3MWMyYjJkMzRhYmVmNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.mkrVTD1a-LghD7jvtzYMXyqJlG80n0eqPDvjV2flmWI)
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
width
height
and perspective
can be controlled by the style of the <arc-ball>
element.