TextureActives can be used for interface panels and HUDS but also to add games, puzzles, interactive art and more to surfaces. ZIM has over 40 components, including editable text, lots of cool features like dragging objects along blobs and squiggles, exciting pens and particle emitters.
The TextureActive system lets you press the T key to toggle to a 2D scrollable tile of all the textures used. This is handy while creating - and can be turned off for the final product. There are currently a series of ZIM Bubbling and Explore videos about TextureActives available at zimjs.com/vids - we hope that you can join us for the premiere of the promo video. Cheers.
NOTE: We have just added TextureActives in VR - please see ZIM TextureActives for VR
Dr Abstract (Dan Zen)
It looks impressive. Thanks for sharing.
(There are some minor glitches related to transparency when TextureActives is used as a Three.js texture.)
Thanks, @PavelBoytchev - send us a note, if you have time, about the glitch you spotted. We had not noticed anything in our examples. Cheers.
It is very hard to notice the glitch, as it happens rarely. Sometimes the far part of the curved screen disappears, while it is behind the front part. When I move the mouse one pixel left or right the far side becomes visible again. This might be unrelated to TextureActives itself, as TextureActives only provides the texture. Here is a short video:
Ah yes… we had noticed that too and assumed it is a three.js issue… perhaps it is not - we would see things like that happen in AltpsaceVR too - there is probably an official word for it…
We do not see the issue in R149… but we do in R155. We will keep an eye on it and give it a little thought - maybe it is the curved plane code that we used from @prisoner849
- but then again, it is working in R149. Might be worth mentioning it on GitHub issues… will see if it does it with normal textures and then with a static CanvasTexture, etc. See if we can pin it down.
We would just like to point out that any of the ZIM components can adjust properties in three.js. In the hud example here ZIM 015 - TextureActive HUD - Code Creativity we change color and animation speed of the mesh with a ZIM Slider and ColorPicker. And in the top corner, the ZIM Tabs animate the OrbitControls / Camera. The ZIM components do not need to be in a hud format, they can also be on panels, on walls, etc.
In this example ZIM TextureActive - Interactive Textures in three.js
we show six ZIM components all controlling the rotation of the panel. These are Tabs, Slider, Selector, RadioButtons, Indicator and Stepper. The panel also shows editable text, a button (linking out to UI/UX at ZIM) and a scrollable List of about 40 components - click one to see the docs.
In the same example at ZIM TextureActive - Interactive Textures in three.js
we let the user draw on a cube… and drag an object along a path - and much more - check it out!
hello, i have some questions. So i use fabricjs on all of my 3d customizer app, but the problem we’re facing is that the canvasTexture that is rendered was always blurry if we’re using canvas size below 2048. Does this happen also using ZIM?
Also does the ZIM objects has controls like fabricjs does? such as bounding box, transform etc?
Yes to the transform - in the link above there is a transform example at level 3 on the cube. To make this is: new Triangle().center().transform(); You can also specify what to transform, and easily save the transformed state with the TransformManager().
I don’t think images are blurry… in this screenshot we are using a 960x540 for the ZIM Book. It looks basically the same as the image as far as I can tell.
Hello, i’m trying ZIM now. https://codepen.io/naonvl/pen/RwvwpOx?editors=0010 i wanna know what it takes to drag around the ZIM objects like i did on threejs+fabricjs using raycast?
I’m planning on creating the same template as i did here https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/ but using ZIM
Also this is my demo https://jersey-designer.netlify.app it’s using 1024x1024 fabricjs canvas as canvas texture but it looks blurry
I wanna know if it’s happening on ZIM too
The example you were using was an earlier experiment in ZIM 014. Here is an update using TextureActive in ZIM 015 https://codepen.io/zimjs/pen/qBgBxjP
that is really cool! i’ll explore more, but i have question is there a setting to set the texture size to 2048?
I think setting the TextureActive() width and height to whatever size you want the texture would do it.