mahuntington
/
webgl-robot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding finished product

Browse Source
master
Matt Huntington 12 years ago
commit 8e0a07aede
6 changed files with 38788 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
img/BasketballColor.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/earth.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

18
index.html
Unescape View File

@ -0,0 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<title>Robot</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/app.js"></script>
<style>
div {
width:500px;
height:500px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

288
js/app.js
Unescape View File

@ -0,0 +1,288 @@
//Matt Huntington
$(function(){
function debugAxes(parent){
var xLineGeometry = new THREE.Geometry();
var xLineMat = new THREE.LineBasicMaterial({color: 0xff0000, lineWidth: 5});
xLineGeometry.vertices.push(new THREE.Vertex(new THREE.Vector3(1,0,0)), new THREE.Vertex(new THREE.Vector3(0,0,0)));
var x_line = new THREE.Line(xLineGeometry, xLineMat);
var yLineGeometry = new THREE.Geometry();
var yLineMat = new THREE.LineBasicMaterial({color: 0x00ff00, lineWidth: 5});
yLineGeometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0,1,0)), new THREE.Vertex(new THREE.Vector3(0,0,0)));
var y_line = new THREE.Line(yLineGeometry, yLineMat);
var zLineGeometry = new THREE.Geometry();
var zLineMat = new THREE.LineBasicMaterial({color: 0x0000ff, lineWidth: 5});
zLineGeometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0,0,1)), new THREE.Vertex(new THREE.Vector3(0,0,0)));
var z_line = new THREE.Line(zLineGeometry, zLineMat);
parent.add(x_line);
parent.add(y_line);
parent.add(z_line);
}
// Create the Three.js renderer, add it to our div
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
renderer.setSize(container.offsetWidth, container.offsetHeight);
renderer.setClearColor(0x0000cc, 1);
container.appendChild( renderer.domElement );
var scene = new THREE.Scene();
// Create a camera and add it to the scene
var camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
camera.position.set( 0, 7, 7 );
camera.rotation.x = Math.PI * -1 / 4;
scene.add( camera );
// Orthographic camera
var ortho_camera = new THREE.OrthographicCamera(
10 / -2, // Left
10 / 2, // Right
10 / 2, // Top
10 / -2, // Bottom
0, // Near clipping plane
1000 ); // Far clipping plane
ortho_camera.position.set(0,7,0);
//ortho_camera.position.set(0,0,7);
ortho_camera.rotation.x = -1 * Math.PI/2;
scene.add(ortho_camera);
// Create Light
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 5, 5, 5 );
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 1;
spotLight.shadowCameraFar = 15;
spotLight.shadowCameraFov = 60;
scene.add( spotLight );
//Create Grass
var grass_material = new THREE.MeshPhongMaterial( {
ambient: 0x00dd00,
color: 0x00cc00,
specular: 0x009900,
shininess: 30,
shading: THREE.FlatShading } );
var radius = 5;
var segments = 32;
var circleGeometry = new THREE.CircleGeometry( radius, segments );
var circle = new THREE.Mesh( circleGeometry, grass_material );
circle.rotation.x = -1 * Math.PI / 2;
circle.castShadow = true;
circle.receiveShadow = true;
scene.add( circle );
//Create Ball
var ball_container = new THREE.Object3D();
var ball_geometry = new THREE.SphereGeometry(0.3,32,32);
var ball_material = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('img/BasketballColor.jpg'),shininess:15});
var ball = new THREE.Mesh(ball_geometry, ball_material);
ball.position.set(0,0.3,2);
ball.castShadow = true;
ball.receiveShadow = true;
ball_container.add(ball);
ball_container.rotation.y = 1.75 * Math.PI;
scene.add(ball_container);
// Create Robot
var robot_group = new THREE.Object3D();
var base_geometry = new THREE.CubeGeometry( 1, 0.5, 1 );
var metal_material = new THREE.MeshPhongMaterial( {
ambient: 0x030303,
color: 0xdddddd,
specular: 0x999999,
shininess: 30,
shading: THREE.FlatShading } );
var cube = new THREE.Mesh( base_geometry, metal_material );
cube.position.set( 0, 0.7, 2);
cube.castShadow = true;
cube.receiveShadow = true;
// Wheels
var wheel_geometry = new THREE.TorusGeometry(0.3, 0.15, 20, 100);
var wheel_material = new THREE.MeshLambertMaterial({ambient:0x222222, color:0x555555});
var wheel1 = new THREE.Mesh( wheel_geometry, wheel_material );
wheel1.position.set(0.5,-0.3,0.65);
wheel1.castShadow = true;
wheel1.receiveShadow = true;
var wheel2 = new THREE.Mesh( wheel_geometry, wheel_material );
wheel2.position.set(-0.5,-0.3,0.65);
wheel2.castShadow = true;
wheel2.receiveShadow = true;
var wheel3 = new THREE.Mesh( wheel_geometry, wheel_material );
wheel3.position.set(0.5,-0.3,-0.65);
wheel3.castShadow = true;
wheel3.receiveShadow = true;
var wheel4 = new THREE.Mesh( wheel_geometry, wheel_material );
wheel4.position.set(-0.5,-0.3,-0.65);
wheel4.castShadow = true;
wheel4.receiveShadow = true;
cube.add(wheel1);
cube.add(wheel2);
cube.add(wheel3);
cube.add(wheel4);
// Arm
var arm_up_angle = Math.PI / -4;
var arm_down_angle = Math.PI / -2.5;
var shoulder_geometry = new THREE.SphereGeometry(0.25,32,32);
var shoulder = new THREE.Mesh(shoulder_geometry, metal_material);
shoulder.castShadow = true;
shoulder.receiveShadow = true;
var arm_geometry = new THREE.CylinderGeometry( 0.1, 0.1, 1, 32 );
var arm = new THREE.Mesh( arm_geometry, metal_material );
arm.castShadow = true;
arm.receiveShadow = true;
shoulder.position.set(0,0.25,0);
shoulder.rotation.z = arm_up_angle;
arm.position.set(0,0.5,0);
var elbow_geometry = new THREE.SphereGeometry(0.15,32,32);
var elbow = new THREE.Mesh(elbow_geometry, metal_material);
elbow.position.set(0,0.5,0);
elbow.castShadow = true;
elbow.receiveShadow = true;
elbow.rotation.z = Math.PI / -4;
arm.add(elbow);
var forearm = new THREE.Mesh(arm_geometry, metal_material);
forearm.castShadow = true;
forearm.receiveShadow = true;
forearm.position.set(0,0.5,0);
var wrist = new THREE.Mesh(elbow_geometry, metal_material);
wrist.castShadow = true;
wrist.receiveShadow = true;
wrist.position.set(0,0.5,0);
wrist.rotation.z = -7 * Math.PI/20;
var finger_geometry = new THREE.TorusGeometry(0.5/Math.PI, 0.05, 20, 100, Math.PI);
//Finger1
var knuckle1 = new THREE.Object3D();
var finger1 = new THREE.Mesh( finger_geometry, metal_material );
finger1.castShadow = true;
finger1.receiveShadow = true;
finger1.rotation.z = Math.PI/-2;
finger1.position.set(0,0.5/Math.PI,0);
knuckle1.add(finger1);
knuckle1.position.set(0,0.075,0);
knuckle1.rotation.z = Math.PI / -4;
knuckle1.rotation.y = Math.PI;
wrist.add(knuckle1);
//Finger2
var knuckle2 = new THREE.Object3D();
var finger2 = new THREE.Mesh( finger_geometry, metal_material );
finger2.castShadow = true;
finger2.receiveShadow = true;
finger2.rotation.z = Math.PI/-2;
finger2.position.set(0,0.5/Math.PI,0);
knuckle2.add(finger2);
knuckle2.position.set(0,0.075,0);
knuckle2.rotation.z = Math.PI / -4;
knuckle2.rotation.y = Math.PI / -3;
wrist.add(knuckle2);
//Finger3
var knuckle3 = new THREE.Object3D();
var finger3 = new THREE.Mesh( finger_geometry, metal_material );
finger3.castShadow = true;
finger3.receiveShadow = true;
finger3.rotation.z = Math.PI/-2;
finger3.position.set(0,0.5/Math.PI,0);
knuckle3.add(finger3);
knuckle3.position.set(0,0.075,0);
knuckle3.rotation.z = Math.PI / -4;
knuckle3.rotation.y = Math.PI / 3;
wrist.add(knuckle3);
forearm.add(wrist);
elbow.add(forearm);
shoulder.add(arm);
cube.add(shoulder);
robot_group.add(cube);
scene.add( robot_group );
var test_cube = new THREE.Mesh(base_geometry, grass_material);
test_cube.position.set(0,-0.25,0);
test_cube.scale.set(5,1,1);
//scene.add(test_cube);
// Render it
var angle_between_robot_and_ball;
var angle_between_tangent_and_line_to_ball;
var robot_stopping_point;
function calculateAngles(){
angle_between_robot_and_ball = (2 * Math.asin(((Math.cos(Math.PI/10)+Math.sin(7*Math.PI/20))/2)/2));
angle_between_tangent_and_line_to_ball = Math.PI/2 - (Math.PI-Math.PI/2-angle_between_robot_and_ball/2);
robot_stopping_point = ball_container.rotation.y - angle_between_robot_and_ball;
if(robot_stopping_point <= 0){
robot_stopping_point = robot_stopping_point + 2 * Math.PI;
}
}
var picked_up_ball = false;
var resetting_arm = false;
var drive = true;
calculateAngles();
run();
function run(){
//renderer.render( scene, ortho_camera );
renderer.render( scene, camera );
if(drive){
robot_group.rotation.y += 0.01;
if(robot_group.rotation.y >= Math.PI * 2 && robot_group.rotation.y < Math.PI * 2 + 0.01){
robot_group.rotation.y = 0;
}
if (robot_group.rotation.y > robot_stopping_point && robot_group.rotation.y < robot_stopping_point+0.01){
robot_group.rotation.y = robot_stopping_point;
drive = false;
} else if (robot_group.rotation.y == robot_stopping_point){
drive = false;
}
} else if(!resetting_arm && (shoulder.rotation.y < angle_between_tangent_and_line_to_ball || shoulder.rotation.z > arm_down_angle)) {
drive = false;
if(shoulder.rotation.y < angle_between_tangent_and_line_to_ball){
shoulder.rotation.y += 0.01;
}
if(shoulder.rotation.z > arm_down_angle){
shoulder.rotation.z -= 0.01;
}
} else if ( ball_container.parent.id != wrist.id && picked_up_ball == false ) {
scene.remove(ball_container);
var new_wrist_height = 0.25+0.7+Math.sin(Math.PI/10)-Math.cos(7*Math.PI/20);
ball_container.rotation.z = Math.PI;
ball.position.set(0, -1*new_wrist_height+0.3, 0);
ball_container.rotation.y = 0;
ball.rotation.y += angle_between_robot_and_ball/2;
wrist.add(ball_container);
picked_up_ball = true;
} else if ( ball_container.parent.id == wrist.id && shoulder.rotation.y < Math.PI - angle_between_tangent_and_line_to_ball) {
shoulder.rotation.y += 0.01;
} else if ( shoulder.rotation.y > 0) {
shoulder.rotation.y -= 0.01;
if(ball_container.parent == wrist){
wrist.remove(ball_container);
ball.position.set(0,0.3,2);
ball_container.rotation.z = 0;
if(robot_group.rotation.y - angle_between_robot_and_ball <= 0){
ball_container.rotation.y = 2 * Math.PI + robot_group.rotation.y - angle_between_robot_and_ball;
} else {
ball_container.rotation.y=robot_group.rotation.y - angle_between_robot_and_ball;
}
ball.rotation.y += Math.PI+angle_between_robot_and_ball/2;;
//ball.rotation.y -= angle_between_robot_and_ball/2;
scene.add(ball_container);
}
resetting_arm = true;
if(shoulder.rotation.z < arm_up_angle){
shoulder.rotation.z += 0.01;
}
} else {
resetting_arm = false;
picked_up_ball = false;
drive = true;
calculateAngles();
}
requestAnimationFrame(run);
}
});

37760
js/three.js
View File

File diff suppressed because it is too large Load Diff

722
js/three.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save