JSFiddle - React, Tailwind, and code Playground

by GlifTek

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from 'https://threejs.org/build/three.module.js';
import {OrbitControls} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import {BufferGeometryUtils} from "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js";
import {GUI} from "https://threejs.org/examples/jsm/libs/dat.gui.module.js";


let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 12, 25);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

const geometry = new THREE.TorusGeometry( 10, 3, 40, 72 );
let uniforms = {
	segU: {value: 8},
  segV: {value: 8},
  isWire: {value: false},
  wireWidthFactor: {value: 2},
  wireColor: {value: new THREE.Color(0x00f0ff)}
}
const material = new THREE.MeshStandardMaterial( { 
/*   map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg"), */

  side: THREE.DoubleSide,
  onBeforeCompile: shader => {
  	shader.uniforms.segU = uniforms.segU;
    shader.uniforms.segV = uniforms.segV;
    shader.uniforms.wireColor = uniforms.wireColor;
    shader.uniforms.isWire = uniforms.isWire;
    shader.uniforms.wireWidthFactor = uniforms.wireWidthFactor;
  	shader.fragmentShader = `
    	uniform float segU;
      uniform float segV;
      uniform vec3 wireColor;
      uniform float isWire;
      uniform float wireWidthFactor;
      
    	${shader.fragmentShader}
    `.replace(
    	`#include <dithering_fragment>`,
      `#include <dithering_fragment>
      	
        // http://madebyevan.com/shaders/grid/
        vec2 coord = vUv * vec2(segU, segV);

        vec2 grid = abs(fract(coord - 0.5) - 0.5) / fwidth(coord);
       ...