interface and application programming
Three.js has great documentation, and especially great examples to use as starter projects. I knew I wanted to have geometry that you could hover over to interact with, so I started from this example: webgl interactive cubes.
The code included a camera that was used to view the scene:
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
A scene to include objects in:
scene = new THREE.Scene();
var light = new Three.DirectionalLight( 0xffffff, 1); //construct a white colored light light.position.set( 1, 1, 1 ).normalize(); // set it's position scene.add( light ); // add it to the scene
The main ways that my script deviated from the example was the geometry. I added three cubes to the scene, which would highlight when the mouse hovered over it. The goal was to eventually send a serial message when each cube was highlighted.
Here’s the working app:
I hadn’t previously gotten serial communication to work effectively, so I wanted to work through that independently before moving on to connecting the web socket.
To do this, I used the board I made for my final project with a Mega328p, since it had a blinking light I could control. Eventually, I’ll try to control the solenoids in my final project instead.
I followed this instructables tutorial to get things working:
I uploaded the code included on that site using the arduino IDE. I then used miniterm to communicate with it. To do this, I opened terminal, and typed in:
It then presented me with a list of serial ports, and I selected the one for my usbserial. I noted the port name so that next time I could access this directly and specify a baud rate by typing:
sudo miniterm.py /dev/cu.usbserial-AC00IAP3 9600