rotation - THREEJS: Rotating the camera while lookingAt -


i have moving camera in camera container flies arond scene on giving paths airplane; can move position x,y,z positive , negative. camera container looking @ own future path using spline curve.

now want rotate camera using mouse direction still keeping general looking @ position while moving forward object. say, want turn head on body: while moving body having general looking @ direction, turning head around lets 220 degree , down. can't behind body.

in code cameracontainer responsible move on pline curve , lookat moving direction. camera added child cameracontainer responsible rotation using mouse.

what don't working rotation of camera. guess common problem. lets camera when moving on x-axes moves not straight, moves curve. specially in different camera positions, rotation seems different. tryiing use cameracontainer avoid problem, problem seems nothing related world coordinates.

here have:

// camera in container cameracontainer = new threejs.object3d(); cameracontainer.add(camera); camera.lookat(0,0,1); cameracontainer.lookat(nextpositiononsplinecurve);   // here goes rotation depending on mouse // vertical var mouseverti = 1;     // 1 = top, -1 = bottom if(window.app4d.mouse.y <= instance.domcenterpos.y)             // mouse bottom?     mouseverti = -1;  // how far mouse away center: 1 most, 0 near var ymouseperc = math.abs(math.ceil((instance.domcenterpos.y - window.app4d.mouse.y) / (instance.domcenterpos.y - instance.domboundingbox.bottom) * 100) / 100); var yanglediffside = (instance.config.scene.camera.maxangle - instance.config.scene.camera.angle) / 2; var yrotateran = mouseverti * yanglediffside * ymouseperc * math.pi / 180; instance.camera.rotation.x += yrotateran;       // rotation x = vertical   // horizontal var mousehori = 1;      // 1 = top, -1 = bottom if(window.app4d.mouse.x <= instance.domcenterpos.x)             // mouse left?     mousehori = -1;  // how far mouse away center: 1 most, 0 near var xmouseperc = math.abs(math.ceil((instance.domcenterpos.x - window.app4d.mouse.x) / (instance.domcenterpos.x - instance.domboundingbox.right) * 100) / 100); var xanglediffside = (instance.config.scene.camera.maxangle - instance.config.scene.camera.angle) / 2; var xrotateran = mousehori * xanglediffside * xmouseperc * math.pi / 180; instance.camera.rotation.y += xrotateran;       // rotation y = horizontal

would thankful if can give me hint!

i got answer after more trial , error. solution take initial rotation of y in consideration.

when setting camera container , real camera child of container, had point camera frontface of camera container object, in order let camera looking in right direction. lead initial rotation of 0, 3.14, 0 (x,y,z). solution added 3.14 y rotation everytime assigned (as mentioned westlangley) mouse rotation.

camerareal.lookat(new three.vector3(0,0,1)); camerareal.rotation.y = xrotateran + 3.14;

Comments

Post a Comment

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

i'm newbie in php mysql , google maps v3. have problems in google maps v3. made traceroute web based , map traceroute's result in google maps v3 final project of college education. have try many tutorials didn't work. have tried tutorials in forum nothing worked. problem cannot display multiple markers got location data database. maybe because i'm newbie , not know how do. confuse looping show markers. here code <?php error_reporting(e_all ^ (e_notice)); ini_set('max_execution_time', 360); $enable_log_user = false; global $ip, $host_name, $host_ip; $host = @$_post['host']; $trace = @$_post['trace']; $self = $_server['php_self']; include("phpsqlajax_dbinfo.php"); $connection = mysql_connect ('127.0.0.1', $username, $password); if (!$connection) { die('not connected : ' . mysql_error());} $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('can\'t use db : ...
Read more

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

i have detailsview control on page used edit various fields of record, works in respect. i looking way add 1 column (and if works, why not more) right, absolutely read-only, show same fields of record comparison purposes. i aware there no obvious way such thing out of box detailsview . have looked other controls (transposed gridview , recommended formview , listview ), nothing satisfies. have special data binding setup using detailsview , can't out of without losing features. anyone on how "hack in" additional columns (for display only) on detailsview ? the solution have now, use second detailsview , visible set false in aspx. in code, make sure databind hidden detailsview hosts data third column first, initial detailsview named itemdetails . and in item created event, pass third column html rendering of hidden controls (in last code block) : protected void itemdetails_itemcreated(object sender, eventargs e) { if (dataite...
Read more

javascript - firefox memory leak -

i have following script (i use raphaeljs also) draws circle, waits 1 second, draws circle again, etc (you can copy paste - functional, need include raphael raphaeljs.com): <div id="holder"> </div> <script src="raphael.js" type="text/javascript"></script> <script> var paper = raphael(10, 50, 320, 200); var rad = math.pi / 180; var finangle = 0; function sector(cx, cy, r, startangle, endangle, params) { var x1 = cx + r * math.cos(-startangle * rad), x2 = cx + r * math.cos(-endangle * rad), y1 = cy + r * math.sin(-startangle * rad), y2 = cy + r * math.sin(-endangle * rad); return ["m", cx, cy, "l", x1, y1, "a", r, r, 0, +(endangle - startangle > 180), 0, x2, y2]; } var path = sector(100,100,50,0,180); var arc = paper.path(path); function draw() { path = sector(100,100,50,0,finangle); ...
Read more