API tools faq
paste
Advertisement
Guest User

Index.html

a guest
Oct 16th, 2019
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>SimulationView</title>
  7. </head>
  8.  
  9. <body style="margin:0px;padding:0px;overflow:hidden;">
  10.  
  11.     <!--
  12.         Deze pagina is de standaardpagina van de client. Hierin wordt de 3D wereld opgezet en wordt geluisterd
  13.         naar updates vanaf de server over de websocket communicatie.
  14.     -->
  15.     <script>
  16.         function parseCommand(input = "") {
  17.             return JSON.parse(input);
  18.         }
  19.  
  20.         var socket;
  21.  
  22.         window.onload = function () {
  23.             var camera, scene, renderer;
  24.             var cameraControls;
  25.  
  26.             var worldObjects = {};
  27.  
  28.             function init() {
  29.                 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  30.                 cameraControls = new THREE.OrbitControls(camera);
  31.                 camera.position.z = 15;
  32.                 camera.position.y = 5;
  33.                 camera.position.x = 15;
  34.                 cameraControls.update();
  35.                 scene = new THREE.Scene();
  36.  
  37.                 renderer = new THREE.WebGLRenderer({ antialias: true });
  38.                 renderer.setPixelRatio(window.devicePixelRatio);
  39.                 renderer.setSize(window.innerWidth, window.innerHeight + 5);
  40.                 document.body.appendChild(renderer.domElement);
  41.  
  42.                 window.addEventListener('resize', onWindowResize, false);
  43.                
  44.                 var parent = new THREE.Group();
  45.                 scene.add(parent);
  46.                 parent.position.set(0,5,0);
  47.  
  48.                 var geometry = new THREE.PlaneGeometry(30, 30, 32);
  49.                 var material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
  50.                 var plane = new THREE.Mesh(geometry, material);
  51.  
  52.                 parent.add(plane);
  53.                 plane.rotation.x = Math.PI / 2.0;
  54.                 plane.position.set(1,0,0);
  55.                
  56.  
  57.                 // var geometry1 = new THREE.BoxGeometry(0, 1.99, 3);
  58.                 // var material1 = new THREE.MeshBasicMaterial({ color: 0x753a88, side: THREE.DoubleSide });
  59.                 // var plane1 = new THREE.Mesh(geometry1, material1);
  60.                 // parent.add(plane1);
  61.                 // plane1.position.set(0,1,0);
  62.  
  63.                 var geometry2 = new THREE.BoxGeometry(5, 1.99, 3);
  64.                 var material2 = new THREE.MeshBasicMaterial({ color: 0x753a88, side: THREE.DoubleSide });
  65.                 var plane2 = new THREE.Mesh(geometry2, material2);
  66.                 parent.add(plane2);
  67.                 plane2.position.set(1,1,0);
  68.  
  69.  
  70.                 var light = new THREE.AmbientLight(0x404040);
  71.                 light.intensity = 4;
  72.                 scene.add(light);
  73.             }
  74.  
  75.             function onWindowResize() {
  76.                 camera.aspect = window.innerWidth / window.innerHeight;
  77.                 camera.updateProjectionMatrix();
  78.                 renderer.setSize(window.innerWidth, window.innerHeight);
  79.             }
  80.  
  81.             function animate() {
  82.                 requestAnimationFrame(animate);
  83.                 cameraControls.update();
  84.                 renderer.render(scene, camera);
  85.             }
  86.  
  87.             /*
  88.              * Hier wordt de socketcommunicatie geregeld. Er wordt een nieuwe websocket aangemaakt voor het webadres dat we in
  89.              * de server geconfigureerd hebben als connectiepunt (/connectToSimulation). Op de socket wordt een .onmessage
  90.              * functie geregistreerd waarmee binnenkomende berichten worden afgehandeld.
  91.              */
  92.             socket = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/connectToSimulation");
  93.             socket.onmessage = function (event) {
  94.                 //Hier wordt het commando dat vanuit de server wordt gegeven uit elkaar gehaald
  95.                 var command = parseCommand(event.data);
  96.  
  97.                 //Wanneer het commando is "object_update", dan wordt deze code uitgevoerd. Bekijk ook de servercode om dit goed te begrijpen.
  98.                 if (command.command == "object_update") {
  99.                     //Wanneer het object dat moet worden geupdate nog niet bestaat (komt niet voor in de lijst met worldObjects op de client),
  100.                     //dan wordt het 3D model eerst aangemaakt in de 3D wereld.
  101.                     if (Object.keys(worldObjects).indexOf(command.parameters.uuid) < 0) {
  102.                         //Wanneer het object een robot is, wordt de code hieronder uitgevoerd.
  103.                         if (command.parameters.type == "robot") {
  104.                             var geometry = new THREE.BoxGeometry(0.9, 0.3, 0.9);
  105.                             var cubeMaterials = [
  106.                                 new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load("textures/robot_side.png"), side: THREE.DoubleSide }), //LEFT
  107.                                 new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load("textures/robot_side.png"), side: THREE.DoubleSide }), //RIGHT
  108.                                 new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load("textures/robot_top.png"), side: THREE.DoubleSide }), //TOP
  109.                                 new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load("textures/robot_bottom.png"), side: THREE.DoubleSide }), //BOTTOM
  110.                                 new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load("textures/robot_front.png"), side: THREE.DoubleSide }), //FRONT
  111.                                 new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load("textures/robot_front.png"), side: THREE.DoubleSide }), //BACK
  112.                             ];
  113.                             var material = new THREE.MeshFaceMaterial(cubeMaterials);
  114.                             var robot = new THREE.Mesh(geometry, material);
  115.                             robot.position.y = 0.15;
  116.  
  117.                             var group = new THREE.Group();
  118.                             group.add(robot);
  119.  
  120.                             scene.add(group);
  121.                             worldObjects[command.parameters.uuid] = group;
  122.                         }
  123.                     }
  124.  
  125.                     /*
  126.                      * Deze code wordt elke update uitgevoerd. Het update alle positiegegevens van het 3D object.
  127.                      */
  128.                     var object = worldObjects[command.parameters.uuid];
  129.  
  130.                     object.position.x = command.parameters.x;
  131.                     object.position.y = command.parameters.y;
  132.                     object.position.z = command.parameters.z;
  133.  
  134.                     object.rotation.x = command.parameters.rotationX;
  135.                     object.rotation.y = command.parameters.rotationY;
  136.                     object.rotation.z = command.parameters.rotationZ;
  137.                 }
  138.             }
  139.  
  140.             init();
  141.             animate();
  142.         }
  143.     </script>
  144.  
  145.     <script src="three.min.js"></script>
  146.     <script src="OrbitControls.js"></script>
  147. </body>
  148.  
  149. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!