K Swamy Vishnubhatla

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.

Heavy Raining in Hyderabadh in a short spane :)

Flash As 3.0 "Jet Game"

Hi,

I Made a new game "Jet Game" by using Action Script 3.0 and I have used my team for design, If you have time to check it, please go through follwoing link and give me suggestions and feedback:

http://vishnubhatla.ueuo.com/jet/

Thanks,
K Swamy Vishnubhatla.

How to Save a File from Falsh As 3.0 (File Refference In As 3.0)

Hi,

Here I am writing about save a file from Flash by using Action Script 3.0. Already I have write a post for Filerefference in depth, you can follow that post

and here just I am writing explination about example

To do this First Create a button in Flash and name as "saveFileBut", and create input text filed and name as "myText" and copy and paste following code in

first frame.

var saveFile:FileReference = new FileReference();
saveFileBut.addEventListener(MouseEvent.CLICK, saveMyFile);

function saveMyFile(e:MouseEvent): void {
saveFile.save(myTex.text);
}

In above code first line we are creating a filerefference object "saveFile" and in second line we are writing listener to button and calling function

"saveMyFile" in this funtion we are saving text written in "myTex" as text file.

For More Information on File Refference you can go through link:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#save%28%29

Thanks,
K Swamy Vishnubhatla.

How to Load File by browse in Falsh As 3.0 (File Refference In As 3.0)

Hi,

Here I am writing about "File Refference" Concept in Flash Action Script 3.0.

We can use "File Refference class" to "Save or create", "upload" and "browse and load" file "from or to" flash.

This example for "browse and load" using As 3.0.

Note: It will work on "Flash Player 10 and later versions" only and you are "not able get path" of file because Adobe remove this feature for security

purpose. (Flash player 10 avail in Flash Cs4 and later versions).

To follow this example first create a button with name "imgLoad" and Copy below code:

var fileRef:FileReference= new FileReference();
imgLoad.addEventListener(MouseEvent.CLICK, onButtonClick);

function onButtonClick(e:MouseEvent):void {
    fileRef.browse([new FileFilter("All Files (*.swf,*.jpg,*.jpeg,*.gif,*.png,*.tif)","*.swf;*.jpg;*.jpeg;*.gif;*.png;*.tif")]);
    fileRef.addEventListener(Event.SELECT, onFileSelected);
}

function onFileSelected(e:Event):void {
    fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
    fileRef.load();
}

function onFileLoaded(event:Event)
{
    //loader object containing image data
    var loader:Loader = new Loader();
    loader.loadBytes(event.target.data);
    loader.x=0;
    loader.y=0;
    stage.addChild(loader);
}

Explination:

In above code first line "var fileRef:FileReference= new FileReference();" creating File refference object. Second line We adding listener to button

"imgLoad" to browse file.

In "onButtonClick" function we are written "fileRef.browse" to browse file. We have mentioned here load "swf,jpg,jpeg,gif,png,tif" files only we can load by

adding fileter in browse. We have freedom to write extensions :).

"fileRef.addEventListener(Event.SELECT, onFileSelected)" Line will excecute slect a file and click on open. And it will call funciton "onFileSelected". In

this function we will load file into flash and after loading it will call to function "onFileLoaded".

In "onFileLoaded" function we are adding image into stage from Loader data.

For More Information on File Refference you can go through link:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#save%28%29

Thanks,
K Swamy Vishnubhatla.