Factory Map

threejs app for factory monitoring

Functionality

• Factory map in 3D
• Cursor control: orbit, zoom, pan
• Orbit ball [TODO]
• Machine name label
• Real-time machine status light [TODO]
• Interaction: select on hover
• Real-time data and visualization [TODO]
• Fast development

---

Note on code

Set gamma to true for the correct color

renderer.gammaInput = true;
renderer.gammaOutput = true;

Camera and Control

function init() {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 20;
    camera.position.y = 10;
    scene.add(camera);
    
    controls = new THREE.OrbitControls(camera);
    // Min and max distance
    controls.minDistance = 1;
    controls.maxDistance = 20;
    controls.enablePan = false;
    // Limiting angle:
    controls.maxPolarAngle = Math.PI / 2 + 0.1;
}

function onWindowResize() {
    // Adjust for resizing windows
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

In render in animate:

function render() {
    controls.update();
    renderer.render( scene, camera );
}

Hover to select:

var mouse = new THREE.Vector2(), INTERSECTED;

function init() {
    // INTERACTIVE
    raycaster = new THREE.Raycaster();
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}

function onDocumentMouseMove( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

function render() {
    // INTERACTIVE: INTERSECTIONS
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );
    if (intersects.length > 0) {
        if ( INTERSECTED != intersects[ 0 ].object ) {
            if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
            INTERSECTED = intersects[ 0 ].object;
            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
            INTERSECTED.material.emissive.setHex( 0xff0000 );
        }
    } else {
        if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
        INTERSECTED = null;
    }
}

Adding label

Import CSS2DRenderer

<script type="text/javascript" src="../static/CSS2DRenderer.js"></script>

function init() {
    // Init: label
    var texts = ["machine_01"]
    var element = document.createElement( 'div' );
    element.className = 'label';
    element.textContent = texts[0]

    var label = new THREE.CSS2DObject( element );
    label.position.set(1,-0.3,0.8);
    scene.add( label );
    
    // Init: label Renderer
    labelRenderer = new THREE.CSS2DRenderer();
    labelRenderer.setSize( window.innerWidth, window.innerHeight );
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = '0';
    labelRenderer.domElement.style.pointerEvents = 'none'
    container.appendChild( labelRenderer.domElement );
}

function onWindowResize() {
    labelRenderer.setSize( window.innerWidth, window.innerHeight );
}

function render() {
    labelRenderer.render(scene, camera);
}

Adding stats

<script type="text/javascript" src="../static/stats.min.js"></script>

function init() {
    stats = new Stats();
    container.appendChild(stats.dom);
}

function animate() {
    stats.update();
}