JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></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.setScalar(5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var boxGeom = new THREE.BoxBufferGeometry(2, 2, 2);

var boxMat = new THREE.MeshBasicMaterial({
  color: "white",
  wireframe: false
});
boxMat.userData = {
  time: {
    value: 0
  }
};
boxMat.onBeforeCompile = shader => {
  shader.uniforms.time = boxMat.userData.time;
  shader.uniforms.scale = boxMat.userData.scale;

  shader.fragmentShader = `
  	uniform float time;
  ` + shader.fragmentShader;
  shader.fragmentShader = shader.fragmentShader.replace(
  	`gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
    `
    gl_FragColor = vec4( outgoingLight, diffuseColor.a );
    gl_FragColor.gb *= sin(time * 2. - 3.1415926 * 0.5) * 0.5 + 0.5; 
    `
  );
}

var box = new THREE.Mesh(boxGeom, boxMat);
scene.add(box);

var clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
	boxMat.userData.time.value = clock.getElapsedTime();
  renderer.render(scene, camera)
});