Inconsistent sizing on webpage

Questions
1

The three.js scene is always the size of the window when it`s loaded. Picture 1 shows what the scene looks like when it was loaded while the window was shrunk. Picture 2 shows what the scene looks like when the window was full size.
threejsinwebpagehowtomanipulate1 threejsinwebpagehowtomanipulate2
Also, I’d like to have the scene render beside a picture or other html element (in the empty pink space with the inputs). How can I achieve this? Thanks in advance.

2

It’s a little confusing so I can provide more visuals or explain better if required.

3

You need an event listener for when the window is resized:

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

If you don’t want it to take the whole page, you can always change window.innerWidth to whatever value you want to use.

1 Like
4

Thank you, That did it! Would you also happen to know the 2nd part to my question? I would like to add a photo or other html element in the blank pink space beside the scene.

5

It’s right there in my original answer.

If you don’t want it to take the whole page, you can always change window.innerWidth to whatever value you want to use.

If you need further help creating the other HTML elements and adding an image, maybe searching any intro to HTML + CSS tutorial would help.

1 Like