JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js"></script>
<script>
  var vertexShader = `
    varying vec3 vPos;
    void main()	{
      vPos = position;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  `;
  var fragmentShader = `

    varying vec3 vPos;
    uniform vec3 size;
    uniform float thickness;
    uniform float smoothness;
   
    void main() {
			
      float a = smoothstep(thickness, thickness + smoothness, length(abs(vPos.xy) - size.xy));
      a *= smoothstep(thickness, thickness + smoothness, length(abs(vPos.yz) - size.yz));
      a *= smoothstep(thickness, thickness + smoothness, length(abs(vPos.xz) - size.xz));
      
      vec3 c = mix(vec3(1), vec3(0), a);
      
      gl_FragColor = vec4(c, 1.0);
    }
  `;

</script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 8, 13);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

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

//var geom = new THREE.BoxBufferGeometry( 8, 8, 8 );
const geom = new THREE.IcosahedronBufferGeometry(1, 0)

var material = new THREE.ShaderMaterial({
  uniforms: {
    size: {
      value: new THREE.Vector3(geom.parameters.width, geom.parameters.height, geom.parameters.depth).multiplyScalar(0.5)
    },
    thickness: {
    	value: 0.01
    },
    smoothness: {
    	value: 0.2
    }
  },
  vertexShader: vertexShader,
  fragmentShader: fragmentShader
});

var box = new THREE.Mesh( geom, material );
scene.add( box );

var gui = new dat.GUI();
gui.add(material.uniforms.thickness, "value", 0.01, 1.0).name("thickness");
gui.add(material.uniforms.smoothness, "value", 0.01, 1.0).name("smoothness");

render();

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