1. Products
  2.   3D
  3.   JavaScript
  4.   Zen-3d

s

 
  

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.

Zen-3d is an open source JavaScript library that provides a complete set of features for creating and handling 3D/2D libraries. The library has included support for several important features such as 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, combine 2D and 3D, WebGL attribute and uniforms, add point draw, shadow mapping and many more.

The open source Zen-3D library adopts a modular architecture, allowing software developers to pick and choose the components they need for their projects. Despite its simplicity, Zen-3D doesn't compromise on performance. Leveraging modern WebGL technologies, Zen-3D is capable of rendering complex scenes with smooth frame rates, ensuring a seamless user experience across a variety of devices.

The library Zen-3d provides WebGL renderers. WebGL is a JavaScript API that supports the rendering of interactive 2D and 3D computer graphics inside any compatible web browser without the use of any plug-ins. In the old days, it was very hard to render a 3D CAD diagram on a computer. Now several companies are working hard to make it easy to handle and are making use of WebGL in order to run everything in the browser. Almost every modern browser provides support for WebGL.

Previous Next

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));

 English