Skip to content
Demo using THREE.js to render into a Houdini Paint Worklet
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.eslintrc.json
.gitignore
README.md
index.html
package-lock.json
package.json
preview.jpg
rollup.config.js
style.css

README.md

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>

Preview

You can’t perform that action at this time.