ZIM Explore! 75. TextureActives 1 - Interactive Textures in three.js and the Canvas and ZIMjs

Опубликовано: 04 Май 2026
на канале: ZIM LEARN
208
10

Here we go through the code at https://zimjs.com/015/textureactive2.... - a first-person simple puzzle with interactive cylinders. This features ZIM canvas interactive texture materials on any mesh inside three.js on a CanvasTexture. TextureActives are perfect for VR interfaces, games and puzzles on 3D walls and surfaces. Also see the Bubbling videos introducing TextureActive examples new in ZIM 015 https://zimjs.com/015

1.    • ZIM Bubbling 196. ZIM 015 - TextureActives...  
2.    • ZIM Bubbling 195. ZIM 015 - TextureActives...  
3.    • ZIM Bubbling 194. ZIM 015 - TextureActives...  

00:00 start example
01:33 demo of the game with t-key on/off and first person controllers
04:33 interactive puzzle in 3D world possible
07:11 TextureActive floor with a noise pattern from ZIM pizzazz randomly
09:30 example of a floor with slants pattern from ZIM pizzazz with series()
12:55 collapse comments and make cylinders with different colors with a bar and ring
22:02 bar call answer - when the bar is onto the ring placed with registration point
24:50 test example again with the code
26:30 keyboard key t is only for testing developers, disable the t-key for app-players
27:40 show a dialog when finishing the screen
37:42 explaining three.js code
43:17 distance far/near set on/off by values 1, 150
46:00 testing the array
48:42 the floor is a circle made with CircleGeometry() with a CanvasTexture()
50:20 info about the ZIM DUO technique https://zimjs.com/tips.html#CONFIGURA...
54:33 cylinders (not yet with double sided material)
01:05:40 dialog canvasWindow = three.makePanel()
01:08:06 lights activating
01:10:00 scene.addTo(canvasWindow) and add(camera)
01:13:26 caching fps - frames per second for Android devices
01:17:30 folder of VR meeting banner of PagodaScope video    • Dr Abstract touring the PagodaScope for th...