JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.min.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
            }
        }
    </script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';

        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        const clock = new THREE.Clock();
        const container = document.getElementById('container');


        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


        const scene = new THREE.Scene();
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 0, 3);
        scene.add(light);

        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.set(0, 0, 3)


        const control = new OrbitControls(camera, renderer.domElement);
        control.enableDamping = true;

        const matcap = new THREE.TextureLoader().load('./matcap-01.png')
        const t_noise = new THREE.TextureLoader().load('./noise.jpg')


        let box, sphere;
        {
            const geometry = new THREE.BoxGeometry(1, 1, 1)
            geometry.scale(0.35, 0.35, 0.35)

            const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true })

            box = new THREE.Mesh(geometry, material)

            // scene.add(box)
        }

        {
            const geometry = new THREE.SphereGeometry(1, 32, 32)
            console.log("%c Line:84 🍺 geometry", "color:#f5ce50", geometry);

            sphere = new THREE.Mesh(geometry, new THREE.ShaderMaterial({
                transparent: true,
                side: THREE.DoubleSide,
              	depthWrite : true,
								depthDepth : true,
                vertexShader: `
                void main(){
                    gl_Position = projectionMatrix *...