hunterlarco / voxel.css Goto Github PK

View Code? Open in Web Editor NEW

3.3K 92.0 131.0 3.62 MB

A lightweight 3D CSS voxel library.

Home Page: http://voxelcss.com

License: MIT License

HTML 13.69% JavaScript 32.94% CSS 53.01% Python 0.36%

voxel.css's Introduction

#voxel.css

JavaScript 3D library

The goal of this project is to provide a lightweight 3D CSS library with very simple implementation.

Demo — Documentation

Usage

Download the minified library and css file and include both in your html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>voxel.css</title>
		<link rel="stylesheet" href="css/voxel.css"></link>
	</head>
	<body>
		<script src="js/voxelcss.js"></script>
	</body>
</html>

This code creates a scene, a savable world, and an editor that allow you to immediately begin building worlds with voxel.css and see how little code is required to make complex 3D voxel games. If you've built anything in the past it auto-loads your previous build instead of creating a new one.

function init(element) {
	var PI          = Math.PI;
	var scene       = new voxelcss.Scene();
	var lightSource = new voxelcss.LightSource(300, 300, 300, 750, 0.3, 1);
	var world       = new voxelcss.World(scene);
	var editor      = new voxelcss.Editor(world);

	scene.rotate(-PI / 8, PI / 4, 0);
	scene.attach(element);
	scene.addLightSource(lightSource);

	editor.enableAutoSave();
	editor.load();

	if (world.getVoxels().length === 0) {
		editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
			mesh: voxelcss.Meshes.grass
		}));
	}
}

init(document.body);

If everything went well you should see this.

Core Concepts

There are 4 important classes. Scene, World, Editor and of course Voxel. The distinctions between a Scene, World, and Editor are important to know if you are to leverage them well. A Scene is simply a camera. It can rotate, pan, zoom, and contain voxels. Meanwhile a World can save the state of any voxels added to it. This is important as voxels that are in a scene but not in a world are not savable. Lastly the Editor creates all the mouse events necessary to allow the user to add and remove blocks from a World with the added option to autosave all changes.

Properties and Classes

Core Classes — Interfaces

Future Features

Shadows
Firefox back-face culling
Mobile touch support

Projects built with voxel.css

https://codepen.io/wesbos/pen/EPLVMv?editors=0110

Change log

releases

voxel.css's People

Contributors

Stargazers

Watchers

Forkers

jamstop fengweijp micaeloliveira agimat bpartridge83 kodemill vipcodeerror duggi rssh-jp thithip execute0 aahart911 imjerrybao horb frialex hsavran maheshbabu jibiabraham dieface wesbos slshaw115 moul bradparks eric-boone sebasstrogg pedrohm benbuck123 pellmellism jiangjian-zh rlugojr grizzl3 yone098 kraftika noscripter alfhub msoftware chandra10207 jlruizc kevinrodbe vkarampinis duataud tehtuna sevansio javagner carabina jdwallace12 marcosvicente langelee yeyuguo fabiand93 adwardliu mvladk gustavoquinalha nodeps dougdesigner culttm redanium faridskyman milapdave lonid vugluskr86 jsdemos irishgordo alvarlaigna hughker prayagverma umarmughal brandturner jayvi cybernetics tommymckinley denismalofeyev danielcsathyanesan junred wangmd premaebooks womol linzehua lina frankie-666 notyours180 helenasilkina porcelainheart cargarg7 djlxiaoshi hvy javascriptextjs jinjianfeng mardoksp fiatluox vinicius5581 carlswt juliascript a382695908 sparkinzy is00hcw davidmr001 meihangbo sergahell cat-rat

voxel.css's Issues

Rendering issue on IE

Here is a screen shot of the demo on my IE.

touch support

I think it is simple like this:
mousedown === touchstart
mousemove === touchmove
mouseup === touchend
http://stackoverflow.com/questions/13510999/when-to-use-touchmove-vs-mousemove

What should happen when applying opacity less than 1 to a node with descendants?

Hello Huner,

I'd like your opinion:

If we have a node (in a 3D scene), and it has many descendants (a sub tree), what should happen when we apply opacity with a value less than 1 to it?

It, and all of it's children should become transparent, multiplying opacities down the scene graph.
It's content should become transparent but not that of its descendants.
Same as (1), but the whole object should be flattened into a plane.

The reason I want your opinion is because the new specs for CSS 3D (css-transforms) state here that the answer is (3).

To see what I mean, view these two examples in Chrome 53 or higher:

The second example has opacity applied to the node that contains all the sub-nodes which compose the car. The opacity, according to spec, flattens the car into a plane (turns it into paper!).

I'm asking various 3D engine authors for opinions of what the correct or most expected behavior should be.

All the best,
~ Joe

Two voxels at same location with same dimension glitch

If two voxels are added to the same location with the same dimensions, a visual glitch will happen!

What it looks like: http://prntscr.com/9wypm3
How to replicate it: https://gist.github.com/Avery246813579/22fb1c36adcbb2e06e36

I would suggest checking if there is a voxel already at a certain location with the same dimensions, and either removing the voxel already there, or not drawing one of the voxels.

I could fix with a pull request.

example code does not work on codepen

https://codepen.io/wesbos/pen/EPLVMv?editors=0110
Nothing renders when you visit the link on chrome and firefox

Back-face rendering issue in Chrome 48 on a Nexus 4

~~I've a screenshot to attach, but I'm on mobile right now...~~

Updated with screenshot below:

add bower support

It would be great if you could your lib to the bower package repository

Prefix CSS Classes

I suggest prefixing all CSS classes with "voxel-" to avoid any collision.
.scene should be .voxel-scene.

If you agree, I could send you a PR :)

Library Name

Is this library called voxel or voxel.css.
Either way, we should use one of both names.

https://github.com/HunterLarco/voxel.css/tree/master/dist
https://github.com/HunterLarco/voxel.css/tree/master/Server/voxelcss

Which one do you prefer?

voxel.css
voxel.js

voxel.css.css
voxel.css.js

voxelcss.css
voxelcss.js

My vote does to voxelcss.* because voxel.* might be too generic and could collide with some other libraries. This library is mainly focused on the CSS technique.
Also voxel.css.* looks a bit confusing in my opinion.

Seting up CI

Hello @HunterLarco 😃

preScriptum: voxell just look AWESOME :D

I propose you to set up Continuous Integration if you are open to it.
I see you have existing test, so it will be running them on travis.
The only thing I need is your go, and you telling me how you run your test so I can automate it.

bestRegards 😃

@AdrieanKhisbe

Thank you!

Add MIT License.

package.json refers to MIT license but now license is found. :)

...
 "license": "MIT",
...

Crash label:bug

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>3D ROOM</title>
  <link rel="stylesheet" href="style.css">
<!--</head>-->
  </head>
<body>
<script src="script.js"></script>
<script>
var scene;
var world;
var color = "#ffeb3b";
function graph(x,y,z) {
    var voxel = new voxelcss.Voxel(x*50, y*50, z*50, 50, {
      mesh: new voxelcss.Mesh(new voxelcss.ColorFace(color))
    });
    world.add(voxel);
    voxel.addEventListener("VoxelClick",function() {alert();});
}
function init(element) {
  var PI          = Math.PI;
  scene       = new voxelcss.Scene();
  var lightSource = new voxelcss.LightSource(300, 300, 300, 750, 0.3, 1);
  world       = new voxelcss.World(scene);
  scene.rotate(-PI / 8, PI / 4, 0);
  scene.attach(element);
  scene.addLightSource(lightSource);
    for(x=0;x<=100;x++) {
        for(z=0;z<=100;z++) {graph(x,0,z);}
        graph(x,100,100);
        graph(x,100,0);
    }
    for(y=0;y<=100;y++) {
        graph(0,y,0);
        graph(100,y,0);
        graph(0,y,100);
        graph(100,y,100);
    }
    for (z=0; z<=100; z++) {
        graph(0,100,z);
        graph(100,100,z);
    }
}
init(document.body); </script>
</body>
</html>

Try this. It crashes the browser.