Need help with zen-3d?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

shawn0326
151 Stars 17 Forks MIT License 555 Commits 0 Opened issues

Description

JavaScript 3D library.

Services available

!
?

Need anything else?

Contributors list

# 74,312
egret
HTML
html5-g...
html5
534 commits
# 523,849
Dart
reactjs
immutab...
Shell
2 commits

zen-3d

NPM Package Build Size NPM Downloads License Issues

devDependencies Status Language grade: JavaScript Total alerts

JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D/2D library. The library only provides WebGL renderers.

ExamplesRoadMapDocumentationTests

Usage

Use

zen3d.js
or
zen3d.min.js
in your page:

or import as es6 module:

import * as zen3d from 'js/zen3d.module.js';

draw a simple cube:

var width = window.innerWidth || 2;
var height = window.innerHeight || 2;

var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; document.body.appendChild(canvas);

var gl = canvas.getContext("webgl2", { antialias: true, alpha: false, stencil: true }); var glCore = new zen3d.WebGLCore(gl); glCore.state.colorBuffer.setClear(0.1, 0.1, 0.1, 1); var backRenderTarget = new zen3d.RenderTargetBack(canvas);

var scene = new zen3d.Scene();

var geometry = new zen3d.CubeGeometry(8, 8, 8); var material = new zen3d.PBRMaterial(); var mesh = new zen3d.Mesh(geometry, material); scene.add(mesh);

var ambientLight = new zen3d.AmbientLight(0xffffff); scene.add(ambientLight);

var directionalLight = new zen3d.DirectionalLight(0xffffff); directionalLight.position.set(-5, 5, 5); directionalLight.lookAt(new zen3d.Vector3(), new zen3d.Vector3(0, 1, 0)); scene.add(directionalLight);

var camera = new zen3d.Camera(); camera.position.set(0, 10, 30); camera.lookAt(new zen3d.Vector3(0, 0, 0), new zen3d.Vector3(0, 1, 0)); camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000); scene.add(camera);

function loop(count) { requestAnimationFrame(loop);

mesh.euler.y = count / 1000 * .5; // rotate cube

scene.updateMatrix();
scene.updateLights();

glCore.renderTarget.setRenderTarget(backRenderTarget);

glCore.clear(true, true, false);

glCore.render(scene, camera);

} requestAnimationFrame(loop);

WebGL2 Support

Projects

Change log

Releases

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.