JSFiddle - React, Tailwind, and code Playground

by icesnake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
		// switch on high precision floats

		varying vec2 vUv;
		
		void main() {	
			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
		}
	</script>
	<script type="x-shader/x-fragment" id="fragmentshader">

		varying vec2 vUv;


void main(){
		if (vUv.x > 0.975 || vUv.x < 0.025 || vUv.y < 0.025 || vUv.y > 0.975) {
    	gl_FragColor  = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
    //	gl_FragColor  = vec4(1.0, 0.0, 0.0, 1.0);
      discard;
    }
    
}
	</script>



<div id="stats"></div>

JavaScript

var camera, scene, renderer, mesh, controls;

var geometry = new THREE.PlaneGeometry(10,10,1,1),
		material = new THREE.MeshBasicMaterial({wireframe:true, color:0xFF0000, side: THREE.DoubleSide}),
    globalGeometry = new THREE.Geometry(),
		shaderMaterial = new THREE.ShaderMaterial({
										vertexShader:   document.querySelector('#vertexshader').textContent,
										fragmentShader: document.querySelector('#fragmentshader').textContent,
                    side: THREE.DoubleSide
									}),
    mesh = null;

init();
animate();

function init() {

    scene = new THREE.Scene();
    statsContainer = document.querySelector('#stats');
    

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
		camera.position.x = 30;
		camera.position.y = 15;
    camera.position.z = -250;

  	/* controls = new THREE.OrbitControls( camera );
  	    controls.target = new THREE.Vector3(0, 10, -250);
  	    controls.autoRotate = true; */

    
    scene.add(camera);

 
 for (var i = 0 ; i < 1000; i++) {
 		var clonedGeo = new THREE.PlaneGeometry(10,10,1,1);
    clonedGeo.translate(0, 0, -i*2)
    
    
 		var clonedGeo2 = new THREE.PlaneGeometry(10,10,1,1);
    clonedGeo2.translate(20, 0, -i*2)
    
    
 		var clonedGeo3 = new THREE.PlaneGeometry(10,10,1,1);
    clonedGeo3.translate(40, 0, -i*2)
    
    
 		var clonedGeo4= new THREE.PlaneGeometry(10,10,1,1);
    clonedGeo4.translate(60, 0, -i*2)
    
    
 		var clonedGeo5 = new THREE.PlaneGeometry(10,10,1,1);
    clonedGeo5.translate(80, 0, -i*2)
    
    globalGeometry.merge(clonedGeo);
    globalGeometry.merge(clonedGeo2);
    globalGeometry.merge(clonedGeo3);
    globalGeometry.merge(clonedGeo4);
    globalGeometry.merge(clonedGeo5);
 }

    mesh = new THREE.Mesh(globalGeometry, shaderMaterial);
    scene.add(mesh);
    scene.add(mesh);
      camera.lookAt(mesh.position);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xFFFFFF);
    
   ...