An introduction to Three.js

Published by cecil on

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>