abp/client/main.js

var controls, renderer, raycaster, scene, selection, camera;

var mouseprevpos = {};

// Run on startup
window.onload = init;


// Clear the whole scene
function makeScene() {
    var myScene = new THREE.Scene();
    var grid = new THREE.GridHelper(20, 2);
    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 bind_events() {
    window.addEventListener("resize", onWindowResize, false);
    renderer.domElement.addEventListener("mousedown", function (event) {
        var mouse = new THREE.Vector2(); // create once and reuse
        mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
        mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
        mouseprevpos.x = mouse.x;
        mouseprevpos.y = mouse.y;
    });

    renderer.domElement.addEventListener("mouseup", function (event) {
        var mouse = new THREE.Vector2(); // create once and reuse
        mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
        mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
        if (mouse.x != mouseprevpos.x || mouse.y != mouseprevpos.y ){return;}

        var raycaster = new THREE.Raycaster(); // create once and reuse
        raycaster.setFromCamera( mouse, camera );
        var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
        var intersection = raycaster.ray.intersectPlane(plane);
        console.log(intersection);

        intersection.x = Math.round(intersection.x);
        intersection.y = Math.round(intersection.y);
        add_node(Object.keys(vops).length, {"position":intersection});
        updateScene();
    });
    controls.addEventListener("change", render);

}


// Called on startup
function init() {
    // Renderer
    renderer = new THREE.WebGLRenderer({"antialias":true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 1);
    document.querySelector("body").appendChild(renderer.domElement);

    // Time to load the materials
    loadMaterials();

    // Camera, controls, raycaster
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 100);
    controls = new THREE.OrbitControls(camera);

    // Center the camera
    // TODO: frustrum
    controls.center.set(0, 0, 0);
    controls.rotateSpeed = 0.2;
    camera.position.set(0, 0, 40);

    // Run
    bind_events();
    scene = makeScene();
    connect_to_server();
    render();
}