puxiao / threejs-tutorial Goto Github PK

const handleResize = () => {
    const canvas = renderer.domElement
    camera.aspect = canvas.clientWidth / canvas.clientHeight
    camera.updateProjectionMatrix()

    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false)
}
handleResize()

//我们不再添加 window resize 监控(观察)
- window.addEventListener('resize', handleResize)

//改为使用 ResizeObserver 来监控(观察)尺寸变化
+ const resizeObserver = new ResizeObserver(() => {
+     handleResize()
+ })
+ resizeObserver.observe(canvasRef.current)

//当我们卸载组件前，一定要 清除掉 监控(观察)
return () =>{
- window.removeEventListener('resize', resizeHandleRef.current)
+ resizeObserver.disconnect()
}

const HelloThreejs: React.FC = () => {
    const canvasRef = useRef<HTMLCanvasElement>(null)
    - const resizeHandleRef = useRef<() => void>()
    + const resizeHandleRef = useRef<ResizeObserver>()

- resizeHandleRef.current = handleResize
//我们不再添加 window resize 监控(观察)
- window.addEventListener('resize', handleResize)

//改为使用 ResizeObserver 来监控(观察)尺寸变化
+ const resizeObserver = new ResizeObserver(() => {
+     handleResize()
+ })
+ resizeHandleRef.current = resizeObserver
+ resizeObserver.observe(canvasRef.current)

//当我们卸载组件前，一定要 清除掉 监控(观察)
return () =>{
-  window.removeEventListener('resize', resizeHandleRef.current)
+ resizeHandleRef.current?.disconnect()
}

useEffect(() => {
   // ...
}, [someRef])

<canvas ref={someRef}>

function MeasureExample() {
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}