body{
  background-color: #000000;
  margin: 0px;
}
var width  = window.innerWidth,
            height = window.innerHeight,
            clock = new THREE.Clock(),
            cameraTarget = new THREE.Vector3( 0, 0, 0 ),
            renderer,
            camera,
            scene,
            light1, light2, light3, light4,
            helper;
        
        init();
        initObject();
        renderLoop();
        
        function init () {
          scene = new THREE.Scene();
        
          camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
          camera.position.set( 50, 50, 100 );
          camera.lookAt( cameraTarget );
        
          renderer = new THREE.WebGLRenderer({antialias: true});
          renderer.setSize( width, height );
          renderer.shadowMapEnabled = true;
          document.body.appendChild( renderer.domElement );
        
          var sphere = new THREE.SphereGeometry( 0.5, 16, 8 );

  				light1 = new THREE.PointLight( 0xff0040, 2, 50 );
  				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
  				scene.add( light1 );
          
  				light2 = new THREE.PointLight( 0x0040ff, 2, 50 );
  				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
  				scene.add( light2 );
          
  				light3 = new THREE.PointLight( 0x80ff80, 2, 50 );
  				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
  				scene.add( light3 );
  
  				light4 = new THREE.PointLight( 0xffaa00, 2, 50 );
  				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
  				scene.add( light4 );
          
          helper = new THREE.AxisHelper( 30 );
          scene.add( helper );
        }
        
        
      	var cube;
      	function initObject() {
      
      		var geometry = new THREE.SphereGeometry(20, 20, 20);
      		var material = new THREE.MeshPhongMaterial({color: 0xffffff});
      		cube = new THREE.Mesh(geometry, material);
      		scene.add(cube);
      		cube.position.set(0, 0, 0);
      	}
        
        function renderLoop (){
          requestAnimationFrame( renderLoop );
          
          var time = Date.now() * 0.0005;
				  var delta = clock.getDelta();
          
          light1.position.x = Math.sin( time * 0.7 ) * 30;
  				light1.position.y = Math.cos( time * 0.5 ) * 40;
  				light1.position.z = Math.cos( time * 0.3 ) * 30;
  
  				light2.position.x = Math.cos( time * 0.3 ) * 30;
  				light2.position.y = Math.sin( time * 0.5 ) * 40;
  				light2.position.z = Math.sin( time * 0.7 ) * 30;
  
  				light3.position.x = Math.sin( time * 0.7 ) * 30;
  				light3.position.y = Math.cos( time * 0.3 ) * 40;
  				light3.position.z = Math.sin( time * 0.5 ) * 30;
  
  				light4.position.x = Math.sin( time * 0.3 ) * 30;
  				light4.position.y = Math.cos( time * 0.7 ) * 40;
  				light4.position.z = Math.sin( time * 0.5 ) * 30;
        
          renderer.render( scene, camera );
        }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js