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