JSFiddle - React, Tailwind, and code Playground

by zero0zero

HTML

<script src="three.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
camera.position.set(-10,20,0);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.maxPolarAngle = 1.5;

function onResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onResize, false);


const material = new THREE.ShaderMaterial({
  side: THREE.DoubleSide,
  transparent: true,
  vertexShader: `
varying vec3 vPosition;
varying vec4 mvPos;

void main() {
    vPosition = position.xzy;

    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;
    
    mvPos = mvPosition;
}
`,
  fragmentShader: `
varying vec3 vPosition;
varying vec4 mvPos;

void main() {
    float circle_radius = 5.0;
    float border = 0.002;
    
    vec2 uv = vPosition.xz;
      
    float dist = sqrt(dot(uv, uv));

    border *= -mvPos.z;
  
    float t = 1.0 + smoothstep(circle_radius, circle_radius + border, dist) 
                  - smoothstep(circle_radius - border, circle_radius, dist);
  
    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.8 - t);
}
`,
});


const r = 20;
const geometry = new THREE.PlaneBufferGeometry().setAttribute("position", new THREE.BufferAttribute(new Float32Array([-r, r, 0, r, r, 0, -r, -r, 0, r, -r, 0]), 3));
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = Math.PI / 2;
scene.add(plane);


onResize();
requestAnimationFrame(render);