ArtPoloGabriel: Resource Speaker for an IT Seminar

Once again yours truly is again cordially invited as Resource Speaker (with team ofcourse πŸ™‚ for a Training Computer Literacy (Topics: Tips & Tricks: Amazingly faster computer, Understanding how computer works & its operation, Program & files protection, Internet and System Integration, Inter-connectivity and inter-operability, and Web design & development) – July 12-13, 2012 San Jose City Hall (City Hall Staff & Officials will be the participants)

UP Diliman 3d virtual tour at

Once again, team made another 3d interactive virtual tour, and this time its the University of the Philippines, Diliman famous shrine.

Actually, the 3d file pattern came from 3D Philippines Initiative which is in Sketchup format for Google Earth. We extract the 3d file and rebuilt it using open source 3d authoring tools & utilities to comply with the web browser standards, then we program it using simulation engines for the collision & physics features.

We are hoping that all Pilipino will support our project for this venture is created for every Pilipino.

3d interactive in less than 5 minutes

3d interactive 101 : Make a 3d interactive in less than 5 minutes

Introducing Blender 3d – its a free 3d modeling software with built-in game engine.

download it at try getting the oldest version for our tutorial (new ones are great but we wont need too much for now, just the basic. In this tutorial i only use version 2.25 so try downloading the same version) – why the old version? well, you don’t need an army to defeat an easy enemy – gamers thought πŸ™‚

install it on your machine, make sure you downloaded the right installer for your operating system.

open the application – you will see gray interface with many thin lines like the photo below:


artpologabriel001 [1024x768]


artpologabriel002 [1024x768]

go to “camera view” – see “menu – view” at the top

artpologabriel003 [1024x768]right-click the vertical thin black line – (see photo below), and hit G key to grab it (its the camera), then drag it a bit upward to see the grid lines (default floor), then right-click to end the dragging & position it.


artpologabriel004 [1024x768]

Now you will see a tiny flat square lying on the floor, you may want to scale it, right-click to select then hit S & drag to scale it. artpologabriel005 [1024x768]Scaled artpologabriel006 [1024x768]

hit Space – you will see a pop up menu, click add – Mesh – Cube

artpologabriel007 [1024x768] artpologabriel008 [1024x768] artpologabriel009 [1024x768] artpologabriel010 [1024x768] artpologabriel011 [1024x768] artpologabriel012 [1024x768] artpologabriel013 [1024x768] artpologabriel014 [1024x768] artpologabriel015 [1024x768] artpologabriel016 [1024x768] artpologabriel017 [1024x768] artpologabriel018 [1024x768] artpologabriel019 [1024x768] artpologabriel020 [1024x768]




click on the realtime button, make sure the cube is selected (its pink when selected)

add a sensor, just click it.. later we will adjust some option

then a controller, just click it again..

then an actuators, yes just click it..

connect the sensor to controller, by click & dragging the small gold icons to each other

add some parameters, find the dRot shift right click on the first column then put some numeric value, lets make it .01 value. this is actually adding local rotation X – to the cube (remember X Y Z axis? will explain it on my other tutorials later).

Back to the sensor – leftclick the button that says “always” and select “keyboard” – yes you just give it a user interactive option.

on the button labeled “key” – hit it then choose any keyboard key, i used SPACE for this tutorial

Let’s simulate it or let me say – run it on game engine, yes i said that this blender3d has a builtin game engine – awesome right πŸ™‚ hit START GAME and voila – nothing happens πŸ™

try hitting the SPACE key.. and if you followed the instructions the cube will rotate, everytime you hit SPACE on your keyboard.

Next, is.. play around with different value of actuators then try using other sensors’s options.. try adding other MESH objects like sphere, tube, etc..

NO PHOTOS – See this link

I will post other tutorials, shading the interactive interface, adding textures & materials, gravity, physics etc..

Basic & Simple HTML-CSS Menu show/hide SubMenu

This is my tutorial in making basic & simple HTML/CSS Menu that shows & hide SubMenus on Mouse Over. There are many other tutorials out there that maybe be better but quite complicated and heavy for beginners.

here it goes:

Create a style tag for your menu, dont forget the html/head/body tags – remember to put your stylesheet inside head tag.



Leave it without any parameters/option for now (later do as u wanted πŸ™‚

next, addΒ  the menu list

.menu li{}

if you want horizontal menu use float:left on list tags <li> else the default appearance will be vertical menu. then add your other style of your liking such as width, height, background-color/images, etc. (later recommended)

.menu li{ float:left}

next will be your submenu, hide it using display:none (or visibility: hidden for CSS3)

.menu ul{display:none}

Remember your main menu is at <li> tags and it holds your submenus at <ul> tags




Now here comes the magic that will reveal the submenu when the mouse is located over the menu (hovering they say)

add the following to your style

.menu li:hover ul{display: block;}

then again, add your other style of your liking such as width, height, background-color/images, etc.

see it live atΒ

test it – submenu will be in – now u see now u don’t – state πŸ™‚


Final code:



.menu li{
display: block;
width: 200px;
height; 50px;
.menu ul{
display: none;
.menu li:hover ul{
display: block;
background-color: blue;

<ul>home 1</ul>
<ul>home 2</ul>