ZIM is a general 2D JavaScript Canvas Framework with many conveniences, components and controls. For a long time we have brought three.js into ZIM to overlay meshes in our 2D world. Now, we have TextureActive that lets us add ZIM to the three.js CanvasTexture. TextureActives pass x and y raycast data into ZIM in place of the pointer events so that any ZIM feature can be used as animated and interactive materials for meshes. An introduction video premieres at https://youtu.be/LbtmzpSh2Co on Thursday, September 7, at 11:45 am EST. Samples can be found at zimjs.com/015 as this was just launched for ZIM 015.
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.
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.
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.
