- Small Armor Stand
+ Invisible
+ Invulnerable
+ No Base Plate
+ No Gravity
Show Arms
-
+ Small
+ Rotation:
+ Head:
+ Body:
+
+ Left Leg:
+ Right Leg:
+
+
+ Left Arm:
+ Right Arm:
+
diff --git a/main.js b/main.js
index 9f2f247..8679944 100644
--- a/main.js
+++ b/main.js
@@ -2,8 +2,24 @@
// http://code.tutsplus.com/tutorials/webgl-with-threejs-basics--net-35688
// for helping me getting started
+//Stuff for rendering
var width, height, renderer, scene, camera, cube;
var clock = new THREE.Clock;
+var rotY = 0, rotX = 0;
+
+var armorstand; //Groups all the other elements
+
+//Stuff for mouse movements
+var mouseDownX;
+var mouseDownY;
+var mouseMoveX;
+var mouseMoveY;
+var mouseRotationMultiplier = 0.008;
+//A point class will help us manage the mouse movements.
+Point = {
+ x:null,
+ y:null
+};
$(document).ready(function(){
setup();
@@ -16,6 +32,22 @@ $(document).ready(function(){
$(':checkbox').change(function() {
handleInput();
});
+
+ $("#gl")
+ .mousedown(function(event){
+ mouseDownX = event.pageX;
+ mouseDownY = event.pageY;
+ })
+ .mousemove(function(event){
+ mouseMoveX = event.pageX;
+ mouseMoveY = event.pageY;
+ })
+ .mouseup(function(event){
+ rotY += getMouseDeltaX();
+ rotX += getMouseDeltaY();
+ mouseDownX = null;
+ mouseDownY = null;
+ });
});
function setup(){
@@ -27,15 +59,21 @@ function setup(){
$("#gl").append(renderer.domElement);
- scene = new THREE.Scene;
+ scene = new THREE.Scene();
+ armorstand = new THREE.Object3D();
var cubeGeo = new THREE.CubeGeometry(1, 1, 1);
var cubeMat = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
cube = new THREE.Mesh(cubeGeo, cubeMat);
- cube.rotation.y = 45 * Math.PI/180;
+ //Parenting example
+ cube2 = new THREE.Mesh(new THREE.CubeGeometry(0.5,0.5,0.5), cubeMat);
+ cube2.position.y = 0.7;
+ cube.add(cube2);
- scene.add(cube);
+ armorstand.add(cube);
+
+ scene.add(armorstand);
camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
camera.position.y = 2;
@@ -52,12 +90,28 @@ function setup(){
function handleInput(){
cube.material.color.setHex(Math.random() * 0xFFFFFF);
}
+function getMouseDeltaX(){
+ var mouseDeltaX = 0;
+ if(mouseDownX != null && mouseMoveX != null){
+ mouseDeltaX = mouseMoveX - mouseDownX;
+ }
+ return mouseDeltaX * mouseRotationMultiplier;
+}
+function getMouseDeltaY(){
+ var mouseDeltaY = 0;
+ if(mouseDownY != null && mouseMoveY != null){
+ mouseDeltaY = mouseMoveY - mouseDownY;
+ }
+ return mouseDeltaY * mouseRotationMultiplier;
+}
function render(){
renderer.render(scene, camera);
- var d = clock.getDelta();
- cube.rotation.y += d;
+ var deltaTime = clock.getDelta();
+
+ armorstand.rotation.y = rotY + getMouseDeltaX();
+ armorstand.rotation.x = rotX + getMouseDeltaY();
requestAnimationFrame(render);
}
\ No newline at end of file
diff --git a/style.css b/style.css
index 67b7659..789d5ee 100644
--- a/style.css
+++ b/style.css
@@ -22,6 +22,7 @@ body{
width: 60%;
height: 100%;
float: left;
+ cursor: move;
}
#controls{