Sunday, 15 June 2014

three.js - Three js camera movement -



three.js - Three js camera movement -

i dont have code here hope can understand, i'l edit , add together code when home.

i have built class move 1 time initialized adds jquery event (keydown) rendered dom element.

the event checks key downwards in switch case,

if key 1 of cases photographic camera moved accordingly.

the photographic camera move, reason flickers bit, little jumps. speed each photographic camera move 0.05;

when did in anouter app via javascript keydown event main script (no special class) worked fine..

any thought why ?

edit: code

main script :

<script> var movemec = null; var loopprog = null; var renderer = null; var scene = null; var photographic camera = null; var mesh = null; var earth = null; var sun = null; $(document).ready( function() { var container = document.getelementbyid("container"); renderer = new three.webglrenderer({ antialias: true } ); renderer.setsize(container.offsetwidth,container.offsetheight); container.appendchild(renderer.domelement) scene = new three.scene(); photographic camera = new three.perspectivecamera( 45, container.offsetwidth / container.offsetheight, 1, 4000 ); earth = new earth(); sun = new sun({x:-10,y:0,z:20}); scene.add(earth.getearth); scene.add(sun.sunlight); camera.position.set( 0, 0, 3 ); movemec = new movemechanics(camera,renderer.domelement) loopprog = new loopprogram(); loopprog.add(function(){earth.update()}); //loopprog.add(function(){renderer.render( scene, photographic camera );}); loopprog.solarloop(); } ); </script>

move script :

var movemechanics = function (camera,domelement,speed) { movemechanics.camera = camera; movemechanics.speed = speed != undefined ? speed : 0.01; movemechanics.domelement = domelement; $(document).keydown(function(event) { switch(event.which) { case keyevent.dom_vk_w: camera.position.z -= movemechanics.speed; break; case keyevent.dom_vk_s: camera.position.z += movemechanics.speed; break; case keyevent.dom_vk_d: camera.position.x += movemechanics.speed; break; case keyevent.dom_vk_a: camera.position.x -= movemechanics.speed; break; } }); }

loop code :

function loopprogram() { this.functionstorun = new array(); this.solarloop= function() { jquery.each(loopprog.functionstorun, function(index,value) { value ? value() : null; }); requestanimationframe(loopprog.solarloop); } this.add = function(func) { this.functionstorun[this.functionstorun.length] = func; } }

three.js webgl

No comments:

Post a Comment