K Swamy Vishnubhatla - Developer: 2012

Three Js

Hi,

As I mentioned in my last post, I am here to write a example in three.js. Bit late posting but I didn't get time to post it.

Following code creates one blue box(floor) and red box(object) and allow to move red box using arrow keys.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="Three.js"></script>
<title>Moving Object by using keys</title>
<script type="text/javascript">
    var sceneCamera;
    var renderer = new THREE.WebGLRenderer();
    var scene = new THREE.Scene();
    var objHero;
    window.onload = function(){
       //screen widht and height
       var screenWidth = window.innerWidth-100;
       var screenHeight = window.innerHeight-100;

       //adding renderer element
       renderer.setSize(screenWidth, screenHeight);
       document.body.appendChild(renderer.domElement);


       sceneCamera = new THREE.PerspectiveCamera(40, screenWidth/screenHeight, 1, 1000);
       sceneCamera.position.set(30,50,180);
       sceneCamera.lookAt(scene.position);
       scene.add(sceneCamera);

       var sceneLight = new THREE.DirectionalLight(0xFFFFFF, 5);
       sceneLight.position.z = 6;
       scene.add(sceneLight);

       var groundPlane = new THREE.CubeGeometry(100,1,100);
       var planeMat = new THREE.MeshLambertMaterial({color:0x5500FF});
       var groundMesh = new THREE.Mesh(groundPlane, planeMat);
       scene.add(groundMesh);

       var GeometryHero = new THREE.CubeGeometry(10,10,10);
       var heroMat = new THREE.MeshLambertMaterial({color:0x800000});
       objHero = new THREE.Mesh(GeometryHero, heroMat);
       scene.add(objHero);
       renderer.render(scene, sceneCamera);

       document.addEventListener("keydown", fKeyListener);
    };

    function fKeyListener(e)
    {
       if(e.keyCode == 37) objHero.position.x -= 1;
       else if(e.keyCode == 39) objHero.position.x += 1;
       else if(e.keyCode == 38) objHero.position.z -= 1;
       else if(e.keyCode == 40) objHero.position.z += 1;

       renderer.render(scene, sceneCamera);
    }
</script>
</head>

<body>
</body>
</html>

Any support needed don't hesitate to contact me.

Three.js introduction

Hi everybody, today I am writing about Three JS. I like it lot. :)

Three JS is 3D engine using Java script. I hope you like this sound. Yah really it’s a 3D engine using java script. It doesn’t need any plugins. It’s purely java script engine. It’s using WebGL and HTML 5 canvas elements to display 3D content. Mrdoob (Ricardo Cabello) was introduced Three js

WebGL is a Javascript API for 3D and 2D contents rendering in browsers. WebGL allow browser to access GPU acceleration also. So, 3D or 2D content can run much faster. If you want to know more about WebGL you can go through below Wikipedia link.

http://en.wikipedia.org/wiki/WebGL

But WebGL still not available in some browsers like IE, Safari, Opera etc… It will work fine in Netscape browsers (Chrome & Firefox). So, In IE we can use HTML5 Canvas. But it runs very slow. I hope in 1 or 2 years WebGL will be available in all browsers.

Three Js is very simple to learn. I will write here one example.

You can download Three JS from this link: https://github.com/mrdoob/three.js/downloads.

Following code creates a blue rectangle:

Creating Render Element:

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

Creating Scene and Camera:

var scene = new THREE.Scene();//initialising scene

//adding camera

var sceneCamera = new THREE.PerspectiveCamera(40, width/height, 1, 1000);

sceneCamera.position.set(30,50,180);

sceneCamera.lookAt(scene.position);

scene.add(sceneCamera);

Creating light:

var sceneLight = new THREE.DirectionalLight(0xFFFFFF, 5);

sceneLight.position.z = 6;

scene.add(sceneLight);

Creating a Box:

var boxGM = new THREE.CubeGeometry(50,50,50);

var boxMaterial = new THREE.MeshLambertMaterial({color:0x5500FF});

var boxMesh = new THREE.Mesh(boxGM, boxMaterial);

scene.add(boxMesh);

Finally rendering:

renderer.render(scene, sceneCamera);

Note: Good out put in Google Chrome browser.

Above example creates a blue rectangle. You can check some great examples here: http://mrdoob.github.com/three.js/

In my next article I will explain how to create Moving object using arrow keys. Any doubts or need assistance feel free to contact me at swamy.webdesigner@gmail.com.

Flare3d

Here I would like to write about Flare3d. Flare3d is 3d Engine for flash to develop 3d applications or games by using flash As3 very quickly and also it’s very easy. An AS3 programmer can learn Flare3d basics within 1 day :).

Flare3d using Stage3d in flash player 10+. So, we don’t need any additional plugins for 3d content. Stage3d is API for flash player and AIR. It’s hardware accelerated-architecture. So, it gives stunning output.

We can use 3d files developed in 3dMax or 3dMaya. We have to install a Flare3d plugin into 3dMax or 3dMaya then we can export 3d file as “.f3d”. We can load “.f3d” file directly into app using AS3 code. Also we can do modifications in Flare3d editor.

By using single line code we can load a “.f3d” file. We use method “addChildFromFile” to load a f3d file.

var f3dObjet:Pivot3d = scene.addChildFromFile(“file.f3d”);

by using above code we can load a “.f3d” file into scene dynamically.

We can control and create “Animations, Lighting, Materials, Physics & Collisions, particles, dragging and dropping, etc..”.

I have some links for you guys may be useful:

Tutorials for developing a game using Flare3d

http://www.adobe.com/devnet/flashplayer/articles/flare3d-building-3d-game.html

Flare3d Forum

http://www.flare3d.com/support

Flare3d updates

http://www.flare3d.com/blog/

I have developed a game for my company using Flare3d and now I am developing a game for my portfolio J. So, any doubts or any assistance please mail me or give a feedback to this post.

Three Js

Three.js introduction

Flare3d

Heavy Raining in Hyderabadh in a short spane :)