Last active
December 7, 2016 20:58
-
-
Save akibmayadav/b61440d405c8ae01070883754889c087 to your computer and use it in GitHub Desktop.
Homework4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
HOMEWORK4 | |
AMBIKA YADAV | |
--> | |
<html> | |
<head> | |
<title>HOME WORK 4</title> | |
<style> | |
body { | |
margin: 0; | |
} | |
#info { | |
font-family:Monospace; | |
font-size:20px; | |
text-align:center; | |
position: absolute; | |
top: 0px; width: 100%; | |
padding: 5px; | |
color: #ddd; | |
rgba(0,0,0,1); | |
} | |
canvas { | |
background:#ffffff | |
width: 100%; | |
height: 100% | |
} | |
</style> | |
</head> | |
<div id="info"> | |
HOMEWORK 4 <br/> | |
Ambika Yadav<br/> | |
</div> | |
<body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script> | |
<script> | |
var scene = new THREE.Scene(); | |
var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 ); | |
var renderer = new THREE.WebGLRenderer(); | |
renderer.setClearColor( 0x404040); | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
document.body.appendChild(renderer.domElement); | |
var radius_max = 50 ; | |
var radius_min = 20 | |
var radius_orientation = 300 ; | |
var detail = 0 ; | |
var color_object = [0xe05028, 0xe0c728 , 0xb23e70, 0xc92a3c ]; | |
var degree = Math.PI/180 ; | |
var number_of_object = 20; | |
//Adding Lights | |
var overall_light = new THREE.AmbientLight( 0x404040 ); | |
scene.add( overall_light ); | |
var light_front = new THREE.DirectionalLight( 0xffffff ); | |
light_front.position.set( 400,100,500 ).normalize(); | |
scene.add( light_front ); | |
//Adding Objects | |
var object = new Array(); | |
var object_position = new Array (); | |
for ( var a = 0 ; a <number_of_object ;a++) | |
{ | |
radius = Math.random() * (radius_max - radius_min) + radius_min; | |
var object_geo = new THREE.IcosahedronGeometry(radius, detail); | |
var object_material = new THREE.MeshLambertMaterial({color : color_object[a%4]}); | |
object[a] = new THREE.Mesh(object_geo,object_material); | |
scene.add(object[a]); | |
object_position[a] = new Object(); | |
object_position[a].x = radius_orientation*Math.sin(degree*360/number_of_object *a); | |
object_position[a].y = radius_orientation*Math.cos(degree*360/number_of_object *a); | |
object_position[a].z = -200; | |
object[a].position.set(object_position[a].x,object_position[a].y,object_position[a].z); | |
} | |
var frame_counter =0 ; | |
var z_position_rotation =0; | |
var render = function() { | |
requestAnimationFrame( render ); | |
frame_counter +=1; | |
if (frame_counter%10 == 0) | |
{ | |
z_position_rotation += degree*4; | |
radius_orientation = 300*Math.sin(z_position_rotation); | |
for ( var a = 0 ; a <number_of_object ;a++) | |
{ | |
object[a].rotation.x += degree*5; | |
object[a].rotation.y += degree*5; | |
object[a].position.x = radius_orientation*Math.sin(degree*360/number_of_object *a +z_position_rotation); | |
object[a].position.y = radius_orientation*Math.cos(degree*360/number_of_object *a +z_position_rotation); | |
} | |
} | |
renderer.render( scene, camera ); | |
} | |
render(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment