Three.js 画布在事件发生后调整大小

Question

I'm making mobile-web using three.js.

Also I'm using meta view port tag, <meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" > <meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" >

I have a problem that canvas is being resized after raycasting for click event.

canvas's element.style attribute changed:

<canvas width="1081" height="2029" style="width: 980px; height: 1081px;">

into

<canvas width="1081" height="2029" style="width: 412px; height: 773px;">

<!--
and changing size is depends on phone's screen size.. for mine is 412 x 773.
-->

I don't know where is changing and setting the canvas style .....

So I added below codes to css,

  .canvas{
    width: devicve-width !important;
    height: device-height !important;
  }

  canvas{
    width: devicve-width !important;
    height: device-height !important;
  }

and it doesn't work too.

Desktop-web is working fine, but only mobile version have the error.

I never reset the canvas's size, I don't know what I have to do.

Now, I have so many codes ( but there is no codes for re-size the canvas. ), so I'm very confused..

Is there any special code in three.js to set canvas's size?

Or any way to prevent it??

Thank you for your help.

Answer 1

Have a look at the default ThreeJS example. The magical lines are the following.

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

You can see how they are used here

Answer 2

您可以像这样设置 Three.js 画布大小

renderer.setSize(window.innerWidth, window.innerHeight);