JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://threejs.org/build/three.js"></script>

<script id="vertexShader" type="x-shader/x-vertex">

			#include <morphtarget_pars_vertex>

			void main()	{
			
				#include <begin_vertex>
				#include <morphtarget_vertex>

				gl_Position = vec4( transformed, 1.0 );

			}

</script>

<script id="fragmentShader" type="x-shader/x-fragment">

			void main()	{

				gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );

			}

</script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;

var mesh;

init();
animate();

function init() {


	camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );

	scene = new THREE.Scene();

	var geometry = new THREE.PlaneBufferGeometry();
	
	// generate morph targets
	
	morphTargets = [];
	
	var morphTarget = geometry.attributes.position.clone();
	morphTarget.name = 'morphTarget1';
	
	var v = new THREE.Vector3();

	for ( var i = 0; i < morphTarget.count; i ++ ) {
	
		v.fromBufferAttribute( morphTarget, i );
		v.multiplyScalar( 2 );
		morphTarget.setXYZ( i, v.x, v.y, v.z );
	
	}
	
	morphTargets.push( morphTarget );
	
	geometry.morphAttributes.position = morphTargets;
	
	//

	var material = new THREE.ShaderMaterial( {

		vertexShader: document.getElementById( 'vertexShader' ).textContent,
		fragmentShader: document.getElementById( 'fragmentShader' ).textContent

	} );
	
	material.morphTargets = true;

  mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	renderer.setSize( window.innerWidth, window.innerHeight );

}

var t = 0;

function animate( timestamp ) {

	requestAnimationFrame( animate );
	
	t += 0.01;
	
	mesh.morphTargetInfluences[ 0 ] = Math.abs( Math.sin( t ) );

	renderer.render( scene, camera );

}