An introduction to Three.js

Use your mouse or trackpad to zoom in / out and change your perspective.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>

<script src='js/OrbitControls.js'></script>

<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>

<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.OctahedronGeometry( 1,0);
var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
var diamond = new THREE.Mesh( geometry, material );

var geometry2 = new THREE.OctahedronGeometry( 1,0);
var material2 = new THREE.MeshLambertMaterial( { color: 0x00ffff, wireframe: false } );
var diamond2 = new THREE.Mesh( geometry2, material2 );

var light = new THREE.AmbientLight(0x101010);
light.position.set(-100,40,400);

var light2 = new THREE.PointLight(0xffffff);
light2.position.set(-100,300,600);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 2;
controls.maxDistance = 50;

scene.add( diamond );
scene.add( diamond2 );
scene.add(light);
scene.add(light2);
camera.position.z = 5;

var rotateTrue = true;

document.body.onmousedown = function() { rotateTrue = false; };
document.body.onmouseup = function() { setTimeout( function() {rotateTrue = true; }, 1500); };

var render = function () {
requestAnimationFrame( render );
if(rotateTrue) {
diamond.rotation.x += .01;
diamond2.rotation.x += .01;
diamond.rotation.y += .01;
diamond2.rotation.y += .01;
diamond.rotation.z += .015;
diamond2.rotation.z += .015;
}
renderer.render(scene, camera);
controls.update();
};
render();
</script>