How to prevent child Object3D from rendering outside its parent Object3D?

Questions
, ,
1

I have these 2 Object3Ds:

    const GEOMETRY1 = new THREE.PlaneBufferGeometry(5, 5, 5);
    const MATERIAL1 = new THREE.MeshBasicMaterial({ 'side': THREE.DoubleSide });
    const PARENT_MESH = new THREE.Mesh(GEOMETRY1, MATERIAL1);

    scene.add(PARENT_MESH);

    const GEOMETRY2 = new THREE.PlaneBufferGeometry(2, 2, 2);
    const MATERIAL2 = new THREE.MeshNormalMaterial({ 'side': THREE.DoubleSide });
    const CHILD_MESH = new THREE.Mesh(GEOMETRY2, MATERIAL2);

    CHILD_MESH.scale.set(8, 8);

    PARENT_MESH.add(CHILD_MESH);

We can see that the child Object3D renders the portion that is outside the parent Object3D. Can we prevent anything that is falling outside a parent mesh from not getting rendered or showing? I’m using a flat plane here for simplicity, but we could have 3D parent/child meshes as well.

2

I haven’t experimented with this…but you could set up rendering distance…you just have to set the render distance to your models depth and add orbit controls around it…

If that’s not what you mean…please clarify, like I said, I’m new so a better described question would be nice…I will experiment with this and get back with you