Interactive Organ - with ZIM TextureActive

Here we showcase ZIM TextureActive to add interactive textures to three.js. ZIM is a 2D canvas framework with many conveniences, components and controls which we can use on any material in three.js. Here is a resource post.

The organ can be played with the two long boxes across its middle. On four of the six materials is a TextureActive. The TextureActive has a Selector component from ZIM so that pressing on the material slides a selector box to the location pressed. We also have a hud made of ZIM components - a Dial, Slider, a couple Toggles, a Stepper for the organ sounds and a Checkbox to hide the hud. We are using ZIM Noise handle the animation of the organ and ZIM Synth for the sounds.

Pressing the T button or clicking the logo will toggle from three.js to the ZIM in behind. You can scroll to see the various parts that are used in the TextureActive.

We would be happy to answer any questions here or in the resource post.


Dr Abstract - Founder of ZIM.

1 Like