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>
<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>
