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

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

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -

i student , quite new programming, , given task using asp.net , c#, without being taught either. plan learn teach ourselves. the task stuck on making website import csv file sql server database of last year's room bookings around campus. the table has following columns: request_id; priority; module_id; day; start_time; length; park; students; room_code; status; semester_id; linked_request; week_1; week_2; week_3; week_4; week_5; week_6; week_7; week_8; week_9; week_10; week_11; week_12; week_13; week_14; week_15; ) in code, try make work 3 columns (request_id,priority,module) starters. when press import button, want read .csv file (with fixed name @ fixed directory) eg "1,2,3" - comma separating fields [delimiter] - , import sql server datab
Read more