mirror of
https://github.com/haselkern/Minecraft-ArmorStand.git
synced 2025-05-17 15:05:33 +00:00
Rotatable Cube + Sliders And Checkboxes
This commit is contained in:
parent
947cb306ef
commit
789a149a79
3 changed files with 77 additions and 7 deletions
64
main.js
64
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);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue