shawn0326 / Zen 3d
Licence: mit
JavaScript 3D library.
Stars: ✭ 155
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Zen 3d
Layaair discard
This is old LayaAir veriosn writetten by ActionScript 3.0 ,now LayaAir is using TypeScript as the Engine Script,Please use https://github.com/layabox/LayaAir instead.
Stars: ✭ 1,858 (+1098.71%)
Mutual labels: webgl, html5, canvas
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-1.94%)
Mutual labels: webgl, html5, canvas
Melonjs
a fresh & lightweight javascript game engine
Stars: ✭ 3,721 (+2300.65%)
Mutual labels: webgl, html5, canvas
Freeciv Web
Freeciv-web is an Open Source strategy game implemented in HTML5 and WebGL, which can be played online against other players, or in single player mode against AI opponents.
Stars: ✭ 1,626 (+949.03%)
Mutual labels: webgl, html5, canvas
Phaser3 Docs
Phaser 3 Documentation and TypeScript Defs
Stars: ✭ 339 (+118.71%)
Mutual labels: webgl, html5, canvas
Taro
A lightweight 3D game engine for the web.
Stars: ✭ 345 (+122.58%)
Mutual labels: webgl, html5, canvas
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (+570.32%)
Mutual labels: webgl, html5, canvas
Phaser Kinetic Scrolling Plugin
Kinetic Scrolling plugin for Canvas using Phaser Framework
Stars: ✭ 117 (-24.52%)
Mutual labels: webgl, html5
Knowledge
文档着重构建一个完整的「前端技术架构图谱」,方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。
Stars: ✭ 1,620 (+945.16%)
Mutual labels: webgl, canvas
Foster Ts
A WebGL + TypeScript 2D Game framework with a Scene>Entity>Component model.
Stars: ✭ 112 (-27.74%)
Mutual labels: webgl, html5
Wxdraw
A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼
Stars: ✭ 1,625 (+948.39%)
Mutual labels: html5, canvas
Skia Wasm Port
Port of the Skia drawing library to wasm, for use in javascript (node & browser)
Stars: ✭ 131 (-15.48%)
Mutual labels: webgl, html5
The Matrix Effect
The incredible effect of rain of letters in the style of the Matrix trilogy.
Stars: ✭ 109 (-29.68%)
Mutual labels: html5, canvas
Gcanvas
A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎) https://alibaba.github.io/GCanvas
Stars: ✭ 1,705 (+1000%)
Mutual labels: webgl, canvas
Phaser Examples
Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework.
Stars: ✭ 1,680 (+983.87%)
Mutual labels: webgl, canvas
zen-3d
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.
Examples — RoadMap — Documentation — Tests
Usage
Use zen3d.js
or zen3d.min.js
in your page:
<script src="zen3d.min.js"></script>
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
- Multiple Render Targets. (WebGL 1.0 extension / WebGL 2.0)
- Instancing. (WebGL 1.0 extension / WebGL 2.0)
- Vertex Array Object. (WebGL 1.0 extension / WebGL 2.0)
- Shader Texture LOD. (WebGL 1.0 extension / WebGL 2.0)
- Shadow Sampler. (WebGL 2.0)
- Fragment Depth. (TODO)
- Transform Feedback. (TODO)
- Sampler Objects. (TODO)
- 3D Texture. (WebGL 2.0)
- Multisampled Renderbuffers. (WebGL 2.0)
Projects
Change log
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].