threejs


WebGL and Three JS dedicated forum. Here we can discuss about Three JS 3D library.
 
HomeCalendarGalleryFAQSearchRegisterLog in

Share | 
 

 Theejs, Responsive

View previous topic View next topic Go down 
AuthorMessage
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Theejs, Responsive   Tue Feb 07, 2017 6:34 pm

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?
Back to top Go down
SamCorny

avatar

Posts : 40
Points : 56
Reputation : 0
Join date : 2017-02-06
Location : NYC

PostSubject: Re: Theejs, Responsive   Tue Feb 07, 2017 8:08 pm

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 );
}
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Theejs, Responsive   Tue Feb 07, 2017 8:21 pm

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

avatar

Posts : 40
Points : 56
Reputation : 0
Join date : 2017-02-06
Location : NYC

PostSubject: Re: Theejs, Responsive   Tue Feb 07, 2017 8:32 pm

Take a look at a simple "cube example" on threejs.org and look at the function call "onWindowResize" cause it could be your solution.
Back to top Go down
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Re: Theejs, Responsive   Tue Feb 07, 2017 8:49 pm

I will give the capabilities to new users to post links Smile
This is an example where you can see what Sam said: Three cube
Back to top Go down
http://threejs.forumotion.com
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Re: Theejs, Responsive   Tue Feb 07, 2017 8:49 pm

I will give the capabilities to new users to post links Smile
This is an example where you can see what Sam said: Three cube
Back to top Go down
http://threejs.forumotion.com
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Theejs, Responsive   Tue Feb 07, 2017 11:24 pm

Ok, but still the mesh doesn't get smaller,the mesh has a standard width and height,it is not window dependant
Back to top Go down
WebForce

avatar

Posts : 22
Points : 30
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Theejs, Responsive   Wed Feb 08, 2017 9:21 am

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
Back to top Go down
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Re: Theejs, Responsive   Wed Feb 08, 2017 3:21 pm

Hi phaidonas,
i posted a new code example here:

changing resolution
Back to top Go down
http://threejs.forumotion.com
Sponsored content




PostSubject: Re: Theejs, Responsive   

Back to top Go down
 
Theejs, Responsive
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Fallout New Vegas responsive kill reactions?

Permissions in this forum:You cannot reply to topics in this forum
threejs :: WEBGL and Three JS Library :: Discussions about WebGL coding via Three.js-
Jump to: