All Projects → AdaRoseCannon → Three Paint

AdaRoseCannon / Three Paint

Demo using THREE.js to render into a Houdini Paint Worklet

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Three Paint

House
Proof of Concept and Research repository.
Stars: ✭ 37 (-47.89%)
Mutual labels:  threejs
Shadoweditor
Cross-platform 3D scene editor based on three.js, golang and mongodb for desktop and web. https://tengge1.github.io/ShadowEditor-examples/
Stars: ✭ 1,060 (+1392.96%)
Mutual labels:  threejs
Aframe Vimeo Component
Stream Vimeo videos into WebVR.
Stars: ✭ 62 (-12.68%)
Mutual labels:  threejs
Whitestorm App Boilerplate
[WIP] WhitestormJS 2 App boilerplate
Stars: ✭ 42 (-40.85%)
Mutual labels:  threejs
Solarsys
Realistic Solar System simulation with three.js
Stars: ✭ 49 (-30.99%)
Mutual labels:  threejs
Sunset Cyberspace
🎮👾Retro-runner Game made in Expo, Three.js, OpenGL, WebGL, Tween. 🕹
Stars: ✭ 54 (-23.94%)
Mutual labels:  threejs
3d kibana charts vis
3D Kibana Charts: Pie Chart, Bars Chart, Bubbles Chart
Stars: ✭ 34 (-52.11%)
Mutual labels:  threejs
Webgl Globes
Stars: ✭ 66 (-7.04%)
Mutual labels:  threejs
Ar Gif
Easy to use augmented reality web components
Stars: ✭ 52 (-26.76%)
Mutual labels:  threejs
Aframe Forcegraph Component
Force-directed graph component for A-Frame
Stars: ✭ 60 (-15.49%)
Mutual labels:  threejs
Webgl Structure
🚀 A modern, ES6 based, javascript structure for WebGL based projects with THREE.js!
Stars: ✭ 44 (-38.03%)
Mutual labels:  threejs
001
draw_code.001 — ThreeJS, WebGL & GLSL
Stars: ✭ 48 (-32.39%)
Mutual labels:  threejs
Bombanauts
Bombanauts, inspired by the original Bomberman game, is a 3D multiplayer online battle arena (MOBA) game where players can throw bombs at each other, make boxes explode, and even other players!
Stars: ✭ 54 (-23.94%)
Mutual labels:  threejs
Onthefly
🔗 Generate TinySVG, HTML and CSS on the fly
Stars: ✭ 37 (-47.89%)
Mutual labels:  threejs
Lego Expo
Play with Lego bricks anywhere using Expo
Stars: ✭ 65 (-8.45%)
Mutual labels:  threejs
Worlds2
Building Virtual Reality Worlds using Three.js
Stars: ✭ 34 (-52.11%)
Mutual labels:  threejs
Vue Threejs Composer
Compose beautiful 3D scenes with Vue and Three.js
Stars: ✭ 53 (-25.35%)
Mutual labels:  threejs
Vanta
Animated 3D backgrounds for your website
Stars: ✭ 1,162 (+1536.62%)
Mutual labels:  threejs
Vimeo Depth Player
A WebVR volumetric video renderer that uses color-depth based videos hosted on Vimeo.
Stars: ✭ 65 (-8.45%)
Mutual labels:  threejs
Herosaver
An educational tool for exporting stl from THREE.js
Stars: ✭ 55 (-22.54%)
Mutual labels:  threejs

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].