JSFiddle - React, Tailwind, and code Playground

by ramiro_fages

HTML

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
		<title>threejs example</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<!-- // <script src="js/three.js"></script> -->
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.js"></script>
		<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer({antialias: true});
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			var controls = new THREE.OrbitControls( camera );
			controls.update();

			camera.position.z = 3;

			// CUBE 1
			var cube_geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
			var cube_material = new THREE.MeshBasicMaterial({color: 0x00ff00} );
			var custom_cube_material = new THREE.ShaderMaterial({
				uniforms: {
					_PositionTex: {value: null},
					_Color: {value: new THREE.Color("#FF0000")}
				},
				vertexShader: `
					uniform sampler2D _PositionTex;
					void main()
					{
					  vec3 pos = position;

      			// The _PositionTex has a resolution of 1x1 so only the middle position will be needed to sample
					  float y = texture2D(_PositionTex, vec2(0.5, 0.5)).y;
					  pos.y += y;

					  gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
					}

				`,
				fragmentShader: `

					uniform vec3 _Color;

					void main()
					{
					    gl_FragColor = vec4(_Color, 1.0);
					}
				`,
			})
			var gpu_cube = new THREE.Mesh( cube_geometry, custom_cube_material );
			var cpu_cube = new THREE.Mesh( cube_geometry, cube_material );
			cpu_cube.position.x+= 2;
			scene.add( cpu_cube );
			scene.add( gpu_cube );



			// SETUP READ/WRITE RENDER TARGETS FOR UPDATE
			var RT_options = {
 ...