Three窗口自适应Resize

 

 

 浏览器监测

window.addEventListener( 'resize', onWindowResize );
window.removeEventListener( 'resize', onWindowResize );

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    
    camera.updateProjectionMatrix();

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

   //第一人称控制器专用 controls.handleResize();

}

 

 

监听某个元素：

useEffect(() => {
    resizeObserver.observe(roomButtonGroupRef.current);
    // 清理监听函数
    return () => {
      if (resizeObserver && roomButtonGroupRef.current) {
        resizeObserver.unobserve(roomButtonGroupRef.current);
        resizeObserver.disconnect();
      }
    };
  }, [])

  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      const width = entry.contentRect.width;
      console.log(width, 'width');
    }
  });