Bladeren bron

Proof of principle

master
Pete Shadbolt 8 jaren geleden
bovenliggende
commit
c2f5ebba1b
6 gewijzigde bestanden met toevoegingen van 56 en 53 verwijderingen
  1. +38
    -32
      static/scripts/editor.js
  2. +0
    -4
      static/scripts/graph.js
  3. +8
    -12
      static/scripts/gui.js
  4. +8
    -3
      static/scripts/main.js
  5. +1
    -1
      static/scripts/mouse.js
  6. +1
    -1
      static/scripts/websocket.js

+ 38
- 32
static/scripts/editor.js Bestand weergeven

@@ -1,6 +1,5 @@
var editor = {};
editor.nearest = undefined;
editor.gimbalVertices = [];

editor.onFreeMove = function() {
var n = editor.nearestNode(mouse.ray);
@@ -17,55 +16,62 @@ editor.onFreeMove = function() {

editor.onClick = function() {
var n = editor.nearestNode(mouse.ray);
//if (n.type=="node") {
if (n){
var p = abj.meta[n].position;
editor.gimbal.position.set(p.x, p.y, p.z);
editor.grid.position.set(p.x, p.y, p.z);
gui.controls.target.set(p.x, p.y, p.z);
gui.hideNodeMessage();
editor.nearest = undefined;
gui.render();
//}
gui.serverMessage("Selected node " + n + "");
} else {
//TODO: ghastly
var intersection = mouse.ray.intersectPlane(editor.plane);
intersection.x = Math.round(intersection.x, 0);
intersection.y = Math.round(intersection.y, 0);
intersection.z = Math.round(intersection.z, 0);
var newNode = abj.order();
abj.add_node(newNode, {position:intersection});
editor.grid.position.set(intersection.x, intersection.y, intersection.z);
gui.controls.target.set(intersection.x, intersection.y, intersection.z);
graph.update();
gui.serverMessage("Created node " + newNode + " at ");
}
};

editor.prepare = function() {
mouse.onFreeMove = editor.onFreeMove;
mouse.onClick = editor.onClick;
editor.makeGimbal();
document.addEventListener("keydown", editor.onKey, false);
editor.makeGrid();
};

// Gets a reference to the node nearest to the mouse cursor
editor.nearestNode = function(ray) {
for (var i=0; i < editor.gimbalVertices.length; ++i) {
if (ray.distanceSqToPoint(editor.gimbalVertices[i]) < 0.03) {
//return {type: "gimbal", node: i};
}
editor.onKey = function(evt){
if (evt.keyCode==32){
editor.grid.rotation.x += Math.PI/2;
var m = new THREE.Matrix4();
m.makeRotationX(Math.PI/2);
editor.plane.applyMatrix4(m);
gui.render();
gui.serverMessage("Rotated into the XY plane or whatever");
}
};

editor.makeGrid = function() {
editor.grid = new THREE.GridHelper(10, 1);
editor.grid.rotation.x = Math.PI / 2;
editor.grid.setColors(0xbbbbbb, 0xeeeeee);
editor.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
gui.scene.add(editor.grid);
}

// Gets a reference to the node nearest to the mouse cursor
// TODO: get rid of meta{}
editor.nearestNode = function(ray) {
for (var j in abj.meta) {
if (ray.distanceSqToPoint(abj.meta[j].position) < 0.03) {
//return {type: "node", node: i};
return j;
}
}
return undefined;
};

editor.makeGimbal = function(center) {
editor.gimbal = new THREE.Object3D();

var pointGeometry = new THREE.Geometry();
pointGeometry.vertices = [
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(0, -1, 0),
new THREE.Vector3(0, 0, -1)
];
editor.gimbalVertices = pointGeometry.vertices;
var tips = new THREE.Points(pointGeometry, materials.tip);

editor.gimbal.add(tips);
gui.scene.add(editor.gimbal);
};


+ 0
- 4
static/scripts/graph.js Bestand weergeven

@@ -43,7 +43,3 @@ graph.update = function(newState) {
gui.render();
};

graph.add_node = function(x, y, z) {
meta = {position: new THREE.Vector3(x, y, z)};
abj.add_node(abj.order(), meta);
};

+ 8
- 12
static/scripts/gui.js Bestand weergeven

@@ -22,7 +22,6 @@ gui.prepare = function() {

// Someone resized the window
gui.onWindowResize = function(evt) {
console.log(gui);
gui.camera.aspect = window.innerWidth / window.innerHeight;
gui.camera.updateProjectionMatrix();
gui.renderer.setSize(window.innerWidth, window.innerHeight);
@@ -39,20 +38,17 @@ gui.render = function() {
// Make the extra bits of gui
gui.makeScene = function() {
gui.scene = new THREE.Scene();
var grid = new THREE.GridHelper(10, 1);
grid.rotation.x = Math.PI / 2;
grid.setColors(0xdddddd, 0xeeeeee);
gui.scene.add(grid);
};

// Put an HTML message to the screen
gui.serverMessage = function(msgtext) {
if (msgtext) {
server_info.innerHTML = msgtext;
server_info.className = "visible";
} else {
server_info.innerHTML = "";
server_info.className = "hidden";
// TODO: write a generic messaging class?
gui.serverMessage = function(msgtext, persist) {
if (persist === undefined) {persist = false;}
server_info.innerHTML = msgtext;
server_info.className = "visible";
clearInterval(gui.ki);
if (!persist){
gui.ki = setInterval(function(){server_info.className="hidden";}, 3000);
}
};



+ 8
- 3
static/scripts/main.js Bestand weergeven

@@ -1,6 +1,11 @@
function bootstrap(){
graph.add_node(0, 0, 0);
graph.add_node(3, 0, 0);
function bootstrap() {

abj.add_node(0, {
position: new THREE.Vector3(0, 0, 0)
});
abj.add_node(1, {
position: new THREE.Vector3(1, 0, 0)
});
graph.update();
}



+ 1
- 1
static/scripts/mouse.js Bestand weergeven

@@ -8,7 +8,7 @@ mouse.onFreeMove = function() {
console.log("Free move");
};
mouse.onDrag = function() {
console.log("Drag");
//console.log("Drag");
};
mouse.onClick = function() {
console.log("Click");


+ 1
- 1
static/scripts/websocket.js Bestand weergeven

@@ -20,6 +20,6 @@ websocket.connect = function(update) {
};

ws.onclose = function(evt) {
gui.serverMessage("Connection to server lost. <a href='#' onclick='javascript:websocket.connect()'>Reconnect</a>.");
gui.serverMessage("Connection to server lost. <a href='#' onclick='javascript:websocket.connect()'>Reconnect</a>.", true);
};
};

Laden…
Annuleren
Opslaan