Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 

jQuery.three.world

ThreeWorld is an attempt to combine the awesomeness of Three.js with the superpowers of jquery. ThreeWorld comes as a plugin to make it easy for the following

The aim of this library is to

  • Implement the ease of jQuery to create threejs scenes
  • Create multiple views inside the scene
  • Create multiple webgl rendering windows on the same html page (I am seriously wondering the use of this)

Actually, jquery.three.world started as a simple javascript class but soon due to the requirements in my research, was made into a jquery plugin so that the entire world can either benefit or suffer from it.

Basic Usage

In a nutshell, it is easy as this

$(function()
{
  $('div').threeworld();
  $('div').threeworld('render');

});

to create this

Alt text

Adding a cube

$(function()
{
  $('div').threeworld();
  var cubeGeometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1);
  var cubeMaterial = new THREE.MeshBasicMaterial({
                wireframe: false,
                color: 0xCCCCCC
            });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  $("div").threeworld('add', cube);
  $("div").threeworld('render');
});

will result in this

Alt text

Dependency libraries

<script src="http://threejs.org/build/three.min.js"></script>
<script src="./scripts/libraries/Detector.js"></script>
<script src="./scripts/libraries/stats.min.js"></script>
<script src="./scripts/libraries/ObjLoader.js"></script>
<script src="./scripts/libraries/ColladaLoader.js"></script>        

Finally for now,

<script src="./scripts/libraries/jquery.three.world.js"></script>

Kindly hold on for some time more and the wiki will be complete for some advanced usage. Also I sincerely welcome any contributors to this project if you like it.

#Conclusion

It was funny to see that the template offered by GitHub for creating the README.MD contained the same closing lines I wanted. Hence I am not deleting them and retaining as my messages. Thank you everyone...

This is on GitHub so let me know if I've b0rked it somewhere.

Props to Mr. Doob and his code editor, from which the inspiration to this, and some handy implementation hints, came.

Stuff used to make this:

  • marked for Markdown parsing
  • CodeMirror for the awesome syntax-highlighted editor
  • highlight.js for syntax highlighting in output code blocks
  • js-deflate for gzipping of data to make it fit in URLs

About

A wrapper for creating three.js worlds the jquery way

Resources

Releases

No releases published

Packages

No packages published