Help us understand the problem. What is going on with this article?

[node-psvr]psvrの加速度をsocket.ioでhtmlに表示してみた #PSVR

More than 3 years have passed since last update.

How to use node-psvr?

まずはこちらのチュートリアルでPSVRの加速度情報を取得しましょう。
[node-psvr]Node.jsでPSVRの加速度をとってみた #psvr

Screen Shot 2016-10-21 at 11.48.12.png

こんな感じで加速度取れましたか?
次はこの加速度で色々と遊ぶために、socket.ioを使ってブラウザ上に加速度を表示させてみたいと思います。

Demo

Get psvr acceleration using Node.js!https://t.co/oOyaL4RCBZ#PSVR pic.twitter.com/lDj0zGcnC8

— webpsvr (@webpsvr) October 21, 2016

Youtube link is here

Code

$ npm install express --save
$ npm install socket.io --save
$ mkdir client
index.js
"use strict";

//http server
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const server = require("./server");
app.use(express.static(__dirname + '/client'));

server.start(app, http);

var acc = {
  yaw : null, 
  pitch : null
};

//Connect to PSVR
var PSVR = require("psvr");
var device = new PSVR();

io.sockets.on('connection', function(socket) {
  console.log("hello socket");
    device.on("data", function(data) {
       console.log(data);
       acc.yaw = data.yaw;
       acc.pitch = data.pitch;
       socket.emit('myFitstRecieving', acc);
    });
});
server.js
var PORT = 7788;

function start(app, http) {

    http.listen(PORT, function(){
      console.log('Listen on ',PORT);
    });
}

exports.start = start;
client/01.debugger/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>psvrDebugger</title>
    <meta name="format-detection" content="telephone=no">
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="receiveAcc.js"></script>
</head>
<body>
<h1>psvr debugger</h1>
 <div id="receive-acc"></div>

</body>
</html>
receiveAcc.js
var socket = io.connect('localhost:7788');
var yaw = null;
var acc = {
    yaw : null,
    pit : null
};

socket.on('myFitstRecieving', function (data) {
    //console.log(data);
    acc.yaw = data.yaw;
    acc.pit = data.pitch;
    document.getElementById("receive-acc").innerHTML = "yaw : " + acc.yaw + ", pitch : " + acc.pit;
    //console.log(acc.yaw);
});

GitHub is here

Next Step

using three.js and show simple cube sample

azamiya
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away