const { Project, Scene3D, PhysicsLoader, THREE } = ENABLE3D

      class MainScene extends Scene3D {
        create() {
          this.warpSpeed()

          this.load.gltf('https://assets.codepen.io/2910487/suzanne.glb').then(gltf => {
            const suzanne = gltf.scene.children[0]
            suzanne.position.setY(2)

            const boxTop = this.make.box({ y: 3, width: 4, depth: 4 })
            const boxBottom = this.make.box({ y: 1.5, width: 4, depth: 4 })

            const sub1 = this.csg.subtract(suzanne, boxTop)
            const sub2 = this.csg.subtract(sub1, boxBottom)

            sub2.material = new THREE.MeshStandardMaterial({ roughness: 0, metalness: 0.4, color: 'red' })
            this.scene.add(sub2)
          })
        }
      }

      new Project({ scenes: [MainScene], antialias: true })
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://assets.codepen.io/2910487/enable3d.framework.0.22.0-dev.0.min.js