About Iza | JavaScript 3D Product Designer
Iza | JavaScript 3D Product Designer is a standalone JavaScript instrument for constructing and personalizing merchandise within the browser. Let clients mix interchangeable elements, edit art work instantly on a 3D mannequin or its linked 2D canvas, and see the design and worth replace as they work.
Create a product builder, an art work designer, or each in a single interface. Use it for attire, jewellery, watches, equipment, packaging and different customizable merchandise. Explore the live JavaScript demos.
Principal Options
Linked 2D and 3D Enhancing – Add, transfer, rotate and resize art work in both view. Each home windows share the identical design layers. Present the mannequin, the flat canvas, or each aspect by aspect in both order.
Interchangeable Construct Elements – Provide various elements with grouped selections that swap matching elements collectively. Every possibility can have its personal look, digicam, art work and extra worth.
Dynamic Pricing – Mix the product base worth, further expenses for lively views or Construct elements, and art work costs. Inactive Construct alternate options should not charged. Use the API to attach the configuration to your individual checkout and validate costs in your server.
Create Merchandise from GLB Fashions – Generate product JSON, views, UV silhouettes and preview thumbnails from a ready GLB. Constant mesh naming creates Construct teams routinely. Editable elements want usable UVs. Look-only assemblies could be configured for coloration and materials modifications with out art work modifying.
Textual content, Photographs, Shapes and Paintings – Present textual content templates, buyer picture uploads, SVG graphics, shapes and categorized art work libraries. Configure costs, editable colours and permissions for particular person layers.
Colours and Supplies – Protect authentic mannequin supplies or provide presets comparable to material, leather-based, metallic, glass and ceramic with adjustable properties. Hold colours impartial or synchronize matching layers throughout all views or the lively Construct configuration.
Views and Digital camera Controls – Give every view its personal mannequin binding and saved digicam. Configure lighting, publicity, zoom, choice outlines and non-compulsory cloth-motion results for appropriate fashions.
Print Areas, Rulers and Clipping – Set bodily print dimensions, modify the printing field, clip art work to configured boundaries and use rulers and snapping for placement. Lock base layers whereas leaving buyer art work editable.
2D and 3D Previews – Select flat art work or rendered mannequin views for previews, downloads and printing. Obtain PNG, JPG, SVG or PDF previews. A 3D SVG comprises a rendered picture, not vector mannequin geometry.
Manufacturing Export – Export printable 2D art work utilizing every view’s print dimensions, DPI and bleed. Select PNG, JPG or a mixed multi-page PDF. A number of picture information are packaged in a ZIP. Export the present view or all eligible views and exclude non-printing layers.
Editable Product Export – Package deal the product JSON, GLB and referenced product belongings in a ZIP for reuse. That is separate from manufacturing export, which comprises the printable art work.
Session Saved Designs – Save and reopen designs in the course of the present web page session. New saved designs are cleared on reload except you combine persistent storage by means of the API and occasions.
Versatile Interface – Configure motion bars, modules, object controls, labels, icons and colours. Use responsive layouts, fullscreen or lightbox mode, and select which instruments clients can entry.
Included Product Examples – Discover the shirt, ring, cap, mug, bag, watch, shoe, telephone case, coronary heart pillow and enterprise card examples. Adapt their JSON settings or create a product from your individual mannequin.
JavaScript API and Setup Information – Consists of editable supply modules, a compiled browser script, a root README, demos and JavaScript documentation protecting setup, mannequin preparation, configuration and integration.
Direct Assist – Contact the developer, Tibi @ FWD, for product help.
Technical Necessities
- Browsers: Fashionable Chrome, Edge, Firefox and Safari, together with Android Chrome and iOS Safari, with JavaScript, HTML5 Canvas, WebGL2 and {hardware} acceleration accessible. Efficiency is dependent upon the system and mannequin complexity.
- Internet hosting and improvement: Requires HTTP/HTTPS internet hosting. The compiled model wants no Node.js or PHP on the server. Supply improvement makes use of Node.js 22.x, npm, Vite and esbuild. The README explains setup, construct, preview and watch instructions.
- Libraries: Three.js, Cloth.js, Coloris and DOMPurify are bundled. Google Fonts require web entry when used.
- Fashions: Self-contained, uncompressed GLB information with usable UVs for editable surfaces. Put together fashions at real-world dimension and apply rotation and scale earlier than exporting.
Integration Notes
That is the standalone JavaScript version, not the WordPress or WooCommerce plugin. A database, buyer accounts, checkout and order administration should not included. Join these providers by means of your individual utility when wanted. No exterior rendering service or API key’s required for the designer itself.
Native picture uploads have configurable file-size, dimension and SVG-complexity limits. SVG content material within the Shapes library and native SVG uploads is sanitized. Unsupported or overly advanced uploads are rejected with a proof. Customized server-side add and storage integrations should additionally validate incoming information.
