body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}
const renderer = new THREE.WebGLRenderer( {
	alpha: false
} );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
const scene = new THREE.Scene;

const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.set( 8 , 6 , 0 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
new THREE.OrbitControls( camera, renderer.domElement );

const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 30, 30, 30 );
light.castShadow = true;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
light.shadow.camera.top = 24;
light.shadow.camera.right = 24;
light.shadow.camera.bottom = -24;
light.shadow.camera.left = -24;
light.shadow.camera.far = 64;
scene.add( light );


const floor = new THREE.Mesh( new THREE.PlaneBufferGeometry( 12, 12, 1, 1 ), new THREE.MeshStandardMaterial( { color: new THREE.Color( 'grey' ) } ) );
floor.rotation.x = -90 * 0.01745327;
floor.receiveShadow = true;
scene.add( floor );
scene.background = new THREE.Color( 'white' );

const uTime = {
	shared: true,
	mixed: true,
	value: 0
};

const texture = new THREE.TextureLoader().load( "https://thumbs.dreamstime.com/b/abstract-purple-texture-acrylic-paint-sphere-pattern-space-abstract-purple-texture-acrylic-paint-sphere-pattern-205385094.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

const geometry = new THREE.SphereGeometry( 1, 32, 32 );
const material = new THREE.MeshBasicMaterial( {map:texture} );


material.userData = {
  time: {
    value: 0
  }
};
material.onBeforeCompile = shader => {
  shader.uniforms.time = material.userData.time;
  shader.uniforms.scale = material.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;
    `
  );
}

const sphere = new THREE.Mesh( geometry, material );
sphere.position.y=1
sphere.castShadow= true
scene.add( sphere );

let t = 0.0;
function render() {
	t += 0.05;
     texture.offset.x+=0.001
     	material.userData.time.value = t

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


render();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://threejs.org/build/three.js
  2. https://threejs.org/examples/js/controls/OrbitControls.js
  3. https://threejs.org/examples/js/controls/TransformControls.js
  4. https://mevedia.com/share/ExtendMaterial.js?vxy