Hello! I’ve been trying to fix this for a while but with no sucess. I have a canvas (showing as a red rectangle), I want my threejs scene to show inside that canvas, so I added a inside of the , the problem is, when I load my website, the canvas is resized to a huge size. Images below:
The size of the canvas (in terms of internal buffer sizes) as well as whether you want to set matching CSS style is defined here:
renderer.setSize(w, h, set_css_to_match_w_and_h_default_true);
In your case you set CSS in one place, then set canvas buffer size to match window.innerWidth/Height and by default it overrides your CSS to match window.innerWidth/Height, hence the mess.
Thank you!! But now I have a new problem =(
It worked, my threejs output is the correct size, but nothing shows up! All I see is the background color of my scene.
That depends on what you are trying to display.
try to add
scene.add(new THREE.AxesHelper(1)) to check if you can see main axes.
Also your camera aspect should match canvas w / h, not to be 16/9, there will be stretching otherwise
Again, thank you for the help!
I’ve added " scene.add(new THREE.AxesHelper(1))" but nothing shows up, it looks exatcly the same.
Then your camera is not looking at the center of the world. It’ll be much easier to fix if you provide your code (without the model, just css,html,javascript) as a live example on jsfiddle or codepen
It’s my first time using codepen so some files like package.json are missing, do I need to add them or is this enough? Thanks again!
Not sure how to make it work in codepen, I use jsfiddle, so I fixed your code in there, setting the canvas size from computedStyle(), you can see axes now, so if your model is at the origin you should see it as well:
use camera.position.set(x, y, z) or camera.position.x = … to position the camera and camera.lookAt(x, y, z) to fix where it’s looking after you’ve moved it.
IT WORKED!!
Thank you so so so much! =) <3 
