From 789a149a79d65a52817e25d3900a61c390a871c5 Mon Sep 17 00:00:00 2001 From: haselkern Date: Mon, 18 Aug 2014 15:41:08 +0200 Subject: [PATCH] Rotatable Cube + Sliders And Checkboxes --- index.htm | 19 +++++++++++++++-- main.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++----- style.css | 1 + 3 files changed, 77 insertions(+), 7 deletions(-) diff --git a/index.htm b/index.htm index 327166b..94ed65d 100644 --- a/index.htm +++ b/index.htm @@ -1,6 +1,7 @@ + Minecraft Armor Stand @@ -19,9 +20,23 @@
- 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{