Staafjes

<!DOCTYPE html>
<html>

<head>
    <title>Stackable</title>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <!-- Babylon.js -->
    <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
    <script src="http://www.babylonjs.com/cannon.js"></script>
    <script src="http://www.babylonjs.com/oimo.js"></script>
    <script src="http://www.babylonjs.com/babylon.js"></script>
    <script src="quat.js"></script>


</head>

<body>

    <canvas id="renderCanvas"></canvas>
    <script>
        //-------------------Global variables----------------
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var cylinder;
        var staafjes = new Array();


        //----------------------Babylon------------------------

        function createScene() {

            var scene = new BABYLON.Scene(engine);
            //scene.clearColor = new BABYLON.Color3(0, 1, 0);

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 50, 50), scene);
            var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);

            light.intensity = 1;
            camera.attachControl(canvas, false);
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });


            //------------------------- show axis------------------------
            var showAxis = function (size) {
                var makeTextPlane = function (text, color, size) {
                    var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
                    dynamicTexture.hasAlpha = true;
                    dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
                    var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
                    plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
                    plane.material.backFaceCulling = false;
                    plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                    plane.material.diffuseTexture = dynamicTexture;
                    return plane;
                };

                var axisX = BABYLON.Mesh.CreateLines("axisX", [
      new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
      new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
      ], scene);
                axisX.color = new BABYLON.Color3(1, 0, 0);
                var xChar = makeTextPlane("X", "red", size / 2);
                xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
                var axisY = BABYLON.Mesh.CreateLines("axisY", [
        new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
        new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
        ], scene);
                axisY.color = new BABYLON.Color3(0, 1, 0);
                var yChar = makeTextPlane("Y", "green", size / 2);
                yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
                var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
        new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
        new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
        ], scene);
                axisZ.color = new BABYLON.Color3(0, 0, 1);
                var zChar = makeTextPlane("Z", "blue", size / 2);
                zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
            };

            size = 2;
            //------------------------- luister naar websocket ------------------------

            var socket = new WebSocket("ws://localhost:8081");
            socket.onmessage = showData;

            var res = new Array();
            var created = new Array();

            function showData(result) {
                res = result.data.split(",");
                if (res.length == 7) { // als de datalengte 7 is en geen packets gemist zijn

                    if (!created[res[0]]) { // als het staafje nog niet bestaat, maak een staafje van 30mm

                        created[res[0]] = true;
                         //------------------------- teken staafje ------------------------
                        console.log("create");
                        staafjes[res[0]] = BABYLON.MeshBuilder.CreateCylinder("cylinder", {
                            height: 30,
                            diameter: 3,
                            updatable: true
                        }, scene);

                        staafjes[res[0]].position = new BABYLON.Vector3(0, -15, 0);
                        staafjes[res[0]].setPivotMatrix(BABYLON.Matrix.Translation(0, -15, 0));

                         //------------------------- teken 2 bolletjes op uiteindes ------------------------
                        var sphereA = BABYLON.Mesh.CreateSphere("sphereA", 20, 6, scene);
                        sphereA.parent = staafjes[res[0]];
                        sphereA.position = new BABYLON.Vector3(0, 15, 0);

                        var sphereB = BABYLON.Mesh.CreateSphere("sphereB", 20, 6, scene);
                        sphereB.parent = staafjes[res[0]];

                        sphereB.position = new BABYLON.Vector3(0, -15, 0);

                        if (typeof staafjes[res[1]] === 'undefined') {
                            console.log("bestaat nog niet"); //staafje waaraan we willen koppelen is nog niet gemaakt.
                        } else { //staafje aan parent vast maken
                            // staafjes[res[0]].parent = staafjes[res[1]];

                        }

                    } else { //rotate staafje met quat

                        staafjes[res[0]].rotationQuaternion = new BABYLON.Quaternion(res[4], res[5], res[6], res[3]);

                    }

                }
            }

            showAxis(10);

            return scene;
        };


        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
    < /body>

        < /html>