https://github.com/adarosecannon/three-paint
Demo using THREE.js to render into a Houdini Paint Worklet
https://github.com/adarosecannon/three-paint
houdini threejs worklet
Last synced: 6 months ago
JSON representation
Demo using THREE.js to render into a Houdini Paint Worklet
- Host: GitHub
- URL: https://github.com/adarosecannon/three-paint
- Owner: AdaRoseCannon
- Created: 2018-07-11T14:22:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-12T08:30:16.000Z (over 7 years ago)
- Last Synced: 2025-02-25T06:22:55.138Z (8 months ago)
- Topics: houdini, threejs, worklet
- Language: JavaScript
- Homepage: https://ada.is/three-paint/
- Size: 1.02 MB
- Stars: 75
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/AdaRoseCannon/three-paint/blob/master/src/main.js)
Use `npm run start` to build it.
Use it in HTML like so:
```html
.some-el {
--rotate-x: 0;
--rotate-y: 0;
--rotate-z: 0;
background-color: lavenderblush;
background-image: paint(three);
}
CSS.paintWorklet.addModule('./dist/bundle.js');
<script>
```
