Visualisieren eines Twitter -Streams in VR mit drei.js und Knoten

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!