CODEWITHSUNDEEP
javascriptthree.js
user1051523
user1051523

Reputation:

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!'

Upvotes: 1

Views: 2470

Answers (2)

hypervisor666
hypervisor666

Reputation: 1275

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:

  1. fov (an angle that determines the vertical field of view
  2. aspect ratio (width / height value) <-- Important!
  3. near clipping plane (scalar value of when a object is close enough to be considered "behind" the camera lens, and therefore no longer visible)
  4. 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!

Upvotes: 0

Juan Mellado
Juan Mellado

Reputation: 15113

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.

Upvotes: 1

Related Questions