THREE LIBRARY
ZIM WITH THREE.JS
ZIM has a three library to help work with three.js which is a wonderful library for 3D. It is nice and simple, just like ZIM!import zim from "https://zimjs.org/cdn/017/zim_three";ZIM is a 2D JavaScript framework with many conveniences, components and controls to make games, art, puzzles and more! Welcome three.js community.
There are two ways that ZIM works with three.js:
- ZIM inside three.js
- three.js inside ZIM
 |
ZIM INSIDE THREE.JSZIM has TEXTURE ACTIVE so ZIM works on any three.js material as a CanvasTexture and we raycast the pointer interactivity to ZIM.Just learning three.js? See the next section for three.js basics. |
- ZIM 015 TextureActive Demo Site - 3D and VR examples and supporting resources
- TextureActive Premiere Video Dr Abstract introduces TextureActive technology
- 3D Ring Maze - Successful CodePen example
- ZIM Studio - 35 TextureActive 3D and VR examples
 |
THREE.JS INSIDE ZIMthree.js meshes and models can be used as assets in ZIM. These are overlayed, scaled and positioned automatically, can be animated, and have their properties controlled with ZIM components.ZIM also provides a three helper module at 67% the original three.js code. |
- Video: three.js basics - template and basics
- File 0: basics - raw three.js template
- File 1: basics - ZIM three helper template
- Video: three.js and ZIM options - different combinations
- File 2: options - three.js small & all interactive
- File 3: options - three.js big but only ZIM interactive
- File 4: options - TextureActive (ZIM in three.js)
- File 5: options - TextureActive with Ortho Camera
TUTORIALS
MORE REFERENCE VIDS