How do I resize

Question

I am using React, ThreeJS, React-Three-Fibre

Here is the boilerplate from there website:

function App() {

  const Box = (props) => {
      // This reference gives us direct access to the THREE.Mesh object
      const ref = useRef()

      // Hold state for hovered and clicked events
      const [hovered, setHovered] = useState(false)
      const [clicked, setClicked] = useState(false)

      // Subscribe this component to the render-loop, rotate the mesh every frame
      useFrame((state, delta) => (ref.current.rotation.x += delta))

      // Return the view, these are regular Threejs elements expressed in JSX
      return (
        <mesh
          {...props}
          ref={ref}
          scale={clicked ? 1.5 : 1}
          onClick={(event) => setClicked(!clicked)}
          onPointerOver={(event) => setHovered(true)}
          onPointerOut={(event) => setHovered(false)}>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
        </mesh>
      )
  }
  return (
    <Canvas>
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
        <pointLight position={[-10, -10, -10]} />
        <Box position={[-1.2, 0, 0]} />
        <Box position={[1.2, 0, 0]} />
        <OrbitControls />
    </Canvas>
  )
}

export default App

I have tried using MUI and CSS to try and resize either the canvas element or some parent div but I didn't figure it out. Does anyone with experience in ThreeJS and the Fibre library know how I can go about resizing their element?

From the docs an alternate approach is to do the following but I'm still trying to make sense of it:

import * as THREE from 'three'
import { extend, createRoot, events } from '@react-three/fiber'

// Register the THREE namespace as native JSX elements.
// See below for notes on tree-shaking
extend(THREE)

// Create a react root
const root = createRoot(document.querySelector('canvas'))

// Configure the root, inject events optionally, set camera, etc
root.configure({ events, camera: { position: [0, 0, 50] } })

// createRoot by design is not responsive, you have to take care of resize yourself
window.addEventListener('resize', () => {
  root.configure({ size: { width: window.innerWidth, height: window.innerHeight } })
})

// Trigger resize
window.dispatchEvent(new Event('resize'))

// Render entry point
root.render(<App />)

// Unmount and dispose of memory
// root.unmount()

EDIT:

Forgot to add that I want to make the canvas be the size of the browser window, but atm it is 780px by 150px and these numbers are not mentioned anywhere explicitly

EDIT2:

As a further edit I noticed that the tag puts a with a inside of it with the 780x150 dimensions. I did the following in css to overwrite the old rules, but in general I am curious how I can use the tag with my own custom values from the getgo

canvas{
  width: 100vw !important;
  height: 100vh !important;
}

How do I resize from React-Three-Fibre

0 Answers0

How do I resize