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 );
}
This Pen doesn't use any external CSS resources.