A public domain JavaScript library for easing the development of HTML 3D applications.

API documentation is found at: https://peteroupc.github.io/html3dutil

The file "glutil_min.js" is a minified single-file version of the library. Include it in your HTML as follows:

  <script type="text/javascript" src="glutil_min.js"></script>

Please Note: Despite the MIT License appearing in the License tab of this page, this project is released to the Public Domain under CC0 (it can be used for any purpose, commercial or noncommercial). CodePlex won't allow me to choose a Public Domain or Creative Commons Zero option as a license.

Overview

https://peteroupc.github.io/html3dutil/tutorial-overview.html

Demos

  • simple.html - A simple demo using this library.
  • squares.html - Demonstrates shader-based filters.
  • compositeMesh.html - Demonstrates combining multiple meshes into one.
  • shapes.html - Demonstrates the built-in shapes.
  • platonic.html - A demo featuring the five platonic solids. Demonstrates how vertex and index arrays are built up to create geometric meshes.
  • selfpulse.html - Demonstrates a rotating, pulsating box.
  • surfaces.html - Demonstrates using evaluators to generate parametric surfaces.
  • stl.html - Demonstrates loading 3D models.
  • textured.html - Demonstrates loading textures and applying them to 3D shapes.
  • tris.html - Demonstrates a particle system.
  • gradient.html - Demonstrates generating a custom texture -- a linear gradient from one color to another.
  • starfield.html - Demo of a star field.

Examples

  // Create the 3D scene; find the HTML canvas and pass it
  // to Scene3D.
  var scene=new Scene3D(document.getElementById("canvas"));
  // Set the perspective view.  Camera has a 45-degree field of view
  // and will see objects from 0.1 to 100 units away.
  scene.setPerspective(45,scene.getAspect(),0.1,100);
  // Move the camera back 40 units.
  scene.setLookAt([0,0,40]);
  // Create a box mesh 10 units in width, 20 units
  // in height, and 20 units in depth
  var mesh=Meshes.createBox(10,10,10);
  // Create a shape based on the mesh and give it a red color
  var shape=scene.makeShape(mesh).setColor("red");
  // Add the shape to the scene
  scene.addShape(shape);
  // Set the starting rotation
  var rotation=[0,0,0];
  // Set up the render loop
  GLUtil.renderLoop(function(){
   rotation[0]+=.5; // Adjust x-rotation by .5 degree
   rotation[1]+=1.0; // Adjust y-rotation by 1 degree
   // Update the shape's rotation
   shape.setQuaternion(GLMath.quatFromTaitBryan(rotation));
   // Render the scene
   scene.render();
  });

Last edited Apr 30, 2015 at 9:10 PM by peteroupc, version 3