Skip to content
forked from HUSTFE/HakeCSS3D

A 3d renderer using css3 to make web page view

License

Notifications You must be signed in to change notification settings

giser/HakeCSS3D

 
 

Repository files navigation

Hake CSS3D Renderer

npm version

This project inspired by Shrek.Wang's css3d-engine

I start to rewrite and fix the problem that it can't using through npm

What is this

This is a 3d renderer using css3 to make web page view, it's based on Shrek.Wang's css3d-engine. Using ES6 to write make it can import using ES6; Now it can render simple items like plane and box, more item will join in the future.

How to use

You can clone this repository to use webpack build, or using the lib folder js.min to use;

After you install and import this library.

Common Function

  • x.position(x,(y,z))
  • x.move(x,(y,z))
  • x.rotation(x,(y,z))
  • x.rotate(x,(y,z))
  • x.scale(x,(y,z))

Stage

// You should get a instance of root component first;
var h3 = new HakeCSS3D();
// Then use instance to create a stage;
var stage = new h3.Stage();
// Define basic information for your stage;
stage.size(window.innerWidth, window.innerHeight)
      .material({
            color : "#cccccc"
          })
      .update();
//Then mount it on a exist el;
document.getElementById('main').appendChild(stage.el);

Stage represent a single view of 3d scene, it's a container for other Elements. For stage, we not recommend to transform so only set its material and size is fine.

TODO List

  1. Add more item to use and create.
  2. ......

About

A 3d renderer using css3 to make web page view

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 89.0%
  • HTML 11.0%