瀏覽代碼

Getting somewhere with requirejs

master
Pete Shadbolt 8 年之前
父節點
當前提交
82fd2d911f
共有 4 個檔案被更改,包括 84 行新增51 行删除
  1. +44
    -0
      static/scripts/gui.js
  2. +6
    -51
      static/scripts/main.js
  3. +1
    -0
      static/scripts/message.js
  4. +33
    -0
      static/scripts/websocket.js

+ 44
- 0
static/scripts/gui.js 查看文件

@@ -0,0 +1,44 @@
define(["three", "orbitcontrols", "message"], function() {
return {
construct: function() {
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setClearColor(0xffffff, 1);
document.querySelector("body").appendChild(this.renderer.domElement);
window.addEventListener("resize", this.onWindowResize, false);

this.makeScene();

this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000);
this.controls = new THREE.OrbitControls(this.camera);
this.controls.center.set(0, 0, 0);
this.controls.rotateSpeed = 0.2;
this.camera.position.set(0, 0, 20);
this.controls.addEventListener("change", this.render);
},

// Someone resized the window
onWindowResize: function(evt) {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.render();
},

// Render the current frame to the screen
render: function() {
this.renderer.render(this.scene, this.camera);
},

// Make the extra bits of gui
makeScene: function() {
this.scene = new THREE.Scene();
var grid = new THREE.GridHelper(10, 1);
grid.rotation.x = Math.PI / 2;
grid.setColors(0xdddddd, 0xeeeeee);
this.scene.add(grid);
}


};
});

+ 6
- 51
static/scripts/main.js 查看文件

@@ -1,55 +1,10 @@
// Import modules
requirejs(["anders_briegel", "three", "orbitcontrols", "graph"], init);
var controls, renderer, raycaster, scene, selection, camera;

// Clear the whole scene
function makeScene() {
var myScene = new THREE.Scene();
var grid = new THREE.GridHelper(10, 1);
grid.rotation.x = Math.PI / 2;
grid.setColors(0xdddddd, 0xeeeeee);
myScene.add(grid);
return myScene;
}


// Render the current frame to the screen
function render() {
requestAnimationFrame(function() {
renderer.render(scene, camera);
});
}

// Someone resized the window
function onWindowResize(evt) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}

function constructDisplay(){
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.querySelector("body").appendChild(renderer.domElement);
window.addEventListener("resize", onWindowResize, false);

// Camera, controls, raycaster
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000);
controls = new THREE.OrbitControls(camera);
controls.center.set(0, 0, 0);
controls.rotateSpeed = 0.2;
camera.position.set(0, 0, 20);
controls.addEventListener("change", render);
}

requirejs(["anders_briegel", "gui"], init);
var ab;

// Called on startup
function init() {
constructDisplay();
scene = makeScene();
connectToServer();
render();
function init(anders_briegel, gui) {
ab = anders_briegel;
gui.construct();
gui.render();
}

+ 1
- 0
static/scripts/message.js 查看文件

@@ -0,0 +1 @@
define({});

+ 33
- 0
static/scripts/websocket.js 查看文件

@@ -0,0 +1,33 @@
define(["message"], function(message){
return {
bindEvents: function(update){
var ws = new WebSocket("ws://localhost:5000");
ws.onopen = function(evt)
{
message.innerHTML = "Connected to server.";
message.className = "visible";
};

ws.onerror = function(err)
{
message.innerHTML = "Could not connect to server.";
message.className = "visible";
};
ws.onmessage = function (evt)
{
console.log("Received update");
update(JSON.parse(evt.data));
};
ws.onclose = function(evt)
{
message.innerHTML = "Connection to server lost. <a href='#' onclick='javascript:connect_to_server()'>Reconnect</a>.";
message.className = "visible";
};
}
};
}
);



Loading…
取消
儲存