Open Source JavaScript API for Managing 2D & 3D Files
Zen-3d is a Javascript Library that Provides WebGL Renderers; It Supports Gamma Correction, Line Material, Bump Map, Data Texture, Bone Texture, Combines 2D and 3D via Open-Source JavaScript API.
What is Zen-3d Library?
Zen-3d is a JavaScript library that’s open source. It offers a wide range of functions for making and managing 3D/2D libraries. This library includes support for various key features like ambient light for deferred render, shader material param refactor, glTF UV transform support, 2D UI adaptation strategy, spotlight support, gamma correction, line material, bump map support, data texture, bone texture support, combining 2D and 3D, WebGL attribute and uniforms, shadow mapping, and adding point draw, among others.
The Zen-3D library is open source and designed with a modular setup. This means that developers can easily select the specific components they require for their projects. Even though Zen-3D is straightforward, it doesn’t sacrifice performance. By using advanced WebGL technologies, Zen-3D can render intricate scenes smoothly, guaranteeing a seamless experience for users on different devices.
At the Zen-3d library, you can find WebGL renderers. WebGL is a type of JavaScript that helps display interactive 2D and 3D graphics on web browsers that can handle it without needing any extra software. In the past, it was tricky to show a 3D CAD drawing on a computer. But now, many companies are putting effort into simplifying this process and using WebGL to run everything directly in your browser. Most up-to-date browsers now support WebGL.
Getting Started with Zen-3d
The recommended way to install Zen-3d is by using NPM. Please use the following commands for a smooth installation.
Install Zen-3d via NPM
npm i zen-3d Creating a 3D Cube via JavaScript
The open source Zen-3d library has included support for creating a cube or irregular quadrilateral of the dimensions provided. You need to provide the width, height, and depth of the cube and the rest will be easily completed. You can add attributes to geometry, creates a clone of Geometry, Split the geometry into groups, Adds a group to this geometry, copies geometry to the other one, and many more.
How to Add Cube in a 3D Scene inside JavaScript Apps?
// Import Zen-3D library
import Zen3D from 'zen-3d';
// Create a new Zen3D instance
const zen3d = new Zen3D();
// Create a scene
const scene = new zen3d.Scene();
// Add a cube to the scene
const geometry = new zen3d.BoxGeometry();
const material = new zen3d.MeshBasicMaterial({ color: 0xff0000 });
const cube = new zen3d.Mesh(geometry, material);
scene.add(cube);
// Render the scene
const renderer = new zen3d.Renderer();
renderer.render(scene);
Loading and Processing Images
The open source Zen-3d library allows software developers to easily load and process images inside their own applications. The library has included several features for image processing such as reading image and Loading image via URL. You need to set the base path or URL from which to load files. The feature is very helpful while you are loading many images from the same directory.
3D Scene Management
The open source Zen-3d library has provided functionality for 3D Scene creation and management inside using JavaScript commands. It allows software developers to place objects, lights, and cameras. Zen-3d supports Scenes rendering and has provided several features, such as rendering objects into shadow maps, checking the frame before rendering the object, collecting lights info, transforming matrix, automatically calculating the matrix position, defining the Object's parent in the scene, Object's local rotation, define rendering order of scene graph objects and many more. Software Developers can effortlessly create, add, remove, and update objects in the scene hierarchy.
How to Add Objects in a Scene Hierarchy inside JavaScript Apps?
// Create a scene
const scene = new Zen3D.Scene();
// Add objects to the scene
scene.add(new Zen3D.Mesh(geometry, material));
