SpaceDebris

prototype

 

 

introduction

The main focus in this project was to use Blender as a model and level designer. Export the scene from Blender to HTML with the threeJS exporter. Prepare the scene to access each object by name and animate them properly with javascript. With this kind of visual editing you can create plenty of levels in almost no time.

To keep things as simple as possible we don’t care too much about GUI, sound and beauty. It’s still a complex scene and it needs some time to understand fully whats happening. Im gonna to explain the main concept of the scripting and modeling tasks. Download the fully commented source code and the Blender file to get more details and see exactly whats going on.

Everything is canvas based so it can easily be ported to any language.

 

overview

Once you have downloaded the source code. The project files are under js/scene/, the blender files are under js/blenderScene/.

 

JS_file

load_screen.js

Create the loadscreen and update it accordingly to the loaded percentage.Also add the introduction if load has finished.

 

 

JS_file

load_blenderScene.js

Init the threeJS render. Load the Blender scene.

 

 

JS_file

init_blenderScene.js

Once the loading process has finished we group and prepare the loaded objects.

 

 

JS_file

init_player.js

Init the player and add some properties like speed, position, lives, fuel etc..

 

 

JS_file

init_particleSystem.js

A basic particle system for the thruster and explosion effect.

 

 

JS_file

init_gameMechanics.js

Check for collisions, add explosions, update Player, check for collectables, etc..

 

 

JS_file

init_GUi.js

Prepare and update the GUI.

 

 

Blender

Blender was used for modeling, texturing and level design. If you don’t know Blender make sure you check it out. It’s a beautiful piece of software, free and open-source. ThreeJS also provides exporters for other 3d software.

Im not going to explain the model and texturing process. There are so many good tutorials that explains how to model and texture with Blender.

 

Just a few things to keep in mind while modeling assets for a 3d game environment with threeJS.

– Name everything properly to access the objects and materials later

– UV unwrap all the object in the scene

– Group things together

– Use the same geometry as often as possible

– Add collision bounds for faster collision detection

– Keep the polycount low

– Texture size

 

There are not many options in Blender which effects the threeJS exporter. Start with a simple scene and test all the options to see what you get.SD_blender_options

 

threeJS

Wikipedia: “Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser.”

We use threeJS to import and display the Blender scene in the web-browser. Before we can access any of the models we have to load the main scene file we have exported from blender.

Once everything is loaded correctly there is some more work to do with the scene. The Blender exporter doesn’t export lights and parent child relationship right now. So we need to add the lights and relationships manual.

Add lights is very easy. Add them to the scene or to a certain object.

The Blender exporter also includes groups and empties. We use this to create a parent child relationship.As we named the group and the empty the same in Blender. We assign now the empty as the parent for each object of the group in Javascript.

 

game mechanics

In this game we don’t use any additional libraries for physics or any game engine. We only care about player movement and collision detection which is actually a really simple task. We just use a standard player movement script.

For collision detection we use the threeJS raycaster. The raycaster shoot rays in every direction and check if they collide with anything and how great the distance is.

 

conclusion

ThreeJS combined with Blender is a very powerful tool. You could even export animated models. Add a game engine and a physics simulator to it and it gets awsome. With this practice you could create A+ games without any cost, all you need is time to create.

 

tools

icn_blender

icn_gimp-150x150

icn_Audacity

  • Ramon Carroll

    This is really awesome. Have you continued to explore this method of development in any other projects?

  • markusT_inkfood

    I have created several demos and test, but nothing serious, they will never be released.
    Check this post out http://www.inkfood.com/tween-3d-objects/, it’s about tween 3d object.
    I’m planning to create more 3d based stuff in 2015.

  • belionvagabond

    hello i try to export my blender scene in .js but my three.js give juste the possibility to save in json why

  • markusT_inkfood

    Thats correct, you can only export to json. The resulting file is pretty small an can be loaded via three.js se here -> Importing a Modeled Mesh From Blender to Three.js

  • http://kenwud.tumblr.com kensu

    i made a very simple “game” in BGE. am not sure what i should do for the next step