Theejs, Responsive

Hello, i want to make my elements responsive,the problem is that i want also to change the width of the mesh and the position of the camera,for now i work with a code like this:
if(screen.width<=1280 && screen.width>500){
camera.position.x = -10;
camera.position.z = -370;

}else if (screen.width<=500){
camera.position.x = 0;
camera.position.z = -75;

}else if (screen.width>1280)
{ camera.position.x = -70;
camera.position.z = -370;
}
camera.position.x.needsUpdate = true;
camera.position.z.needsUpdate = true;

same for the width of the mesh.It works fine except that is not realtime, for the changes to apply i have to refresh the site,i assume that someone will not make inspect and change rather get into the site from a single device at a time,the problem in mobiles or tablets when they turn vertical the device Any suggetions?

I think you should not change or get resolution via javascript but only via CSS. I mean let the CSS do the work of canvas resize:

Code:

@media only screen and (min-width: 1280px) {
/* Canvas */
}

and are you using onWindowResize function?

Code:

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}

I will try it, i have a text in the mesh and it has to be designly correct, when the window resizes

Take a look at a simple "cube example" on threejs.org and look at the function call "onWindowResize" cause it could be your solution.

I will give the capabilities to new users to post links
This is an example where you can see what Sam said: Three cube

I will give the capabilities to new users to post links
This is an example where you can see what Sam said: Three cube

Ok, but still the mesh doesn't get smaller,the mesh has a standard width and height,it is not window dependant

Cause you have to change also the DOM in javascript!
try this:

Code:

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
document.body.appendChild( renderer.domElement );
renderer.domElement.style.width = renderer.domElement.width * 1 + 'px';
renderer.domElement.style.height = renderer.domElement.height * 1 + 'px';

now it should work

Hi phaidonas,
i posted a new code example here:

changing resolution