3d Drawing Project

Pane for drawing in pseudo 3D
Today we are going to go back to the practical lessons for html5. I think we have already done a good break in our lessons. In this tutorial I will show you how to create a pane for drawing which is spinning on its axis (on html5 canvas object). Each of your drawn shape will be spinning in pseudo 3D mode. Two objects (prototypes) are defined here: Point and Shape (each shape consists of multiple points). The main idea – to project and be rotated points of figures, as well as to draw a curved line between these points.

• 3d Drawing Project
• 3d Drawing Projected To Virtual Space
• 3d Drawings Easy

Pinshape is a thriving 3D printing community & marketplace full of quality 3D printable files. Sell & share your designs, or download 3D files to print now!

• To open a project drawing In the Project Manager tree view, right-click a drawing. To view a project drawing in read-only mode In the Project Manager tree view, right-click a drawing. Click Open Read-Only. To preview drawings in the Project Manager In the Project Manager tree view, click the drawing you want to preview. In the Project Manager, on the bottom toolbar, click Preview.
• Design online floor plans, place furniture, and visualize your project in 3D.
• Open the drawing in AutoCAD then switch to 3D modeling workspace and change visual style to Shaded. Change your view to Top from View Cube or from views drop down menu. Understanding FLATSHOT dialogue box: Select FLATSHOT tool from expanded Section panel of the Home tab or type FLATSHOT on the command line and press enter.

Voice chat changer. [sociallocker]

[/sociallocker]

Now we can download the source package, unpack it, and start looking at the code

Step 1. HTML

In the first step we have to prepare some basic html code:

index.html

As usual, we include scripts in the header section of the document, but, in our case, it doesn't actually matter where it is exactly. Our JS code will be executed only when the document will be downloaded

Step 2. JS (HTML5)

As usual, in the beginning of every JS code, we can define several global variables:

js/main.js

3d Drawing Project

Now, we can introduce our first low level object – Point:

For an object ‘Point' we have a whole set of internal properties and only two functions: project and rotate. Another object ‘Shape' is a more complex object:

It has less params, but more functions (addPoint, rotate and draw). Now, we can start adding few main scene functions: main scene (canvas) initialization (sceneInit), rendering function (drawScene) and random color generator (getRandomColor):

Create your own 3d model. In sceneInit we added two shapes. As you have already noticed, in order to handle with mouse events we use an instance of CPointer class. Here is it:

js/pointer.js

Conclusion

Voice chat changer. [sociallocker]

[/sociallocker]

Now we can download the source package, unpack it, and start looking at the code

Step 1. HTML

In the first step we have to prepare some basic html code:

index.html

As usual, we include scripts in the header section of the document, but, in our case, it doesn't actually matter where it is exactly. Our JS code will be executed only when the document will be downloaded

Step 2. JS (HTML5)

As usual, in the beginning of every JS code, we can define several global variables:

js/main.js

3d Drawing Project

Now, we can introduce our first low level object – Point:

For an object ‘Point' we have a whole set of internal properties and only two functions: project and rotate. Another object ‘Shape' is a more complex object:

It has less params, but more functions (addPoint, rotate and draw). Now, we can start adding few main scene functions: main scene (canvas) initialization (sceneInit), rendering function (drawScene) and random color generator (getRandomColor):

Create your own 3d model. In sceneInit we added two shapes. As you have already noticed, in order to handle with mouse events we use an instance of CPointer class. Here is it:

js/pointer.js

Conclusion

3d Drawing Projected To Virtual Space

Today, we have built the rotating panel where we can draw (with the mouse) using HTML5. I hope you enjoyed our lesson. Good luck and welcome back.

3d Drawings Easy

Hi Ali,
If you read the tutorial carefully, you could see that all objects (drawings) are stored in the aShapes array.