Is it possible to clip or hide parts of an object in three.js that extend beyond its parent container? For instance, imagine having a sphere inside a box like this: sphere inside box
I want to achieve a clipping effect where the part of the sphere outside of the box is hidden. Essentially, I am looking for similar functionality as CSS overflow:hidden.
I am relatively new to working with three.js, so please bear with me if my question seems naive. Here is the code I have:
// Simple example
import * as THREE from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6a766c7b7b5e2e302f2f23626d666527262d2168"><span class="__cf_email__" data-cfemail="bcdff0f3fff9fbece2eadccdfcd4ddd48bdda3fed">[email protected]</span></a>";
import {OrbitControls} from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef9b879d8a8aafdfc1dedcd9c1df">[email protected]</a>/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 );
}