Using THREE.js in a Houdini Paint

This is weird and terrible.

We use a THREE.js Canvas Renderer in a paint worklet!!

The worklet code is in main.js

Use npm run start to build it.

Use it in HTML like so:

<style>
  .some-el {
    --rotate-x: 0;
    --rotate-y: 0;
    --rotate-z: 0;
  
    background-color: lavenderblush;
    background-image: paint(three);
  }
</style>

<script>
  CSS.paintWorklet.addModule('./dist/bundle.js');
<script>