Threejs final

"Harmony"

http://threejsplaygnd.brangerbriz.net/s/?id=1058

The concept is of an octagram that rotates while changing colour subtly, making the colours blend into a nice harmonious ball. I set the background colour to black for better viewing. I first made a torus shape, using the basic material and changing the rotation parameters so that it would resemble a star. For the animation, I put in a simple rotation on all 3 axis, which would make the star create a nice "circle" or sphere. The colour is created by :

var s = Math.sin( Date.now() * 0.002 );
mesh.material.color.setHSL(0.5, s, 0.8 );

I have tried alternating the number to test with different colour combinations and found this one to be the most harmonious, thus the name.

Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

body {

background-color: #000000;

margin: 0;

overflow: hidden;

}

</style>

</head>

<body>

<script src="http://brangerbriz.net/labs/threejs_playGnd/js/three.min.js"></script>

<script src="http://brangerbriz.net/labs/threejs_playGnd/js/Detector.js"></script>

<script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer;

var geometry, material, mesh;

function setup() {

var W = window.innerWidth, H = window.innerHeight;

renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );

renderer.autoClearColor = false;

renderer.setSize( W, H );

document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );

camera.position.z = 500;

scene = new THREE.Scene();

// paste your code from the geometryGUI here

geometry = new THREE.TorusGeometry(100, 48.45, 35, 20, 47.12);

material = new THREE.MeshBasicMaterial({shading: THREE.SmoothShading});

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

mesh.position.y = 8.37;

mesh.rotation.x = -5;

mesh.rotation.y = 0;

mesh.rotation.z = 5;

scene.add(mesh);

}

function draw() {

requestAnimationFrame( draw );

// experiment with code from the snippets menu here

var s = Math.sin( Date.now() * 0.002 );

mesh.material.color.setHSL(0.5, s, 0.8 );

mesh.rotation.z = Date.now() * 0.0005;

mesh.rotation.y = Date.now() * 0.0005;

mesh.rotation.x = Date.now() * 0.0005;

renderer.render( scene, camera );

}

setup();

draw();

</script>

</body>

</html>