Groin Chop

<title>Groin Chop</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <style> body { margin: 0; background-color: deepskyblue; } canvas { display: block; } </style> Wireframe 1: Wireframe 2:

<script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#canvas')
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

    const boxWidth = 1;
    const boxHeight = 1;
    const boxDepth = 1;
    const boxGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

    // Solid Box
    const solidMaterial = new THREE.MeshBasicMaterial({
        color: 0xffffff
    });
    const solidBox = new THREE.Mesh(boxGeometry, solidMaterial);
    scene.add(solidBox);

    // Wireframe 1
    const wireframe1Material = new THREE.MeshBasicMaterial({
        color: 0x000000,
        wireframe: true
    });
    const wireframe1Thickness = boxDepth * 0.25;
    const wireframe1Geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth + wireframe1Thickness * 2);
    const wireframe1 = new THREE.Mesh(wireframe1Geometry, wireframe1Material);
    scene.add(wireframe1);

    // Wireframe 2
    const wireframe2Material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        wireframe: true
    });
    const wireframe2Thickness = boxDepth * 0.15;
    const wireframe2Geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth + wireframe1Thickness * 2 + wireframe2Thickness * 2);
    const wireframe2 = new THREE.Mesh(wireframe2Geometry, wireframe2Material);
    scene.add(wireframe2);

    camera.position.z = 3;

    let wireframe1Value = 0.25;
    let wireframe2Value = 0.15;

    document.querySelector('#wireframe1').addEventListener('change', event => {
        wireframe1Value = parseFloat(event.target.value);
        updateWireframe1();
    });

    document.querySelector('#wireframe2').addEventListener('change', event => {
        wireframe2Value = parseFloat(event.target.value);
        updateWireframe2();
    });

    function updateWireframe1() {
        wireframe1.scale.set(1, 1, 1 + wireframe1Value * 2);
        wireframe1.position.z = wireframe1Value;
    }

    function updateWireframe2() {
        wireframe2.scale.set(1, 1, 1 + wireframe1Value * 2 + wireframe2Value * 2);
       wireframe2.position.z = wireframe1Value + wireframe2Value;
    }

    const animate = function () {
        requestAnimationFrame(animate);
        solidBox.rotation.x += 0.01;
        solidBox.rotation.y += 0.01;
        wireframe1.rotation.x += 0.01;
        wireframe1.rotation.y += 0.01;
        wireframe2.rotation.x += 0.01;
        wireframe2.rotation.y += 0.01;
        renderer.render(scene, camera);
    };

    animate();
</script>