盒子溢出裁剪三个JS

Question

使用三个 js 有没有办法从父对象中剪裁或隐藏对象？例如，我在这个盒子里面有一个盒子和一个球体，如图所示：

我想剪裁或隐藏框外的球体部分。简单来说，我需要类似 css overflow:hidden works 的逻辑；

我是 three.js 的新手，如果我问的是愚蠢的问题，请不要评判我。无论如何，我的代码在这里：

// Simple example
import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";

let renderer, scene, camera, controls;

init();
animate();

function init() {
    // renderer
  renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
  renderer.autoClear = false;
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  console.log(renderer)
    // scene
  scene = new THREE.Scene();

    // camera
  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.set(0, 0, 40);

    // controls
  controls = new OrbitControls( camera, renderer.domElement );
    const materialA =  new THREE.MeshStandardMaterial({
        roughness: 0,
        metalness: 0,
        color: 0xffffff,
    })
  const materialB = new THREE.MeshPhysicalMaterial({
        roughness: 0,
        transmission: 1,
        thickness: 0.5
    });
  const sphere = new THREE.Mesh(new THREE.SphereGeometry(-5,30,30),materialA);
  sphere.position.set(5, 0, 0)
  
  const box = new THREE.Mesh(new THREE.BoxGeometry(12,12,12),materialB);
   scene.add(box);
  
  const light = new THREE.DirectionalLight('white', 1);
  light.position.set(10, 10, 0);
  const light2 = new THREE.DirectionalLight('white', 1);
  light2.position.set(-10, -10, -10);
  scene.add(sphere, box,light,light2);
}

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