Home > Experimental, Front End Development, How to, Javascript > 3D Plane for jQuery 3D Engine

3D Plane for jQuery 3D Engine

September 16th, 2009


In the last post we created a 3D Engine with jQuery.  This time around we’re going to make a new shape and make it interact with the mouse.

 

What We’re Making

I decided not to tackle too tough a shape as I wanted to show how to interact with the mouse.  We’ll be making a plane that rotates the further you get from the center.

Download Example

plane rotating

 

Getting Started

If you haven’t seen how the 3D engine works I recommend visiting Making a 3D Engine in jQuery and getting caught up.  The first thing we’re going to tackle is the plane.  We’re going to create a JavaScript file that we’ll import into our HTML file. The code isn’t too complicated.  We’re creating an array of 3d points. 

Lets look at the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var Plane = function (size){
   
    if (size === undefined){
        size = 10;
    }

    this.pointsArray = [
        this.make3DPoint(-size,size,0),
        this.make3DPoint(size,size,0),
        this.make3DPoint(size,-size,0),
        this.make3DPoint(-size,-size,0)
    ];
       
};

Plane.prototype = new DisplayObject3D();

 

It’s pretty much the same as the Cube in the previous post.  The only difference is it’s less points.  This would be a good opportunity to walk you through how each point is placed.  The Plane class has 1 argument.  The size of the Plane.  We’ll use this size to plot our points.  Let’s look at the first point. (-size,size,0)  So if we pass in a size of 100, then the 3d point would be (-100,100,0) Which puts a point 100 points to the left and 100 up.  The z value is at zero because it’s a plane.  All the points are going to sit line up along the z axis.  The next point is (100,100,0). This is the top right point.  (100,-100,0) is bottom left. Lastly (-100,-100,0)  is bottom right.

points

 

Mouse Interaction

Now that we have our plane made, we’ll just import it into our html file.  Just like our previous post we’ll have to create our Camera,Object holder, Object and Scene. Now we’ll tackle having it interact with the mouse.

Here is the new jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//Mouse x and y
var mouseX,mouseY = 0;

//x and y value of container
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;

//rotation speed
var speed = 6000;

//when the mouse moves...
$().mousemove(function(e){
   
    //Figure out how far it is from the center of the container
    mouseX = e.clientX - offsetX - (container.width() / 2);
    mouseY = e.clientY - offsetY - (container.height() / 2);
});


var animateIt = function(){
   
    //Rotate along the y axis when the mouse is moved left and right
    if (mouseX != undefined){
        axisRotation.y += (mouseX) / speed
    }
   
    //Rotate along the x axis when the mouse moves up and down.
    if (mouseY != undefined){
        axisRotation.x -= mouseY / speed;
    }
   
    //Render the scene.
    scene.renderCamera(camera);
   
};

//keep calling function every 20 milliseconds.
setInterval(animateIt, 20);

 

code explained

Anytime the mouse moved we would figure out how far the mouse is from the center of the object.  Then we assign it to variables that will be used in a function that is called at set intervals.  In that function we simply divide the mouse value by a speed variable and apply it to the axisRotation.  You can adjust the sensitivity of the mouse by increasing or decreasing the speed value.  You might be wondering why we’re applying the mouseX to the y value of axisRotation.  This is because we want to control rotating on the y axis with our mouse moving left and right.  Kind of like opening and closing a door.

axis

 

Here is the code all together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
    <title>3d engine</title>
    <style type="text/css" media="screen">
        #item{
            width:100px;
            height:100px;
            margin:0 auto;
            top:300px;
            position: relative;
           
        }
        ul{
            list-style-type: none;
        }
        body{
            background-color: #111;
            color: #69c;
            font-family: Arial, "MS Trebuchet", sans-serif;
            font-weight: bold;
            font-size:2em;
        }
    </style>
</head>
<body>
    <div id="item">
    </div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Plane.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //<![CDATA[
   
$(document).ready(function() {

    var camera = new Camera3D();
    camera.init(0,0,0,300);
   
    var container = $("#item")
   
    var item = new Object3D(container);

    item.addChild(new Plane(100));
   
    var scene = new Scene3D();
    scene.addToScene(item);
   
   
    var mouseX,mouseY = 0;
    var offsetX = $("#item").offset().left;
    var offsetY = $("#item").offset().top;
    var speed = 6000;
   
    $().mousemove(function(e){
        mouseX = e.clientX - offsetX - (container.width() / 2);
        mouseY = e.clientY - offsetY - (container.height() / 2);
    });
   
    var animateIt = function(){
        if (mouseX != undefined){
            axisRotation.y += (mouseX) / speed
        }
       
        if (mouseY != undefined){
            axisRotation.x -= mouseY / speed;
        }

        scene.renderCamera(camera);
       
    };
   
   
    setInterval(animateIt, 20);
   
   
    });
    //]]>
</script>
</html>

 

Next Step

Now that the mouse Interaction is taken care of.  The next shape I’m going to take a stab at is the ring.  Stay tuned for more 3D shapes.

 

Download Example

 

Related

3D Engine

Author:
Categories: Experimental, Front End Development, How to, Javascript
Tags: , ,



Top