Develop Reference

Three.js - Take up all available space with plane geometry (emulate background-size:cover property)

I would like to build a three.js scene containing a large plane geometry that should take up all the available space, regardless of the aspect ratio of the viewport.
I have made a rough fiddle to highlight the issue: https://jsfiddle.net/nq2oy9ca/1/
Using the following resize function:
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
});
the image is only scaled if there are changes to the y axis of the viewport - it doesn't react to changes on the x axis.
This means that it will take up all space only if the viewport has a narrow aspect ratio: if the aspect ratio becomes wide enough, the background will become visible to the the left and the right.
Removing the function prevents the image from being resized at all.
I reckon the result could be achieved by dynamically updating the camera distance ( camera.position.z ) whenever the viewport is resized, but i don't know how that value correlates to the viewport \ canvas size.
Any feedback would be appreciated, thanks in advance!

Resizing canvas size gives advantage to larger screens. Not sure how to keep the functionality while making it fair

So I am trying to learn javascript by making a game where you click on a canvas to move a circle and you have to dodge multiple other circles coming in your direction. I am close to the final result but I just realized that the larger your screen is, the easier it is for you to play.
The reason is that the enemies spawn at the edges of the canvas, so if the canvas is bigger, you have more time to react to them since their speed doesn't change. The game is supposedly refreshing around 60fps and each time it resizes the canvas depending on if you change your window size. The only thing I can think of is increasing the speed of enemies with the size increase but I don't know if there's any other way to go about this. Maybe I could increase the size of the of the player and the enemies to accommodate the change in window size but I don't know which is better or how to make sure I am consistent with the ratio increase.
Any suggestions would be much appreciated. Thanks for your time
Here's my full code: https://jsfiddle.net/r2f6eb89/2/
It doesn't actually run on this site so it's just a reference for my logic.
Here are the resizing functions:
/*
function setCanvasSize() {
//c.width = window.innerWidth-100;
//c.height = window.innerHeight-100;
if (window.innerWidth < window.innerHeight) {
c.width = window.innerWidth - 150;
c.height = window.innerWidth - 150;
} else {
c.width = window.innerHeight - 150;
c.height = window.innerHeight - 150;
}
}
*/
function setCanvasSize() {
c.width = 600;
c.height = 600;
}

There's actually two kinds of "width" and "height" property. One is the width and height you can actually see in your website, that is, the one you can change by the property on your html file element. The other one is the width and height you set in the javascript file, for setting the coordinate you use to print image or draw in the canvas.
Example for first type of the width/height property:
<canvas id="my_canvas" width="500" height="200"></canvas>
Example for second type of the width/height property:
var canvas = document.getElementById("my_canvas");
canvas.width=500;
canvas.height=200;
It seems like you are changing the second type of the width/height property each refresh. If that's not what you want, try modifying the first type of width/height. It seems like a simpler solution to your question. To modify the first type of property, the CSS property in javascript, here's the code:
canvas.style.width="500px";
canvas.style.height="200px";
Hope that helps :)

Everything inside my canvas got bigger after canvas resize

When I first started this project that I'm working on, my canvas size with 1400px wide and 480px tall. I realized that I am going to need to make the canvas the same size as the window itself later, so I did that and everything inside of the canvas zoomed in or something. I set a drawImage(); to be 300 px wide and 180 px tall, and it is a LOT bigger than that, the image is actually the same width as the canvas now. Any suggestions? Here's the link to the project:
http://brycemckenney.com/animation-app
Thank you guys!

You have set the dimensions through css, instead of the physical dimensions of the (image) canvas.
The relevant piece (for others to read in the future) of your code is:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var windowHeight = $(window).height();
var windowWidth = $(window).width();
$(canvas).css({
height: windowHeight - 8,
width: windowWidth - 8
});
Think of it like this: suppose you have a normal jpg-image.
That jpg has it's own 'physical' dimensions (aka width and height).
In both HTML and CSS you can set the dimensions (in px, percent, etc) that you'd like the browser to render (scale) the picture (hey, the picture already has a immutable size right?).
Now for canvas:
In order for canvas to have a physical width/height, you have to set the .width and .height of the canvas-element itself, either in HTML or per javascript (a side-effect is that setting the physical dimensions is that the canvas will clear itself, as per spec).
Then to scale the image (like you did with the above jpg example) you use css (again in px/percent/etc).
I think this is a clever solution by the way to add that new canvas-element to the HTML-Spec!
So, rounding up:
A canvas with a width and a height of 300 px rendered as 100% of a container (like document.body) that measures 900x900px will be scaled-up 3 times!
The reverse (scaling down) will let you draw even more crisp lines by the way!
Hope this helps your understanding!

Resizing the canvas

I'm trying to design a web using flex-boxes in order to fit it to any kind of screen size. My main screen has a canvas, so... which is the best way to resize the canvas during the inizialitation?
I have tried these two ways. My first way was to use CSS and set a percentage for its size. For example, width=100% and height=100%. Despite the design worked, I found that there were a lot of issues when playing with the coords of my canvas. For example, when dragging an item, my mouse coords where amplified by ten times or so.
Despite I could manage that, I think it's not the best approach.
The second way was to set a fixed size when the onload and onresize events when they are fired. I was doing something like this:
window.initHeight = window.screen.height;
window.initWidth = window.screen.width;
/*The height of the navbar.*/
navbar.height = document.getElementById('navbar').offsetHeight;
canvas = document.getElementById('canvasStage');
canvas.width = window.initWidth;
canvas.height = window.initHeight - navbar.height;
canvas.setAttribute("width", canvas.width);
canvas.setAttribute("height", canvas.height);
The problem is that the height seems to be too big:
http://i.imgur.com/WI0jGH2.png
How could I fit the screen exactly through this way?
The third way, but I'll try to avoid it, is to set a fixed size and let the small screens to scroll on the page.
Thanks!
UPDATED:
This is my JSFiddle:
http://i.imgur.com/NRTykLv.png

window.screen.width and window.screen.height returns the width and height of the screen which includes all bars (evrything you see on your screen).So you have to use window.innerHeight and window.innerWidth in order to get the view port height and width
Replace
window.initHeight = window.screen.height;
window.initWidth = window.screen.width;
with
window.initHeight = window.innerHeight;
window.initWidth = window.innerWidth;

three.js cube resize

My code with three.js is this:
cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
cube.position.y = 150;
cube.position.x = 0;
scene.add(cube);
But when i render my Cube the size of this cube is always different. I try to explain better.
Every time I resize my browser and refresh the page the cube size is different. Is possible set the cube size fixed? Also if the window resize!'

You can set a fixed size to the renderer:
renderer.setSize(WIDTH, HEIGHT);
Take a loot at this simple example: http://jsfiddle.net/9stj8/
Also check if your code is handling the window resize event.

I know this question has already been answered, but I wanted to submit a little something for posterity sake, and the frustration levels of those who follow in our steps.
Three.js uses a camera object to provide a view on your 3d scene. I've been primarily working with the Perspective Camera (instead of the orthographic camera, sorry can't help you at this time if you are using the ortho cam.), and I happened to stumble across the solution to the problem you are discussing. The perspective takes certain parameters upon creation:
fov (an angle that determines the vertical field of view
aspect ratio (width / height value) <-- Important!
near clipping plane (scalar value of when a object is close enough to be considered "behind" the camera lens, and therefore no longer visible)
far clipping plane (scalar value of when an object is far enough away to be considered invisible to the camera
Since the browser window is your view port, often we use the browser window properties to set up the camera's aspect ratio. Since these properties set up the camera to render properly (if there is a mismatch between viewport size and camera/renderer settings, your image will come out smashed/squished/distorted, if it comes out at all), if the browser window is resized the camera values no longer match values that the camera is using to render the scene.
As Juan Mellado pointed out, you change the size of the viewport using the renderer.setSize(w,h) method. If you want the window resize changes to also update the renderer and the camera, do this:
function onResize()
{
var width, height;
width = window.innerWidth; // for example
height = window.innerHeight; // for example
//First update the camera's aspect ratio: width / height
camera.aspect = width/height;
//Whenever you make a change to the camera,
//you must update for your changes to take effect
camera.updateProjectionMatrix();
//Here we reset the size of the window to the new height
renderer.setSize(width, height);
}
Now that we have declared a callback function that can handle updating the camera and renderer, don't forget to bind it to the window.resize event. I just use jQuery to do that:
jQuery(window).resize(onResize);
or
window.onresize = onResize;
Recap:
1.) The values used to calculate Camera Aspect Ratio must match the values passed as the renderer size values.
2.) If you want the camera aspect ratio and the renderer size values to scale with the size of the browser, you must bind a callback function to the window.onresize event to do that.
3.) If you make a change to the camera, after its been created, you must call "updateProjectionMatrix()" to update the camera's internal values in order for your changes to take effect.
If all goes well, when you change the window size, the camera aspect ratio and the renderer size will automatically scale with the window size.
Cheers and happy coding!