├── .gitignore
├── README.md
├── index.js
├── package.json
└── public
    ├── index.html
    └── js
        └── three.js


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # Snowpack dependency directory (https://snowpack.dev/)
 45 | web_modules/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | .parcel-cache
 78 | 
 79 | # Next.js build output
 80 | .next
 81 | out
 82 | 
 83 | # Nuxt.js build / generate output
 84 | .nuxt
 85 | dist
 86 | 
 87 | # Gatsby files
 88 | .cache/
 89 | # Comment in the public line in if your project uses Gatsby and not Next.js
 90 | # https://nextjs.org/blog/next-9-1#public-directory-support
 91 | # public
 92 | 
 93 | # vuepress build output
 94 | .vuepress/dist
 95 | 
 96 | # Serverless directories
 97 | .serverless/
 98 | 
 99 | # FuseBox cache
100 | .fusebox/
101 | 
102 | # DynamoDB Local files
103 | .dynamodb/
104 | 
105 | # TernJS port file
106 | .tern-port
107 | 
108 | # Stores VSCode versions used for testing VSCode extensions
109 | .vscode-test
110 | 
111 | # yarn v2
112 | .yarn/cache
113 | .yarn/unplugged
114 | .yarn/build-state.yml
115 | .yarn/install-state.gz
116 | .pnp.*


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Gets real-time orientation data from this library https://github.com/ZaneL/Teensy-ICM-20948 over a serial port and rotates a 3D object accordingly.
 2 | 
 3 | Video demo:
 4 | https://streamable.com/ivmgfz
 5 | 
 6 | ![alt text](https://i.ibb.co/VVMfQk9/image.png)
 7 | ![alt text](https://i.ibb.co/SmM00g1/image.png)
 8 | 
 9 | After cloning this library, open **index.js** and change the serial port to the correct port. You also might need to edit **index.html** to swap the quaternion values around if things aren't rotating in the correct direction.
10 | 
11 | Then install the required packages:
12 | 
13 |       npm install
14 |       
15 | Run the app:
16 | 
17 |       node index.js
18 |       
19 | Open your web browser:
20 | 
21 |       http://localhost:3000/
22 |       
23 |     
24 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /**************************************************************************
 2 |  Serves static content in Public folder to browser
 3 | **************************************************************************/
 4 | 
 5 | var express = require('express')
 6 | var app = express();
 7 | const server_port = 3000
 8 | 
 9 | app.use(express.static(__dirname + '/public'));
10 | app.listen(server_port, () => console.log(`App listening on port ${server_port}!`))
11 | 
12 | /**************************************************************************
13 |  Reads quaternion data from serial port and sends it over the websocket
14 | **************************************************************************/
15 | 
16 | const SerialPort = require('serialport')
17 | const port = new SerialPort('COM12', { baudRate: 115200 })
18 | 
19 | const Readline = require('@serialport/parser-readline')
20 | const parser = port.pipe(new Readline({ delimiter: '\n' }))
21 | 
22 | parser.on('data', function(data) {
23 |   if (ws != null) {
24 |      ws.send(data);
25 |   }
26 | })
27 | 
28 | /**************************************************************************
29 |  Websocket server that communicates with browser
30 | **************************************************************************/
31 | 
32 | const WebSocket = require('ws');
33 |  
34 | const wss = new WebSocket.Server({ port: 8080 });
35 | var ws = null;
36 |  
37 | wss.on('connection', function connection(_ws) {
38 |   ws = _ws;
39 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "quaternion_3d",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "express": "^4.17.1",
13 |     "serialport": "^9.0.0",
14 |     "ws": "^7.3.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <title>Quaternion 3D Test</title>
 5 |     <style>
 6 |         body {
 7 |             margin: 0;
 8 |         }
 9 |         
10 |         canvas {
11 |             display: block;
12 |         }
13 |     </style>
14 | </head>
15 | 
16 | <body>
17 |     <script src="js/three.js"></script>
18 |     <script>
19 |         var camera, scene, renderer;
20 |         var geometry, material, mesh;
21 |         
22 |         init();
23 |         animate();
24 | 
25 |         function init() 
26 |         {
27 |             camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
28 |             camera.position.z = 1;
29 | 
30 |             scene = new THREE.Scene();
31 | 
32 |             geometry = new THREE.BoxGeometry(0.4, 0.05, 0.8);
33 |             material = new THREE.MeshNormalMaterial();
34 | 
35 |             mesh = new THREE.Mesh(geometry, material);
36 |             scene.add(mesh);
37 | 
38 |             renderer = new THREE.WebGLRenderer({
39 |                 antialias: true
40 |             });
41 |             renderer.setSize(window.innerWidth, window.innerHeight);
42 |             document.body.appendChild(renderer.domElement);
43 |         }
44 | 
45 |         function animate() 
46 |         {
47 |             requestAnimationFrame(animate);
48 |             renderer.render(scene, camera);
49 |         }
50 | 
51 |         var exampleSocket = new WebSocket("ws://127.0.0.1:8080/");
52 |         
53 |         exampleSocket.onmessage = function(event) {
54 |             var jsonObj = JSON.parse(event.data);
55 |             
56 |             // You'll need to edit the order of the quaternions below so that the 3D object matches up with your sensor.
57 |             var targetQuaternion = new THREE.Quaternion(jsonObj.quat_z, jsonObj.quat_y, jsonObj.quat_w, jsonObj.quat_x);       
58 |             mesh.quaternion.slerp(targetQuaternion, 1);
59 |         }
60 |     </script>
61 | </body>
62 | 
63 | </html>


--------------------------------------------------------------------------------