How to manage WebGL (THREE.js) with variable screen size?

2
votes

Is there is any way to manage Mesh size and position accordingly to display size.

What i am doing is a simple animated presentation which will have camera Zooming and changes in scene/camera position.

If the screen size is differs Mesh positioning and mesh size all are going wrong..

I have no idea how to take control on this?

How to find if a mesh position on screen?

2
three.jswebgl

2 Answers

2
votes

My hunch is that someone smart is going to come along and give you the solution that you really want (something like how to move the camera so object stay the right position/size), but here are some direct answers to your questions that might help.

You could manage the mesh size by making the proportions some function of window.innerWidth and window.innerHeight.

To determine if a mesh is on screen, you can use the following code. It projects a mesh position in 3D space to 2D space in the browser. Also, be sure to call camera.updateMatrixWorld() after you move the camera or change what you are looking at--elsewise you will get wonky results (thanks to WestLangley for that tip). If vector.x > window.innerWidth or vector.x > window.innerHeight, then the object is outside of the viewable area of the screen.

function toXYCoord (object) {
    var vector = projector.projectVector(object.position.clone(), camera);
    vector.x = (vector.x + 1)/2 * window.innerWidth;
    vector.y = -(vector.y - 1)/2 * window.innerHeight;
    return vector;
}
2
votes

what you want to do is check for resize on either the screen, or as in the example below, a 'bucket' div that i use as a container...when i resize the div (programmatic-ally or otherwise) i just make sure to call onBucketResize() 

function onBucketResize() {
    camera.aspect = bucket.clientWidth / bucket.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( bucket.clientWidth, bucket.clientHeight );
}

to setup, you could use something like:

bucket.addEventListener( 'resize', onBucketResize, false );

or maybe

document.addEventListener( 'resize', onBucketResize, false );

whatever is appropriate :)

let me know if this helps!