meetamit meetamit -4 years ago 93
Javascript Question

Shift the rendered output in 2d space

Consider this simple example of a cube centered on the origin of the world. Since the camera is looking directly at it, the resulting rendered image shows the cube in the middle of the rendered 2D image and only its front face is visible. I'd like to have control over that cube's placement. I.e. I'd like to shift the rendered output up and to the left by some amount. That way, I can for example shift everything by half of the canvas's width and height and have the cube centered on the top left corner of the rendered output.

To be clear: I don't want to move the camera nor the object in the 3D world (nor the canvas). I just want the rendered result itself to shift, and I'd like to define this shift in 2D screen units rather than in 3D space. It entails that after the said shift, the sides of the cube will still not be visible — only the front face as it is currently. It also entails that if I shift the output to the left, some geometry that's on the right side of the view but previously out of the frame would now shift into view and get rendered.

In some 3D software I've encountered the ability to do this by modifying the camera's X and Y "center shift". Maybe in three.js I'd have to do it by applying a transformation to the camera or to the renderer? I'm not familiar enough with the library to know where to dig.

There's no relevant code to share, but StackOverflow won't let me submit this question without some code ;)

Answer Source

You offset of the camera using a pattern like so:

var fullWidth = window.innerWidth;
var fullHeight = window.innerHeight;
var xPixels = 600;
var yPixels = 200;

camera.setViewOffset ( fullWidth, fullHeight, xPixels, yPixels, fullWidth, fullHeight );

To undo it, call

camera.clearViewOffset();

See the docs for more info about this method and multi-monitor setups. It works for OrthographicCamera, too.

three.js r.84

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download