在react中裁剪three.js画布而不缩放

import React, { Component } from 'react';
import * as THREE from 'three';

class ThreeCanvas extends Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  }

  componentDidMount() {
    const container = this.containerRef.current;
    const { width, height } = container.getBoundingClientRect();

    this.renderer.setSize(width, height);
    container.appendChild(this.renderer.domElement);

    // Add your Three.js scene setup here
    // ...

    this.animate();
  }

  componentDidUpdate() {
    const container = this.containerRef.current;
    const { width, height } = container.getBoundingClientRect();

    this.renderer.setSize(width, height);

    // Update your Three.js camera and other elements here
    // ...
  }

  animate = () => {
    // Add your animation logic here
    // ...

    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(this.animate);
  }

  render() {
    return <div ref={this.containerRef} style={{ width: '100%', height: '100%', overflow: 'hidden' }} />;
  }
}

export default ThreeCanvas;