Twitter ist ein wunderbares und Information Rich Beast. Ich wollte einige der Visualisierungskr?fte, drei.Js und seine VR -Funktionen mit Socket.io und Knoten kombinieren, um eine hübsche Welt von Partikeln zu erzeugen, die über einen Twitter -Stream erzeugt werden.

Ein zurück. Diese Demo verwendet die gleichen Grundlagen.

Die Demo, die wir erstellen werden, wird einen Live -Twitter -Stream für ein Keyword ansehen. Wenn man w?hrend der Beobachtung des Streams getwittert wird, wird ein ?Turm“ gl?nzender Partikel angezeigt, die darstellen, wie lange der Tweet war. Insbesondere diese Demo wird nach Erw?hnungen des Wortes ?Pizza“ suchen. Warum Pizza fragst du? Ich suchte nach einem Begriff, der nicht so h?ufig als ?Bieber“, sondern h?ufiger als ?Boxcar Racing Hy?nen“ erw?hnt wurde. Kurz gesagt, die besten Begriffe sind diejenigen, die relativ h?ufig genug sind, dass sie auftreten, w?hrend Sie zuschauen, aber nicht so h?ufig, dass sie mit vielen Hundert pro Sekunde durchkommen. Pizza ist einer von ihnen.

Key Takeaways

Verwenden Sie node.js und socket.io, um einen Echtzeitserver zu erstellen, der Twitter-Stream-Daten verarbeiten und ausgeben kann, wodurch die Interaktivit?t von VR-Visualisierungen verbessert wird.
Integrieren Sie drei.Js, um eine 3D -VR -Umgebung zu erstellen, in der Tweets als einzigartige Partikeltürme dargestellt werden, die je nach Tweetl?nge variieren.
Optimieren Sie die Benutzererfahrung in VR, indem Sie eine maximale Partikelzahl einstellen und Partikeltürme innerhalb eines definierten Bereichs anstellen, um Leistungsverz?gerungen zu verhindern.
Passen Sie die visuellen Aspekte von Tweet -Darstellungen an, indem Sie Benutzerprofilfarben für Partikel verwenden und Texturen und Mischoptionen verwenden.
• Gew?hrleistung einer breiten Zug?nglichkeit und Echtzeitfunktionalit?t, indem der Knotenserver auf Plattformen wie Heroku bereitgestellt und die VR-Erfahrung auf verschiedenen Ger?ten mithilfe von Tunnelingdiensten wie NGROK getestet wird.
Demo -Code

Wenn Sie m?chten, dass Sie direkt in den Code einsteigen und ihn ausprobieren m?chten, finden Sie es hier auf Github.

M?chten Sie es in Aktion versuchen? Ich habe hier eine laufende Version gehostet: VR Twitter World.

unser Servercode

wir werden uns zun?chst unseren Knoten -Servercode ansehen. Es wird unsere flache HTML angezeigt und auch als Socket.IO -Server fungiert, auf dem ein Datenstrom von Twitter ausgerichtet wird.

Der vollst?ndige Server ist relativ kurz und sieht so aus:

Unsere ersten Zeilen haben einen Server mit dem Knoten Express -Framework eingerichtet. Es ist eine ziemlich einfache Einrichtung, die alle unsere Abh?ngigkeiten anzieht und die App -Variable vorbereitet, damit wir auf unsere Serverfunktionen zugreifen k?nnen. Port wird eingerichtet, auf welchem ??Port unser Server ausgeführt werden soll (Prozess.Env.Port ist eine Servervariable Einige Hosting -Setups wie Heroku haben definiert).

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,
</span>    io <span>= require('socket.io')(server),
</span>    config <span>= require('./config.json'),
</span>    <span>Twitter = require('node-tweet-stream'),
</span>    t <span>= new Twitter(config);
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});
</span>
app<span>.use(function(err<span>, req, res, next</span>) {
</span>  <span>console.error(err.stack);
</span>  res<span>.status(500).send('Something broke!');
</span><span>});
</span> 
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
t<span>.track('pizza');
</span>t<span>.on('tweet', function(tweet){
</span>  <span>console.log('Roger that. Tweets incoming!');
</span>  <span>console.log(tweet);
</span>
  io<span>.emit('tweet', tweet);
</span><span>});
</span>
t<span>.on('error', function (err) {
</span>  <span>console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err);
</span><span>});</span>

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,
</span>    io <span>= require('socket.io')(server),
</span>    config <span>= require('./config.json'),
</span>    <span>Twitter = require('node-tweet-stream'),
</span>    t <span>= new Twitter(config);
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});
</span>
app<span>.use(function(err<span>, req, res, next</span>) {
</span>  <span>console.error(err.stack);
</span>  res<span>.status(500).send('Something broke!');
</span><span>});
</span> 
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
t<span>.track('pizza');
</span>t<span>.on('tweet', function(tweet){
</span>  <span>console.log('Roger that. Tweets incoming!');
</span>  <span>console.log(tweet);
</span>
  io<span>.emit('tweet', tweet);
</span><span>});
</span>
t<span>.on('error', function (err) {
</span>  <span>console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err);
</span><span>});</span>

Dann richten wir die IO -Variable ein, w?hrend wir gleichzeitig unsere Funktionalit?t des Socket.IO -Servers starten und sie an den oben eingerichteten Expressserver anh?ngen:

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,</span>

Twitter -Zugriff einrichten

Die Konfigurationsvariable ist eine gute M?glichkeit, die Twitter -Authentifizierungsschlüssel der Anwendung in ihrer eigenen Datei zu halten. Um den Twitter-Stream anzeigen zu k?nnen, werden wir ein NPM-Modul namens Node-Tweet-Stream verwenden, das alle Funktionen bietet, die wir ben?tigen. Wir weisen das Objekt für unseren Twitter -Zugriff und alle zugeh?rigen Funktionen der T -Variablen zu und geben in unserem Konfigurations -JSON weiter, um zu beweisen, dass wir darauf zugreifen dürfen.

io <span>= require('socket.io')(server),</span>

Wenn Sie keine Twitter -Schlüssel für den Zugriff auf die Twitter -API haben, fürchten Sie sich nie! Sie müssen nur eine App mit Twitter registrieren. Gehen Sie zur Seite "Twitter Application Management", melden Sie sich mit Ihren Twitter -Anmeldeinformationen an und klicken Sie dann auf "Neue App erstellen".

Sobald Sie eine App haben, k?nnen Sie Ihre Schlüssel und Zugriff auf Token erhalten, indem Sie auf den Link "Tasten und Zugriff auf Tokens zugreifen" klicken, die auf der Verwaltungsseite Ihrer App angezeigt werden. Wenn Sie es nicht finden k?nnen, befindet sich es an der URL von: https://apps.twitter.com/app/0000000/keys (Ersetzen von 0000000 durch die ID Ihrer App).

Erstellen Sie dann eine Datei auf derselben Ebene wie index.html namens config.json. Fügen Sie darin Folgendes mit den Werten Ihrer eigenen App hinzu:

config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>

Andere Server -Grundlagen

Weiter in unserer Index.js -Datei richten wir Aufrufe an das Stammverschluss unseres Servers ein, um /public/index.html:

zu laden

<span>{
</span>  <span>"consumer_key": "YOURKEY",
</span>  <span>"consumer_secret": "YOURKEYSECRET",
</span>  <span>"token": "YOURTOKEN",
</span>  <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>

Wir haben auch alle anderen statischen Dateien innerhalb des ?ffentlichen Verzeichnisses auf unserem Server aufgestellt:

app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>

Wenn wir einen Fehler haben, protokollieren wir diesen Fehler in der Konsole unseres Servers und geben einen 500 -Fehler zurück:

app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});</span>

Die folgenden Zeilen starten unseren Server mit allen obigen Einstellungen.

app<span>.use(function(err<span>, req, res, next</span>) {
</span>  <span>console.error(err.stack);
</span>  res<span>.status(500).send('Something broke!');
</span><span>});</span>

Abrufen unseres Live -Twitter -Streams

Schlie?lich richten wir unsere Twitter -spezifische Serverfunktionen ein. Wir verwenden die Funktion Track (), um anzugeben, welches Schlüsselwort wir im immer erweiterten Twitter -Inhaltsstream verfolgen m?chten.

server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});</span>

Wir haben dann eine Rückruffunktion eingerichtet, die jederzeit ausgeführt werden soll, wenn das Node-Tweet-Stream-Modul einen Tweet mit diesem Schlüsselwort entdeckt. Wenn es eines sieht, protokollieren wir es in dem Konsolenprotokoll unseres Servers (dies ist optional, Sie k?nnen dies entfernen, wenn Sie m?chten) und geben diesen Tweet als Socket.io -Ereignis an verbundene Clients aus.

.

t<span>.track('pizza');</span>

Wenn wir aus irgendeinem Grund einen Fehler mit unserer Twitter -API haben, wird sie an unseren Serverprotokollen angemeldet:

t<span>.on('tweet', function(tweet){
</span>  <span>console.log('Roger that. Tweets incoming!');
</span>  <span>console.log(tweet);
</span>
  io<span>.emit('tweet', tweet);
</span><span>});</span>

Alle unsere Serverabh?ngigkeiten und -Details werden in package.json wie bei allen Knoten -Apps gespeichert. Wenn Sie Node.js neu sind, m?chten Sie vielleicht ein wenig darüber nachlesen, was alles bedeutet: package.json.

unser Front -End -Code

Unser Front -End -Code beginnt mit dem gleichen Einrichten von der VR -VR mit Google Cardboard und Three.JS -Artikel - eine drei.js -Szene, die wir durch einen stereoskopischen Effekt anzeigen und unsere Szene in eine VR -Ansicht bringen. Um diese kurze und bündige und sü?e zu halten, werde ich die Teile nicht wie die vorherige Demo aus diesem Artikel abdecken. Wenn Sie sich nicht sicher sind, was ich hier nicht erkl?re, überprüfen Sie diesen früheren Artikel, um Informationen zu erhalten.

Einrichten von Socket.io

Die einzige neue JS -Datei, die wir im Vergleich zu unserer vorherigen Stiftung hinzufügen werden, ist unsere JavaScript -Datei in Socket.io. Es ist ein einfacher Liner:

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,
</span>    io <span>= require('socket.io')(server),
</span>    config <span>= require('./config.json'),
</span>    <span>Twitter = require('node-tweet-stream'),
</span>    t <span>= new Twitter(config);
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});
</span>
app<span>.use(function(err<span>, req, res, next</span>) {
</span>  <span>console.error(err.stack);
</span>  res<span>.status(500).send('Something broke!');
</span><span>});
</span> 
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
t<span>.track('pizza');
</span>t<span>.on('tweet', function(tweet){
</span>  <span>console.log('Roger that. Tweets incoming!');
</span>  <span>console.log(tweet);
</span>
  io<span>.emit('tweet', tweet);
</span><span>});
</span>
t<span>.on('error', function (err) {
</span>  <span>console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err);
</span><span>});</span>

Um auf die Funktionalit?t von Socket.io zuzugreifen, müssen wir diese Funktionalit?t der IO -Variablen nur zuweisen, wie Sie in unserer Index.html -Datei etwas weiter unten sehen werden:

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,</span>

Vorbereitung unserer Türme

wir haben dann Variablen für unsere ?Türme“ eingerichtet (im Grunde unsere vertikalen Partikels?tze, die einen Tweet darstellen). Alle unsere Türme werden innerhalb eines Dreier -Objekts aufbewahrt, das als Tweettower namens Tweettowers genannt wird. Dies ist ein Containerobjekt, mit dem wir alle unsere Türme im Auge behalten k?nnen:

io <span>= require('socket.io')(server),</span>

Particlexture und Partlematerial sind unsere Variablen, die darstellen, wie unsere Partikel aussehen:

config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>

mAXTOWERCOUNT ist die maximale Anzahl von Türmen, die wir in unserer Szene sichtbar sein m?chten. Wenn dies zu hoch ist, k?nnen wir ein verz?gertes Erlebnis haben. Ich habe es auf 6000 gesetzt, da dies die maximalen Partikel auf etwa eine Million belegt. Eine vernünftige Nummer meiner Meinung nach!

<span>{
</span>  <span>"consumer_key": "YOURKEY",
</span>  <span>"consumer_secret": "YOURKEYSECRET",
</span>  <span>"token": "YOURTOKEN",
</span>  <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>

Reichweite ist, wie gro? ein Bereich um den Betrachter um den Zuschauer ist, dass diese Türme platziert werden. Die Türme werden an zuf?lligen Stellen in der Szene platziert, sodass dies so weit voneinander entfernt ist. Ich habe festgestellt, dass es eine sch?nere Erfahrung mit ihnen n?her am Benutzer ist. Wenn sie weiter vom Benutzer entfernt sind, sieht es so aus, als g?be es nicht so viele (obwohl es Tausende von Tausenden von Partikeln gibt!). Ich setze es auf 100:

app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>

Unsere Init -Funktion

Es gibt nicht zu viel, was in unserer Init () -Funktion neu ist. Es richtet haupts?chlich unsere VR -Kamera und steuert, wie im vorherigen Artikel erl?utert. Die neuen Bits sind am Ende.

Wir definieren unser Partikel-New-PNG, das wir in unserem ?ffentlichen Ordner haben:

app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});</span>

Wir beenden die Init () -Funktion, indem wir unseren Tweettowers -Container zu unserer Szene hinzufügen. In dieser Szene müssen wir uns keine Sorgen machen, dass wir einen unserer Türme direkt in die Szene hinzufügen. Wir fügen sie einfach direkt in unser Tweettower -Objekt hinzu.

app<span>.use(function(err<span>, req, res, next</span>) {
</span>  <span>console.error(err.stack);
</span>  res<span>.status(500).send('Something broke!');
</span><span>});</span>

auf Tweets

reagieren

Sie werden sich erinnern, dass unser Server, sobald unser Server Tweets mit unserem Keyword von "Pizza" über Twitter streamen, ein Ereignis namens "Tweet" ausgibt. Unser Client -Seite JavaScript wird nun auf dieses Ereignis achten und antworten:

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,
</span>    io <span>= require('socket.io')(server),
</span>    config <span>= require('./config.json'),
</span>    <span>Twitter = require('node-tweet-stream'),
</span>    t <span>= new Twitter(config);
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});
</span>
app<span>.use(function(err<span>, req, res, next</span>) {
</span>  <span>console.error(err.stack);
</span>  res<span>.status(500).send('Something broke!');
</span><span>});
</span> 
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
t<span>.track('pizza');
</span>t<span>.on('tweet', function(tweet){
</span>  <span>console.log('Roger that. Tweets incoming!');
</span>  <span>console.log(tweet);
</span>
  io<span>.emit('tweet', tweet);
</span><span>});
</span>
t<span>.on('error', function (err) {
</span>  <span>console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err);
</span><span>});</span>

Der Antwortcode ist ein Aufruf einer Funktion namens Generatetower (), mit der unsere Szene einen Turm hinzufügt, der diesen Tweet darstellt. Wir übergeben es vier Werte:

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,</span>

• Farbe ist die Farbe unseres Teilchens. Wir übergeben die Farbe des Profilhintergrunds des Benutzers. Auf diese Weise k?nnen wir verschiedene Farben zeigen, um verschiedene hungrige Benutzer darzustellen, die über Pizza twittern.
In
• Startcoords wird der Turm platziert. Wir m?chten, dass diese um uns herum platziert werden. Deshalb legen wir sie zwischen unserer Bereichsvariable (dies sollte zwischen -100 und 100) auf den X- und Z -Achsen liegen. Wenn wir sie zuf?llig auf y platzieren, würden sie auf unterschiedlichen Ebenen h?her und niedriger vom Boden anstellen, anstatt wie Geb?ude auszurichten. Das wollen wir definitiv nicht, daher stellen wir sicher, dass sie alle an einer y -Position von 0 platziert sind. GetRandomarbitrary () ist ein einfacher Zufallszahlengenerator zwischen den beiden Werten.
• Geschwindigkeit definiert, wie weit unsere Partikel voneinander entfernt sind (oder die Geschwindigkeit, mit der der Turm ansteigt, wenn sie nach oben animieren).
• Gr??e ist, wie viele Partikel hoch unser Turm sein wird. Wir haben es durchschnittlich auf einen Prozentsatz unter der Annahme einer maximalen Twitter -L?nge von 140 Zeichen.

Anmelden eines Turms

Unsere generatetower () -Funktion selbst beginnt mit der Definition einer Tokusometrievariablen. Dies ist ein drei.Gerometrie -Objekt, das die Positionen aller unserer Partikel im Turm enth?lt. Wenn Sie alle Punkte innerhalb eines Geometrie -Objekts verfolgen, k?nnen die Verarbeitungszeiten niedrig bleiben, da drei.Js nur jedes Turmobjekt und seine Punkte und seine Punkte anstelle einer Reihe unabh?ngiger Partikel verfolgen müssen. Sp?ter im Code werden wir die Geometrie einem Dreier -Objekt bereitstellen, das diese Punkte in unsere Partikel interpretieren kann.

io <span>= require('socket.io')(server),</span>

Wir haben dann ein JavaScript -Objekt eingerichtet, das als Partlemovements bezeichnet wird und dort speichert, wo unsere Partikel im Turm beginnen und enden, und wie weit sie voneinander entfernt sind (die Werte, die wir früher übergeben haben):

config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>

Die Variable der CurrentCoords verfolgt die letzte Position eines Teilchens innerhalb des Turms. Wir initialisieren es bei 0,0,0. Die Startkosten, in denen der Turm platziert wird, werden früher aus dem Funktionsaufruf analysiert. Wenn wir keine Startkoordinaten aus dem Funktionsaufruf haben, initialisieren wir sie so wie CurrentCoords:

<span>{
</span>  <span>"consumer_key": "YOURKEY",
</span>  <span>"consumer_secret": "YOURKEYSECRET",
</span>  <span>"token": "YOURTOKEN",
</span>  <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>

Wir itererieren dann die Gr??e unseres Turms, um jedes Teilchen zu erzeugen. Wir haben die aktuellen Koordinaten festgelegt, damit y sich um unseren Geschwindigkeitswert multipliziert von i erh?ht. Unsere X- und Z -Werte bleiben an ihren Startpunkten, da wir uns nur nach oben bewegen.

app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>

Mit den für dieses Teilchen definierten Koordinaten befinden wir uns die Position dieses Partikels als Scheitelpunkt in unserem Towergeometrie-Objekt:

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,
</span>    io <span>= require('socket.io')(server),
</span>    config <span>= require('./config.json'),
</span>    <span>Twitter = require('node-tweet-stream'),
</span>    t <span>= new Twitter(config);
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});
</span>
app<span>.use(function(err<span>, req, res, next</span>) {
</span>  <span>console.error(err.stack);
</span>  res<span>.status(500).send('Something broke!');
</span><span>});
</span> 
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
t<span>.track('pizza');
</span>t<span>.on('tweet', function(tweet){
</span>  <span>console.log('Roger that. Tweets incoming!');
</span>  <span>console.log(tweet);
</span>
  io<span>.emit('tweet', tweet);
</span><span>});
</span>
t<span>.on('error', function (err) {
</span>  <span>console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err);
</span><span>});</span>

, das sicherstellt, dass unsere Positionierung der Partikel korrekt eingestellt ist. Als n?chstes definieren wir, wie die Partikel in diesem Turm innerhalb der partellematerialischen Variablen aussehen werden. Unsere Partikel werden innerhalb eines Dreier -Objekts platziert. Um sie zu stylen, verwenden wir ein Drei.

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,</span>

map definiert das Bild, das wir für das Partikel verwenden werden. Wir geben in den zuvor definierten Partikeln vorbei.
Farbe passt in der Farbe, die wir das Partikel haben sollen (standardm??ig auf 0xffffff in drei.js).
Mischung stellt fest, wie sich die Partikel in die Szene einfügen. Drei.AdditiveBlenden fügt die Farbe der Textur zu der dahinter stehenden.
transparent sorgt dafür
• Gr??e ist die Gr??e unserer Partikel.
Schlie?lich definieren wir die Punktwolke unseres Turms innerhalb der Variablen des Turms. Wir geben unsere Geometrie mit, die die Punkte enthalten, auf die jedes Partikel erscheint, sowie das Material, das wir für jedes von ihnen definiert haben.

Wir fügen diesen Turm zu unserem Tweettower -Sammlungsobjekt hinzu und überprüfen dann, wie viele Türme in der Szene sind. Wenn wir mehr Türme als unser maximal erlaubt haben, verbergen wir die ?lteste, um die Last auf dem Ger?t zu reduzieren. Wenn Sie Leistungsprobleme haben, sind sie wahrscheinlich etwas besser, wenn Sie den MaxtowerCount reduzieren!

io <span>= require('socket.io')(server),</span>

Ausführen unseres Codes

config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>

Um diese Demo lokal auszuführen, ben?tigen Sie den Knoten installiert und müssen die üblichen Befehle ausführen. Installieren Sie alle Abh?ngigkeiten für das Projekt:

Dann führen Sie es aus:

<span>{
</span>  <span>"consumer_key": "YOURKEY",
</span>  <span>"consumer_secret": "YOURKEYSECRET",
</span>  <span>"token": "YOURTOKEN",
</span>  <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>

Um dies auf Ihrem Smartphone zu testen, müssen Sie entweder sicherstellen beim Zugriff auf Localhost von überall).

app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>

Sie k?nnen den Knotenserver auch irgendwo hosten. Ich pers?nlich habe Heroku verwendet, aber dies ist eine v?llig pers?nliche Pr?ferenz.

Sobald Sie den Server irgendwo in Betrieb haben, ?ffnen Sie Chrome für Mobile und besuchen Sie ihn! Legen Sie Ihr Google -Karton oder ein anderes ?hnliches Headset auf und Sie sollten eine Erfahrung sehen, die nach einer halben Minute oder so so aussieht, wenn Sie nachschlagen:

Schlussfolgerung

Dies h?tte Ihnen einen guten überblick über die Verwendung von Knoten, Socket.io und drei.js geben sollen, um eine 3D -Web -API -f?hige virtuelle Realit?tsvisualisierung zu erstellen. Die Demo selbst k?nnte weiterentwickelt werden, wobei weitere Schlüsselw?rter, Filter hinzugefügt werden, wodurch sie mit mehr Partikeln usw. usw. l?uft. Es gibt viel Potenzial! Fühlen Sie sich frei, dort rauszukommen und zu versuchen, Ihre eigene fantastische Erfahrung aus dieser Demo zu machen!

Ich habe auch andere Demos hier bei SitePoint, die ?hnliche Konzepte verwenden, sie aber stattdessen in eine erweiterte Realit?tserfahrung einflie?en. Wenn Sie interessiert sind, filtern Sie die Realit?t mit JavaScript und Google Cardboard durch, um die Kamera von Ihrem Smartphone aus zu nehmen und Filter hinzuzufügen, und erweiterte die Realit?t im Browser mit AWE.js. Die immer kraftvolle Kombination von drei.js und Awe.js!

Wenn Sie sich die Herausforderung stellen, Ihre eigene VR -Visualisierung aus der Demo in diesem Artikel zusammenzustellen (oder sie mit Elementen aus den genannten AR -Beispielen zu kombinieren), hinterlassen Sie eine Notiz in den Kommentaren oder setzen Sie sich mit uns in Verbindung Ich auf Twitter (@thatpatrickguy), ich werde mein Headset herausholen und einen Blick darauf werfen!

h?ufig gestellte Fragen (FAQs) zur Visualisierung eines Twitter -Streams in VR mit drei.js und Knoten

Wie kann ich Twitter für Websites einrichten? Zun?chst müssen Sie eine Twitter -Anwendung auf der Website des Twitter -Entwicklers erstellen. Nach dem Erstellen der Anwendung erhalten Sie eine Reihe von Schlüssel und Token. Diese werden verwendet, um Ihre Anwendung mit Twitter zu authentifizieren. Sie müssen dann die Twitter JavaScript -API auf Ihrer Website installieren. Mit dieser API k?nnen Ihre Website mit Twitter interagieren und Funktionen wie Tweet-Schaltfl?chen und eingebettete Tweets aktivieren. JavaScript -Bibliothek, mit der animierte 3D -Computergrafiken in einem Webbrowser erstellt und angezeigt werden. Es verwendet WebGL, um Grafiken zu rendern. Die Bibliothek bietet eine Reihe von Objekten und Methoden, die es einfacher machen, komplexe 3D -Szenen zu erstellen, einschlie?lich Kameras, Lichtern, Materialien und Geometrien.

Um drei.js auf node.js zu verwenden, müssen Sie das Paket 'Drei' mit NPM, dem Node.js -Paket -Paket -Manager, installieren. Nach der Installation k?nnen Sie das "Drei" -Modul in Ihren Skripten node.js ben?tigen. Sie k?nnen dann die Three.js -API verwenden, um 3D -Grafiken zu erstellen.

Wie kann ich einen Twitter -Stream in VR? Zun?chst müssen Sie mit der Twitter -API einen Twitter -Stream einrichten. Dies beinhaltet das Erstellen einer Twitter -Anwendung und die Authentifizierung mit Ihrem Twitter -Konto. Sobald der Stream eingerichtet ist, k?nnen Sie drei.js verwenden, um eine 3D -Visualisierung der Tweets zu erstellen. Dies beinhaltet das Erstellen einer 3D-Szene, das Hinzufügen von Objekten zur Darstellung von Tweets und das Aktualisieren der Szene in Echtzeit, wenn neue Tweets eintreffen.

Was sind die wichtigsten Unterschiede zwischen drei.js und anderen 3D-Grafikbibliotheken? Es wird viele der Komplexit?t der direkten Arbeit mit WebGL abstrahiert, was es einfacher macht, komplexe 3D -Szenen zu erstellen. Andere Bibliotheken bieten m?glicherweise mehr Zugang zu WebGL auf niedrigem Niveau, erfordern jedoch ein tieferes Verst?ndnis der 3D-Grafikprogrammierung. Twitter Stream, Fehler k?nnen aus verschiedenen Gründen auftreten, wie z. B. Netzwerkprobleme oder falsche Authentifizierungsanmeldeinformationen. Die Twitter -API enth?lt Fehlermeldungen, mit denen Sie diese Probleme diagnostizieren und beheben k?nnen. Es ist wichtig, diese Fehler in Ihrem Code zu behandeln, um sicherzustellen, dass Ihre Anwendung weiterhin reibungslos ausgeführt wird.

Wie kann ich die Leistung meiner drei.js -Anwendung optimieren? eine Vielzahl von Techniken. Dazu geh?rt die Reduzierung der Komplexit?t Ihrer 3D -Modelle, die Optimierung Ihrer Texturen und die Minimierung der Anzahl der Ziehanrufe. Sie k?nnen auch Tools wie den drei.js -Inspektor verwenden, um die Leistung Ihrer Anwendung zu analysieren und Engp?sse zu identifizieren. Das Erscheinen Ihres Twitter -Streams in VR durch ?nderung der Eigenschaften der 3D -Objekte, die Tweets darstellen. Dies schlie?t Eigenschaften wie Farbe, Textur und Gr??e ein. Sie k?nnen auch verschiedene Arten von Lichtern und Kameras verwenden, um das Gesamtaussehen und das Gefühl der Szene zu ?ndern.

Wie kann ich meinem Twitter -Stream in VR? Stream in VR umfasst die Verwendung von Ereignish?rern, um Benutzeraktionen wie Klicks oder Berührungen zu erkennen. Sie k?nnen dann die 3D -Szene als Antwort auf diese Aktionen aktualisieren. Sie k?nnen beispielsweise Benutzern erm?glichen, Tweets auszuw?hlen, indem Sie auf sie klicken oder mit Touch Gesten durch die Szene navigieren. Eine Drei.JS -Anwendung im Web umfasst die Verpackung Ihrer Anwendungsdateien und das Hochladen auf einen Webserver. Sie k?nnen Tools wie WebPack verwenden, um Ihre JavaScript -Dateien und Dienste wie Github -Seiten oder Netlify zu bündeln, um Ihre Anwendung zu hosten. Nach der Bereitstellung ist Ihre Anwendung für alle mit einem Webbrowser zugegriffen.

Das obige ist der detaillierte Inhalt vonVisualisieren eines Twitter -Streams in VR mit drei.js und Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!