How To Create A 3D Building! {And Then Walk Inside It!!}

How To Create A 3D Building! {And Then Walk Inside It!!}

• • https://github.com/utopian-io/utopian.io < - -

Never created a virtual space? Never created a video game? Are you scared to learn programming? PERFECT! Anyone with basic drawing ability can make games and virtual worlds. We will create a building: Load it into a HTML builder and then walk inside!

Let's get started. Go ahead and head to http://www.tinkercad.com and create a new account.

Tinkercad is the "paint" of creating 3D assets. It is simple to use but a powerful program.

On the top left of the homepage there is a button that says "create new asset." Go ahead and click that.

You are now in the Tinkercad builder. The blue grid is your work-plane. It helps me to think of the blue grid as the "ground."

Let's get started on the building! Simply click on the red square and hold down the mouse while you drag the square over the blue grid. {above}

Now you should see the red square on the blue grid. click and hold the little black square {that is highlighted above} and drag it backwards.

Now do the same thing with the little black square on the LEFT. {Don't worry about the exact lengths. Just make a big box like I do.}

Okay now my favorite part! Click and hold that weird little button in the middle of the "square." Now you can drag your shape UPWARDS! Woah! ;p

Now click the RED circle labeled "Solid."

Most buildings aren't bright neon red. Lets click on any color between grey and black.

Okay now we are going to ZOOM into the workplace! Let's take a CLOSER look at the building he he he First click and hold the "ctrl" button. Then click anywhere on the screen and drag the mouse around. this rotates your view. Try and copy the angle of the building in the picture above.

Now click the "zoom in" button {+} twice.

^^^^^^^This should be your new point of view. ^^^^^^^^^^

Okay now you are actually going to hit "ctrl+c" then "ctrl+v. {COPY AND PASTE}. Now there will be two buildings! What we are actually doing is hollowing out the one building. It it surprisingly easy don't worry.

Slowly and carefully drag each corner of the new square and also the top in the direction of the above arrows. Drag each side one or two units only. Remember to click and hold and move your mouse to adjust the second box.

Now you should have two mismatched boxes. One bigger than the other.

Now click and hold the smaller box and drag it into the other box and center it.

Alright! Now click the button labeled "hole." The box in the middle is now hollow but NOTHING WILL CHANGE VISUALLY.

Okay now hold "shift" and click on the {outer} box. Then click the button labeled "group."

Now your building is hollow! WHAT?! It's that easy? YES. Am I a programmer now!? ALMOST!

Next we are going to build a doorway. The building IS hollow: Although you cant see that yet. Press the Zoom {+} button twice. Then drop another square next to your building. Try and get your screen exactly as above.

Drag your door shape to the left.

Now drag your door shape downwards.

Okay now hold "ctrl" and drag your mouse around and align your view with the front of the door shape. {above}

I adjusted the height and the side to make the shape look more like an actual doorway.

Now adjust the view ONE LAST TIME so you can grab the square that I highlighted in BLUE above. drag the shape backwards 5/10 units.

Now turn the doorway shape into a "hole." {click the "hole" button.}

Hold "shift" and click the big building.

Now you can see the inside of the building!!! WHAT! And you have a cool 3D doorway too. We are done with the building! We will keep it simple for now. but you can come back later and add neon letters, tables,chairs, doors, street lamps, cars, walls, objects on the roof etc.

Click Export for 3D printing.

Click "Obj."

Now right click on the file that saves and Unzip. Then re-save the "obj" file as a "txt" file.

Now we are going to a 2nd website but this part is easy. I created a template to test your first building. So you dont have to code much! But you will still learn some coding. GO TO: https://standing-chess.glitch.me/build.html

Now click the button labeled "IPFS Assets."

This is the screen you can drag and drop your building "txt" file!!!! Your almost inside your creation!!! :p

Drop your file and you will receive two URLS! Copy the longer one.

Click "public/Post.html. Yes now we have to code UGH Don't worry we will cheat. :)

Click "Ctrl + F" and type "pic1". Hit enter.

there are TWO {2} lines of code under "pic1." They both contain a URL that you must replace with the url you copied and pasted. Each line also contains THREE {3} numbers. One number set says " 3 3 3" this is the SCALe and you must increase these numbers. The OTHER numbers controls where the object is. Adjust these numbers till your object is lined up with the floor.

WOW!! YOU ARE DONE!!!! Delete the "build.html" and you can go full screen! Get a VR helmet and you can be fully immersed.Walk around your building! You can even chat with your friends in there now! Now go back to tinkercad and build your first table and chair set ;p

Have fun! -@a1-shroom-spores.