I’m using react-three-fiber (a library for Three.js in React), and created a cube animation just by copy-pasting the tutorial https://github.com/pmndrs/react-three-fiber#what-does-it-look-like

I’m trying to increase the size of the cube, but the canvas’s container has a default size of 150 x 300 px, which doesn’t fit a bigger cube, and shows only a portion of the cube

However when I increase the height of the canvas’s container (#canvas-container) to for example 1000px, the cube deforms to take up the whole #canvas-container’s height… which isn’t what I want. I just want a Canvas big enough to hold the cube and the cube to retain its shape…

documentation said:
Canvas is responsive to fit the parent node, so you can control how big it is by changing the parents width and height, in this case #canvas-container.

Copied from documentation/tutorial, just changed boxGemotry’s args to 6, 6, 6 to make it bigger

import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'

export default function OrientationVisualizer() {
    function 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, hover] = useState(false)
        const [clicked, click] = 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) => click(!clicked)}
            onPointerOver={(event) => hover(true)}
            onPointerOut={(event) => hover(false)}>
            <boxGeometry args={[6, 6, 6]} />
            <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
          </mesh>
        )
      }

      return(
        <div id="canvas-container">
        <Canvas>
          <ambientLight intensity={Math.PI / 2} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
          <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
          {/* <Box position={[-1.2, 0, 0]} /> */}
          <Box position={[1.2, 0, 0]} />
        </Canvas>
        </div>
      )
}