Pete Shadbolt
9 yıl önce
5 değiştirilmiş dosya ile 59 ekleme ve 25 silme
Görünümü Böl
Diff Seçenekleri
-
+2 -1static/index.html
-
+5 -4static/main.css
-
+16 -3static/scripts/gui.js
-
+1 -0static/scripts/main.js
-
+35 -17static/scripts/mouse.js
+ 2
- 1
static/index.html
Dosyayı Görüntüle
| @@ -14,6 +14,7 @@ | |||
| <script src="scripts/materials.js"></script> | |||
| <script src="scripts/graph.js"></script> | |||
| <script src="scripts/gui.js"></script> | |||
| <script src="scripts/editor.js"></script> | |||
| <script src="scripts/websocket.js"></script> | |||
| <script src="scripts/main.js"></script> | |||
| </head> | |||
| @@ -21,7 +22,7 @@ | |||
| <body> | |||
| <img id="ball" src="img/ball.png" style=display:none;> | |||
| <div id=node_info class=hidden> nothing </div> | |||
| <div id=message class=hidden> </div> | |||
| <div id=server_info class=hidden> </div> | |||
| <div id=pallette> | |||
| <ul> | |||
+ 5
- 4
static/main.css
Dosyayı Görüntüle
| @@ -14,24 +14,25 @@ html, body { margin: 0; padding: 0; overflow: hidden; font-size: 10pt; font-fam | |||
| border-radius:3px; | |||
| } | |||
| #pallette { | |||
| #server_info { | |||
| background-color: black; | |||
| color:white; | |||
| padding: 10px; | |||
| font-family:"courier new"; | |||
| position: absolute; | |||
| top: 10px; | |||
| bottom: 10px; | |||
| right: 10px; | |||
| font-size: 9pt; | |||
| } | |||
| #message { | |||
| #pallette { | |||
| background-color: black; | |||
| color:white; | |||
| padding: 10px; | |||
| font-family:"courier new"; | |||
| position: absolute; | |||
| bottom: 10px; | |||
| top: 10px; | |||
| right: 10px; | |||
| font-size: 9pt; | |||
| } | |||
+ 16
- 3
static/scripts/gui.js
Dosyayı Görüntüle
| @@ -46,8 +46,22 @@ gui.makeScene = function() { | |||
| // Put an HTML message to the screen | |||
| gui.serverMessage = function(msgtext) { | |||
| message.innerHTML = msgtext; | |||
| message.className = "visible"; | |||
| if (msgtext) { | |||
| server_info.innerHTML = msgtext; | |||
| server_info.className = "visible"; | |||
| } else { | |||
| server_info.innerHTML = ""; | |||
| server_info.className = "hidden"; | |||
| } | |||
| }; | |||
| gui.nodeMessage = function(msgtext) { | |||
| node_info.innerHTML = msgtext; | |||
| node_info.className = "visible"; | |||
| }; | |||
| gui.hideNodeMessage = function(){ | |||
| node_info.className = "hidden"; | |||
| }; | |||
| // Set the position of the info popup | |||
| @@ -56,7 +70,6 @@ gui.setInfoPosition = function(position){ | |||
| h = node_info.offsetHeight; | |||
| node_info.style.left = position.x - w/2 + "px"; | |||
| node_info.style.top = position.y - h -10 + "px"; | |||
| node_info.className = "visible"; | |||
| }; | |||
| // The main loop | |||
+ 1
- 0
static/scripts/main.js
Dosyayı Görüntüle
| @@ -8,6 +8,7 @@ window.onload = function() { | |||
| materials.prepare(); | |||
| gui.prepare(); | |||
| mouse.prepare(); | |||
| editor.prepare(); | |||
| bootstrap(); | |||
| gui.loop(); | |||
| }; | |||
+ 35
- 17
static/scripts/mouse.js
Dosyayı Görüntüle
| @@ -3,46 +3,64 @@ mouse.wasClick = true; | |||
| mouse.raycaster = new THREE.Raycaster(); | |||
| mouse.onFreeMove = function(){console.log("Free move");}; | |||
| mouse.onDrag = function(){console.log("Drag");}; | |||
| mouse.onClick = function(){console.log("Click");}; | |||
| mouse.onCtrlClick = function(){console.log("Ctrl-click");}; | |||
| mouse.onShiftClick = function(){console.log("Shift-click");}; | |||
| mouse.onFreeMove = function() { | |||
| console.log("Free move"); | |||
| }; | |||
| mouse.onDrag = function() { | |||
| console.log("Drag"); | |||
| }; | |||
| mouse.onClick = function() { | |||
| console.log("Click"); | |||
| }; | |||
| mouse.onCtrlClick = function() { | |||
| console.log("Ctrl-click"); | |||
| }; | |||
| mouse.onShiftClick = function() { | |||
| console.log("Shift-click"); | |||
| }; | |||
| mouse.prepare = function(){ | |||
| mouse.prepare = function() { | |||
| var el = gui.renderer.domElement; | |||
| el.addEventListener("mousedown", mouse.onDown); | |||
| el.addEventListener("mouseup", mouse.onUp); | |||
| el.addEventListener("mousemove", mouse.onMove); | |||
| }; | |||
| mouse.onDown = function(event){ | |||
| mouse.onDown = function(event) { | |||
| mouse.wasClick = true; | |||
| mouse.pressed = true; | |||
| }; | |||
| mouse.onUp = function(event){ | |||
| if (!mouse.wasClick){return;} | |||
| mouse.onUp = function(event) { | |||
| if (!mouse.wasClick) { | |||
| return; | |||
| } | |||
| mouse.pressed = false; | |||
| if (event.ctrlKey){mouse.onCtrlClick();} | |||
| else if (event.shiftKey){mouse.onShiftClick();} | |||
| else { | |||
| if (event.ctrlKey) { | |||
| mouse.onCtrlClick(); | |||
| } else if (event.shiftKey) { | |||
| mouse.onShiftClick(); | |||
| } else { | |||
| mouse.onClick(); | |||
| } | |||
| }; | |||
| mouse.onMove = function(event) { | |||
| mouse.wasClick = false; | |||
| mouse.position_absolute = {x: event.clientX, y:event.clientY}; | |||
| mouse.position_relative = {x: (event.clientX / window.innerWidth) * 2 - 1, | |||
| y: -(event.clientY / window.innerHeight) * 2 + 1}; | |||
| mouse.position_absolute = { | |||
| x: event.clientX, | |||
| y: event.clientY | |||
| }; | |||
| mouse.position_relative = { | |||
| x: (event.clientX / window.innerWidth) * 2 - 1, | |||
| y: -(event.clientY / window.innerHeight) * 2 + 1 | |||
| }; | |||
| gui.setInfoPosition(mouse.position_absolute); | |||
| mouse.raycaster.setFromCamera(mouse.position_relative, gui.camera); | |||
| mouse.ray = mouse.raycaster.ray; | |||
| if (mouse.pressed){ | |||
| if (mouse.pressed) { | |||
| mouse.onDrag(); | |||
| } else { | |||
| mouse.onFreeMove(); | |||
| } | |||
| }; | |||