JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from 'https://threejs.org/build/three.module.js';

import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';

import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;

let clock = new THREE.Clock();
init();
renderer.setAnimationLoop(render);

function init() {

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

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );

  camera.position.set( 0, 2.5, 3.0 ).multiplyScalar(10);

  const controls = new OrbitControls( camera, renderer.domElement );
  //controls.addEventListener( 'change', render ); // use only if there is no animation loop
  controls.enablePan = false;

  const light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
  light.position.set( - 1.25, 1, 1.25 );
  scene.add( light );

  // const helper = new THREE.CameraHelper( light.shadow.camera );
  // scene.add( helper );

  //

    const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
    geometry.rotateX(Math.PI * -0.5);
    geometry.rotateY(Math.PI * -0.5);
    
    let uniforms = {
    	uvVal: {value: 0.5}
    }

    const material = new THREE.MeshLambertMaterial( {

      side: THREE.DoubleSide,
     	map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg"),
      onBeforeCompile: shader => {
      	shader.uniforms.uvVal = uniforms.uvVal;
      	shader.fragmentShader = `
        	uniform float uvVal;
          ${shader.fragmentShader}
        `.replace(
        	`#include <clipping_planes_fragment>`,
          `
						#include <clipping_planes_fragment>
            vec2 uv = vUv;
            uv.x -= 0.5;
           ...