Home > Experimental, Front End Development, How to, Javascript > 3D Sphere Using jQuery

3D Sphere Using jQuery

September 22nd, 2009

Ever wanted your tag cloud to resemble a ball?  Of course you did.  This tutorial will walk you through how to create a Sphere in jQuery.

What We Are Building

This one can bog down a system in a hurry, but that’s the fun with experimenting with JavaScript.  We will be building a sphere that rotates depending on which way the mouse moves….exciting.

Getting Started

This tutorial is a continuation of a line of 3D jQuery posts.  I would recommend you having a look at the previous post so you’re up to speed.

Now that is out of the way lets get started.  For this project we’ll have 3 files.

• 3DEngine.js
• Sphere.js
• sphere.html

The 3DEngine.js is the same file that was in the previous posts so we won’t be covering that. The Sphere.js holds the Sphere class which is used by the 3D Engine.  Lastly the html file puts everything together.

The Sphere

With the sphere class we’ll be creating a set of 3d points (x,y,z) in an array.  To build the sphere we’re simply going to create a whole bunch of rings that start off small, get larger, then small again.  I’m not sure if this the best way of building a sphere, but it works so I’m not going to worry too much.

Here is the JavaScript:

 1234567891011121314151617181920212223242526 var Sphere = function (radius,sides, numOfItems){         //Step through the number of rings.     for (var j = sides ; j >= 0; j--){                 //Step through each point on a ring.         for (var i = numOfItems / sides; i >= 0; i--)         {             //Space out each point evenly.             var angle = i * Math.PI * 2 / (numOfItems/sides);             var angleB = j * Math.PI * 2 / sides;                         //Figure out the x,y,z co-ordinates of each point.             var x =   Math.sin(angle) * Math.sin(angleB)*radius;             var y =  Math.cos(angle) * Math.sin(angleB)*radius;             var z =  Math.cos(angleB)* radius;                         //Put the point in an array.                                this.pointsArray.push(this.make3DPoint(x,y,z));         }         }; }; //Need to extend class to work in 3d engine. Sphere.prototype = new DisplayObject3D();

There are two loops.  One for the number of rings, the other for the points within each ring.  Inside the inner loop we first figure out where each point should lie, then figure out how that would translate into the x, y and z co-ordinates.

The jQuery / Html

Not much has changed in our jQuery / HTML since the 3d Plane post.  The only thing that has changed is we imported the Sphere.js and instead of adding a plane, we’re adding a sphere.

Here is the HTML:

 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768

Disclaimer

Be careful adding points on this one.  Because the 3D engine doesn’t use html’s canvas just yet, it really can’t handle too many points. I can get away with 100 points on my machine without too much delay.  Chrome handles it the best out of all the browsers I tried.  So use it at your own discretion, you might have some angry viewers if you go too nuts.  This is just meant to be experimental…and cool.

The next step will be to optimize the 3D Engine a bit using the canvas so there won’t be this problem in the future.

Here is all the code together:

JavaScript

 123456789101112131415161718192021 var Sphere = function (radius,sides, numOfItems){     for (var j = sides ; j >= 0; j--){                     for (var i = numOfItems / sides; i >= 0; i--)         {             var angle = i * Math.PI * 2 / (numOfItems/sides);             var angleB = j * Math.PI * 2 / sides;                         var x =   Math.sin(angle) * Math.sin(angleB)*radius;             var y =  Math.cos(angle) * Math.sin(angleB)*radius;             var z =  Math.cos(angleB)* radius;                                             this.pointsArray.push(this.make3DPoint(x,y,z));         }         }; }; Sphere.prototype = new DisplayObject3D();

HTML

 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980             3d engine

Categories:
Tags:

Top