var strong_red = "#65170E";
var light_red = "#D91D16";
var orange = "#F5B350";
var arr = [
{"y":"0", "z":"-1", "color":strong_red},
{"y":"0", "z":"-4", "color":light_red},
{"y":"0", "z":"-5", "color":light_red},
{"y":"0", "z":"-6", "color":light_red},
{"y":"0", "z":"-7", "color":light_red},
{"y":"1", "z":"-1", "color":strong_red},
{"y":"1", "z":"-2", "color":strong_red},
{"y":"1", "z":"-3", "color":strong_red},
{"y":"1", "z":"-4", "color":light_red},
{"y":"1", "z":"-5", "color":light_red},
{"y":"1", "z":"-6", "color":light_red},
{"y":"1", "z":"-7", "color":light_red},
{"y":"1", "z":"-8", "color":light_red},
{"y":"1", "z":"-9", "color":light_red},
{"y":"1", "z":"-10", "color":light_red},
{"y":"2", "z":"-2", "color":strong_red},
{"y":"2", "z":"-3", "color":strong_red},
{"y":"2", "z":"-4", "color":strong_red},
{"y":"2", "z":"-5", "color":light_red},
{"y":"2", "z":"-6", "color":light_red},
{"y":"2", "z":"-7", "color":light_red},
{"y":"2", "z":"-8", "color":light_red},
{"y":"2", "z":"-9", "color":light_red},
{"y":"2", "z":"-10", "color":light_red},
{"y":"2", "z":"-11", "color":light_red},
{"y":"2", "z":"-12", "color":light_red},
{"y":"2", "z":"-13", "color":light_red},
{"y":"2", "z":"-14", "color":strong_red},
{"y":"2", "z":"-15", "color":strong_red},
{"y":"3", "z":"-1", "color":orange},
{"y":"3", "z":"-3", "color":strong_red},
{"y":"3", "z":"-5", "color":light_red},
{"y":"3", "z":"-6", "color":light_red},
{"y":"3", "z":"-7", "color":light_red},
{"y":"3", "z":"-8", "color":light_red},
{"y":"3", "z":"-9", "color":light_red},
{"y":"3", "z":"-10", "color":light_red},
{"y":"3", "z":"-11", "color":light_red},
{"y":"3", "z":"-12", "color":light_red},
{"y":"3", "z":"-13", "color":light_red},
{"y":"3", "z":"-14", "color":strong_red},
{"y":"3", "z":"-15", "color":strong_red},
{"y":"4", "z":"0", "color":orange},
{"y":"4", "z":"-1", "color":orange},
{"y":"4", "z":"-2", "color":orange},
{"y":"4", "z":"-5", "color":light_red},
{"y":"4", "z":"-6", "color":strong_red},
{"y":"4", "z":"-7", "color":light_red},
{"y":"4", "z":"-8", "color":light_red},
{"y":"4", "z":"-9", "color":light_red},
{"y":"4", "z":"-10", "color":orange},
{"y":"4", "z":"-11", "color":light_red},
{"y":"4", "z":"-12", "color":orange},
{"y":"4", "z":"-13", "color":light_red},
{"y":"4", "z":"-14", "color":strong_red},
{"y":"4", "z":"-15", "color":strong_red},
{"y":"5", "z":"0", "color":orange},
{"y":"5", "z":"-1", "color":orange},
{"y":"5", "z":"-2", "color":strong_red},
{"y":"5", "z":"-3", "color":strong_red},
{"y":"5", "z":"-4", "color":strong_red},
{"y":"5", "z":"-5", "color":strong_red},
{"y":"5", "z":"-6", "color":strong_red},
{"y":"5", "z":"-7", "color":strong_red},
{"y":"5", "z":"-8", "color":light_red},
{"y":"5", "z":"-9", "color":light_red},
{"y":"5", "z":"-10", "color":light_red},
{"y":"5", "z":"-11", "color":light_red},
{"y":"5", "z":"-12", "color":light_red},
{"y":"5", "z":"-15", "color":strong_red},
{"y":"6", "z":"-1", "color":strong_red},
{"y":"6", "z":"-2", "color":strong_red},
{"y":"6", "z":"-3", "color":strong_red},
{"y":"6", "z":"-4", "color":strong_red},
{"y":"6", "z":"-5", "color":strong_red},
{"y":"6", "z":"-6", "color":strong_red},
{"y":"6", "z":"-7", "color":strong_red},
{"y":"6", "z":"-8", "color":light_red},
{"y":"6", "z":"-9", "color":strong_red},
{"y":"6", "z":"-10", "color":strong_red},
{"y":"6", "z":"-11", "color":strong_red},
{"y":"6", "z":"-12", "color":light_red},
{"y":"6", "z":"-15", "color":strong_red},
{"y":"7", "z":"-2", "color":strong_red},
{"y":"7", "z":"-3", "color":strong_red},
{"y":"7", "z":"-4", "color":strong_red},
{"y":"7", "z":"-5", "color":strong_red},
{"y":"7", "z":"-6", "color":strong_red},
{"y":"7", "z":"-7", "color":light_red},
{"y":"7", "z":"-8", "color":strong_red},
{"y":"7", "z":"-9", "color":strong_red},
{"y":"7", "z":"-10", "color":strong_red},
{"y":"7", "z":"-11", "color":light_red},
{"y":"7", "z":"-12", "color":strong_red},
{"y":"8", "z":"-6", "color":orange},
{"y":"8", "z":"-7", "color":orange},
{"y":"8", "z":"-8", "color":orange},
{"y":"8", "z":"-9", "color":orange},
{"y":"8", "z":"-10", "color":orange},
{"y":"8", "z":"-11", "color":orange},
{"y":"8", "z":"-12", "color":orange},
{"y":"8", "z":"-13", "color":strong_red},
{"y":"9", "z":"-4", "color":strong_red},
{"y":"9", "z":"-5", "color":strong_red},
{"y":"9", "z":"-6", "color":orange},
{"y":"9", "z":"-7", "color":orange},
{"y":"9", "z":"-8", "color":orange},
{"y":"9", "z":"-9", "color":orange},
{"y":"9", "z":"-10", "color":strong_red},
{"y":"9", "z":"-11", "color":strong_red},
{"y":"9", "z":"-12", "color":strong_red},
{"y":"9", "z":"-13", "color":strong_red},
{"y":"9", "z":"-14", "color":strong_red},
{"y":"10", "z":"-4", "color":strong_red},
{"y":"10", "z":"-5", "color":orange},
{"y":"10", "z":"-6", "color":strong_red},
{"y":"10", "z":"-7", "color":strong_red},
{"y":"10", "z":"-8", "color":orange},
{"y":"10", "z":"-9", "color":orange},
{"y":"10", "z":"-10", "color":orange},
{"y":"10", "z":"-11", "color":strong_red},
{"y":"10", "z":"-12", "color":orange},
{"y":"10", "z":"-13", "color":orange},
{"y":"10", "z":"-14", "color":orange},
{"y":"10", "z":"-15", "color":strong_red},
{"y":"11", "z":"-4", "color":strong_red},
{"y":"11", "z":"-5", "color":orange},
{"y":"11", "z":"-6", "color":strong_red},
{"y":"11", "z":"-7", "color":orange},
{"y":"11", "z":"-8", "color":orange},
{"y":"11", "z":"-9", "color":orange},
{"y":"11", "z":"-10", "color":strong_red},
{"y":"11", "z":"-11", "color":orange},
{"y":"11", "z":"-12", "color":orange},
{"y":"11", "z":"-13", "color":orange},
{"y":"11", "z":"-14", "color":strong_red},
{"y":"11", "z":"-15", "color":strong_red},
{"y":"12", "z":"-5", "color":strong_red},
{"y":"12", "z":"-6", "color":strong_red},
{"y":"12", "z":"-7", "color":strong_red},
{"y":"12", "z":"-8", "color":orange},
{"y":"12", "z":"-9", "color":orange},
{"y":"12", "z":"-10", "color":strong_red},
{"y":"12", "z":"-11", "color":orange},
{"y":"12", "z":"-13", "color":strong_red},
{"y":"12", "z":"-14", "color":strong_red},
{"y":"12", "z":"-15", "color":strong_red},
{"y":"13", "z":"-5", "color":light_red},
{"y":"13", "z":"-6", "color":light_red},
{"y":"13", "z":"-7", "color":light_red},
{"y":"13", "z":"-8", "color":light_red},
{"y":"13", "z":"-9", "color":light_red},
{"y":"13", "z":"-10", "color":light_red},
{"y":"13", "z":"-11", "color":light_red},
{"y":"13", "z":"-12", "color":light_red},
{"y":"13", "z":"-13", "color":light_red},
{"y":"13", "z":"-14", "color":orange},
{"y":"13", "z":"-15", "color":orange},
{"y":"14", "z":"-6", "color":light_red},
{"y":"14", "z":"-7", "color":light_red},
{"y":"14", "z":"-8", "color":light_red},
{"y":"14", "z":"-9", "color":light_red},
{"y":"14", "z":"-10", "color":light_red},
{"y":"14", "z":"-13", "color":orange},
{"y":"14", "z":"-14", "color":orange},
{"y":"14", "z":"-15", "color":orange},
{"y":"15", "z":"-13", "color":orange},
{"y":"15", "z":"-14", "color":orange},
{"y":"15", "z":"-15", "color":orange},
];
var scene = new THREE.Scene();
// Camera
var camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.x = 150;
camera.position.y = -30;
camera.position.z = -50;
scene.add(camera);
// Renderer
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Objects loop
var size = 0.9;
var cube_container = new THREE.Group();
var cube_array = [];
for(var i=0;i<arr.length;i++){
cube_array[i] = new THREE.Mesh(new THREE.BoxGeometry(size,size,size), new THREE.MeshLambertMaterial({color: arr[i].color}));
cube_array[i].position.y = Number(arr[i].y) + (size/2);
cube_array[i].position.z = Number(arr[i].z) - (size/2);
cube_array[i].castShadow = true;
cube_container.add( cube_array[i] );
}
cube_container.position.z = (17/2);
cube_container.position.y = -8;
scene.add(cube_container);
// Ground
var geometry = new THREE.PlaneGeometry( 300, 300 );
var material = new THREE.MeshPhongMaterial({color: 0x59ABE3,shininess:1});
var plane = new THREE.Mesh( geometry, material );
plane.rotation.y = THREE.Math.degToRad(90);
plane.position.x = -10;
plane.receiveShadow = true;
scene.add( plane );
// Directional light #1
var light_directional_1 = new THREE.DirectionalLight(0xffffff, 0.2);
light_directional_1.position.y = 100;
light_directional_1.position.x = 100;
light_directional_1.position.z = 100;
light_directional_1.shadowCameraVisible = false;
light_directional_1.castShadow = true;
light_directional_1.shadowCameraLeft = -10;
light_directional_1.shadowCameraRight = 10;
light_directional_1.shadowCameraTop = 10;
light_directional_1.shadowCameraBottom = -10;
scene.add(light_directional_1);
// Fix directional light #2
var light_directional_2 = new THREE.DirectionalLight(0xffffff, 1);
light_directional_2.position.y = 0;
light_directional_2.position.x = 50;
light_directional_2.position.z = 0;
scene.add(light_directional_2);
light_directional_2.shadowCameraVisible = false;
light_directional_2.castShadow = true;
light_directional_2.shadowCameraLeft = -10;
light_directional_2.shadowCameraRight = 10;
light_directional_2.shadowCameraTop = 10;
light_directional_2.shadowCameraBottom = -10;
// Light rotation
var cpt = 0;
var moveLight = function() {
light_directional_1.position.z = Math.cos(cpt) * 100;
light_directional_1.position.y = Math.cos(cpt) * 100;
light_directional_1.position.x = Math.sin(cpt) * 100;
cpt += 0.01;
}
//controls
controls = new THREE.OrbitControls( camera );
// Add axes
var axisHelper = new THREE.AxisHelper( 500 );
// scene.add( axisHelper );
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(), intersected;
// Interaction - Mouse move
function onMouseMove( event ) {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
// Interaction - Hover on cubes
var onMouseHover = function() {
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( cube_container.children );
if ( intersects.length > 0 ) {
if ( intersected != intersects[ 0 ].object ) {
intersected = intersects[ 0 ].object;
cubeAnimation(intersected);
}
}
}
// Cube rotation animation
var cubeAnimation = function(cube_hovered) {
var rotation_init = { z:0 };
var rotation_target = { z: THREE.Math.degToRad(90) };
var tween = new TWEEN.Tween(rotation_init).to(rotation_target, 1000).easing(TWEEN.Easing.Bounce.InOut);
tween.onUpdate(function(){
cube_hovered.rotation.z = rotation_init.z;
});
tween.start();
}
var render = function () {
requestAnimationFrame( render );
controls.update();
TWEEN.update();
moveLight();
onMouseHover();
window.addEventListener( 'mousemove', onMouseMove, false );
renderer.render( scene, camera );
};
render();
!
