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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MzcyOTgsIm5iZiI6MTcxOTYzNjk5OCwicGF0aCI6Ii8xNDM1NDU3LzMyOTE5Mjg3NC1iN2I4NmYzNi0yMjlmLTRhMGItYThhNy0xN2Q2OTliNDllNzkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjlUMDQ1NjM4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODdiNTM2Y2RiOWEzMjQwZDc1ZDI1NjU5ZjM3Yjk1NjdkZTZjOWZiNGZmMjBjYzE4YmQ3ZjA5NzFhYzRlZWIxZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.LJsoJrViw80eS1xTmaET6l5ln62vK9ouo-wqa-6942s)
![arc-ball-demo-3](https://private-user-images.githubusercontent.com/1435457/329453574-18164a91-254c-4a88-9f3d-e4d0101e15d2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MzcyOTgsIm5iZiI6MTcxOTYzNjk5OCwicGF0aCI6Ii8xNDM1NDU3LzMyOTQ1MzU3NC0xODE2NGE5MS0yNTRjLTRhODgtOWYzZC1lNGQwMTAxZTE1ZDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjlUMDQ1NjM4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MjRhMDYyZTEzYWYwOGUyNGJjZWQyOTJiMWU1OWRjNTM3Mzg1YjUwOGI5NGZmNzg0YTVjYTJiMWEzNzE2N2NiZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bbspb82KpEVGawYbBqIWaaLllWEjVrrRtCDSUru5mzI)
![arc-ball-demo-4](https://private-user-images.githubusercontent.com/1435457/329453585-fe8eac0f-db47-4f2c-a46a-e55ad6146010.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MzcyOTgsIm5iZiI6MTcxOTYzNjk5OCwicGF0aCI6Ii8xNDM1NDU3LzMyOTQ1MzU4NS1mZThlYWMwZi1kYjQ3LTRmMmMtYTQ2YS1lNTVhZDYxNDYwMTAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjlUMDQ1NjM4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTc4MmIwZjZkZjQ4NjY3ZWVhYjNjMjVmNWI2ZDUyNzhkYTVkODBjZGYzMDFkZTJiYzI2NGMyOTQyMjQ5MzcwZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ZqDb0Clu-xrs6NR54BebPZTg5JgzfQxkDVTVvHWKwMs)
![arc-ball-demo-2](https://private-user-images.githubusercontent.com/1435457/329192888-f317ecd2-b6e0-43ff-8f74-8ab6e878b321.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MzcyOTgsIm5iZiI6MTcxOTYzNjk5OCwicGF0aCI6Ii8xNDM1NDU3LzMyOTE5Mjg4OC1mMzE3ZWNkMi1iNmUwLTQzZmYtOGY3NC04YWI2ZTg3OGIzMjEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjlUMDQ1NjM4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmJlMGNjNWY0OGQ0ZTY0OWM0OGNhNzYyNWJjZTA0MTkzN2I1YTk1NDA5NWQ0YWVmYTY2MjlhNTkyOTY0ZDMxZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.XS3H0BLMjWigc8cRU0gaRuGNFud8llqJ70u-d4vsDrk)
![arc-ball-demo-1](https://private-user-images.githubusercontent.com/1435457/329192883-66f0ed72-934e-40d0-8f7d-f67140cdfde8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MzcyOTgsIm5iZiI6MTcxOTYzNjk5OCwicGF0aCI6Ii8xNDM1NDU3LzMyOTE5Mjg4My02NmYwZWQ3Mi05MzRlLTQwZDAtOGY3ZC1mNjcxNDBjZGZkZTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjlUMDQ1NjM4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDZjZjFmNDUzOTEzZTY1YmQ3MzM5MmU4NzFiMjY3YTU1YWE1OGY3OWU2NzBlM2VhOWE5MmMxYjk4YjQzNmE4MyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.OZsdXCUwMjSnWgIkck5O8Nkp1GkAt-nVJLOMjWH-CKY)
![arc-ball-demo-5](https://private-user-images.githubusercontent.com/1435457/330654189-eec3250f-471f-47b2-8cd6-c39057e1f567.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MzcyOTgsIm5iZiI6MTcxOTYzNjk5OCwicGF0aCI6Ii8xNDM1NDU3LzMzMDY1NDE4OS1lZWMzMjUwZi00NzFmLTQ3YjItOGNkNi1jMzkwNTdlMWY1NjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjlUMDQ1NjM4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODczN2UyZTlmZDgwMmQ2ZmE3NzI3NjI2MjVhM2ZiOTIxZWJjNzJjNTA1OGVmODc4MWIzMWYzNDA4NjNmNWY3YiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.FXgEN7JOmjgSnftS6QZXTDqdHTUYxk1ug-Li9eEj6k0)
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.