Twitter est une bête merveilleuse et riche en informations. Je voulais combiner certains des pouvoirs de visualisation, trois.js et ses capacités VR avec socket.io et nœud pour créer un joli monde de particules généré via un flux Twitter.
J'ai précédemment discuté de toutes les bases du développement d'expériences du Web de réalité virtuelle dans l'article SitePoint amenant la réalité virtuelle sur le Web avec Google Cardboard et Three.js, donc si vous êtes nouveau dans toute cette idée - lisez ce premier et venez dos. Cette démo utilise les mêmes fondations.
La démo que nous construisons regardera un flux Twitter en direct pour un mot-clé. Quand on est tweeté pendant qu'il regarde le ruisseau, il fera apparaître une «tour» de particules brillantes qui représentent la durée du tweet. Cette démo en particulier recherchera des mentions du mot «pizza». Pourquoi la pizza vous demandez? Je cherchais un terme qui n'était pas mentionné aussi souvent que «Bieber» mais plus fréquemment que «Hyenas de course à caisse». En bref, les meilleurs termes sont ceux qui sont relativement suffisamment fréquents pour qu'ils apparaissent pendant que vous regardez, mais pas si fréquents qu'ils passent à plusieurs centaines par seconde. La pizza est l'une d'entre elles.
Si vous souhaitez entrer directement dans le code et l'essayer, vous pouvez le trouver ici sur github.
Vous voulez l'essayer en action? J'ai une version en cours d'exécution hébergée ici: VR Twitter World.
Nous allons commencer par regarder notre code de serveur de nœuds. Il affichera notre HTML plat et fonctionnera également comme un serveur Socket.io qui tirera un flux de données de Twitter.
Le serveur complet est relativement court et ressemble à:
<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>Nos premières lignes configurent un serveur à l'aide du framework Node Express. C'est une configuration assez simple qui tire toutes nos dépendances et prépare la variable d'application pour que nous accédons à la fonctionnalité de notre serveur. Configuration du port sur le port sur lequel nous voulons que notre serveur s'exécute (process.env.port est une variable de serveur Certains configurations d'hébergement comme Heroku auront défini).
<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>Ensuite, nous avons configuré la variable IO tout en démarrant simultanément la fonctionnalité de notre serveur socket.io, en la fixant au serveur express que nous configurons ci-dessus:
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').createServer(app),
</span> port <span>= process.env.PORT || 80,</span>La variable de configuration est un bon moyen de garder les clés d'authentification Twitter de l'application et les jetons d'accès dans leur propre fichier. Afin de visualiser le flux Twitter, nous utiliserons un module NPM appelé Node-Tweet-Stream qui fournit toutes les fonctions dont nous aurons besoin. Nous attribuons l'objet pour notre accès Twitter et toutes les fonctions associées à la variable T, passant dans notre configuration JSON pour prouver que nous sommes autorisés à y accéder.
io <span>= require('socket.io')(server),</span>Si vous n'avez pas de clés Twitter pour l'accès à l'API Twitter, n'ayez crainte! Il vous suffit d'enregistrer une application avec Twitter. Rendez-vous sur la page de gestion de l'application Twitter, connectez-vous avec vos informations d'identification Twitter, puis cliquez sur «Créer une nouvelle application».
Une fois que vous avez une application, vous pouvez obtenir vos clés et vos jetons d'accès en cliquant sur le lien «Keys and Access Tokens» qui apparaîtra sur la page de gestion de votre application. Si vous ne le trouvez pas, ce sera à l'URL de: https://apps.twitter.com/app/0000000/keys (remplaçant 0000000 par ID de votre application).
Ensuite, créez un fichier au même niveau que index.html appelé config.json. À l'intérieur, ajoutez ce qui suit avec les valeurs de votre propre application:
config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>Plus loin dans notre fichier index.js, nous avons configuré des appels à la racine de notre serveur pour charger /public/index.html:
<span>{
</span> <span>"consumer_key": "YOURKEY",
</span> <span>"consumer_secret": "YOURKEYSECRET",
</span> <span>"token": "YOURTOKEN",
</span> <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>Nous l'avons également servir tout autre fichier statique dans le répertoire public sur notre serveur:
app<span>.get('/', function(request<span>, response</span>) {
</span> response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>Si nous avons une erreur, nous enregistrons cette erreur dans la console de notre serveur et renvoyons une erreur de 500:
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span> res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});</span>Les lignes suivantes démarrent notre serveur en cours d'exécution avec tous les paramètres ci-dessus.
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>Enfin, nous avons configuré nos fonctionnalités de serveur spécifiques à Twitter. Nous utilisons la fonction Track () pour spécifier le mot-clé que nous aimerions suivre dans le flux de contenu Twitter en constante expansion.
server<span>.listen(port, function() {
</span> <span>console.log('Listening on ' + port);
</span><span>});</span>Nous avons ensuite configuré une fonction de rappel pour exécuter chaque fois que le module de flux de nœud-tweet repére un tweet avec ce mot-clé. S'il en voit un, nous le connectons dans le journal de la console de notre serveur (c'est facultatif, vous pouvez supprimer cela si vous le souhaitez), puis émettre cela tweeter en tant qu'événement socket.io à tous les clients connectés.
t<span>.track('pizza');</span>Si nous avons une erreur pour une raison quelconque avec notre API Twitter, elle sera enregistrée à nos journaux de serveur:
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>Toutes nos dépendances et détails de nos serveurs sont stockés dans package.json comme avec toutes les applications de nœud. Si vous êtes nouveau sur node.js, vous voudrez peut-être lire un peu ce que tout signifie: package.json.
Notre code frontal commence par la même configuration à partir de la VR Bringing sur le Web avec Google Cardboard et Three.js Article - une scène Three.js que nous affichons à travers un effet stéréoscopique, introduisant notre scène dans une vue VR. Pour garder cela court et doux, je ne couvrirai pas les bits qui sont les mêmes que la démo précédente de cet article. Si vous n'êtes pas sûr de quoi que ce soit, je n'explique pas ici, consultez cet article précédent pour plus d'informations.
Le seul nouveau fichier JS que nous ajouterons par rapport à notre fondation précédente est notre fichier javascript socket.io. C'est une simple doublure:
<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>Afin d'accéder aux fonctionnalités de socket.io, tout ce dont nous avons besoin est d'attribuer cette fonctionnalité à la variable IO, car vous le verrez un peu plus loin dans notre fichier index.html:
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').createServer(app),
</span> port <span>= process.env.PORT || 80,</span>Nous avons ensuite configuré des variables pour nos «tours» (essentiellement nos ensembles verticaux de particules qui représentent un tweet). Toutes nos tours sont stockées dans un objet Three.Object3d appelé Tweettowers. Ceci est un objet de conteneur qui nous permet de suivre toutes nos tours:
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>MaxtowerCount est le nombre maximal de tours que nous voulons être visibles dans notre scène - si cela est trop élevé, nous pouvons nous retrouver avec une expérience laggétique. Je l'ai réglé à 6000 car cela définit les particules maximales d'environ un million. Un nombre raisonnable à mon avis!
<span>{
</span> <span>"consumer_key": "YOURKEY",
</span> <span>"consumer_secret": "YOURKEYSECRET",
</span> <span>"token": "YOURTOKEN",
</span> <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>La gamme est la taille d'une zone autour du spectateur, nous voulons que ces tours soient placées. Les tours seront placées à des endroits aléatoires de la scène, donc cela limite la distance à laquelle ils sont tous placés. J'ai trouvé que c'était une plus belle expérience avec eux plus près de l'utilisateur. S'ils sont plus loin de l'utilisateur, il semble qu'il n'y en ait pas autant (bien qu'il y ait des milliers et des milliers de particules!). Je l'ai réglé à 100:
app<span>.get('/', function(request<span>, response</span>) {
</span> response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>Il n'y a pas trop de nouveaux dans notre fonction init (). Il configure principalement notre caméra VR et nos commandes comme expliqué dans l'article précédent. Les nouveaux bits sont à la fin.
Nous définissons notre image de particules pour être un PNG appelé particules-new.png que nous avons dans notre dossier public:
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span> res<span>.sendFile(__dirname + '/public/' + req.params[0]);
</span><span>});</span>Nous terminons la fonction init () en ajoutant notre conteneur Tweettowers à notre scène. Avec cela dans notre scène, nous n'avons pas à nous soucier d'ajouter aucune de nos tours directement dans la scène, nous les ajoutons simplement dans notre objet Tweettowers directement.
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>Vous vous souviendrez qu'une fois que notre serveur trouvera des tweets en streaming via Twitter avec notre mot-clé de "Pizza", il émet un événement appelé "Tweet". Notre Client Side JavaScript surveillera désormais cet événement et répondra:
<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>Le code de réponse est un appel à une fonction appelée generateTower () qui ajoutera une tour à notre scène représentant ce tweet. Nous le transmettons quatre valeurs:
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').createServer(app),
</span> port <span>= process.env.PORT || 80,</span>Notre fonction GenerateTower () elle-même commence par définir une variable ToweroMétrie. Il s'agit d'un objet à trois. géométrie qui contiendra les positions de toutes nos particules à l'intérieur de la tour. Garder tous les points suivis dans un objet de géométrie peut aider à réduire les délais de traitement, car trois.js n'ont besoin que de suivre chaque objet de la tour et ses points, plutôt qu'une gamme de particules indépendantes. Plus tard dans le code, nous fournirons la géométrie à un objet Three.pointCloud qui peut interpréter ces points dans nos particules.
io <span>= require('socket.io')(server),</span>Nous avons ensuite mis en place un objet JavaScript appelé de particules qui stocke où nos particules commenceront et se termineront dans la tour, ainsi que la distance qu'elles seront (les valeurs que nous avons passées plus tôt):
config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>La variable CurrentCoords suit la dernière position d'une particule à l'intérieur de la tour. Nous l'initialisons à 0,0,0. Les coordonnées de départ où la tour sera placée sont analysées à partir de l'appel de la fonction plus tôt. Si nous n'avons pas de coordonnées de démarrage à partir de l'appel de la fonction, nous les initialisons pour être les mêmes que CurrentCoords:
<span>{
</span> <span>"consumer_key": "YOURKEY",
</span> <span>"consumer_secret": "YOURKEYSECRET",
</span> <span>"token": "YOURTOKEN",
</span> <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>Nous allons ensuite parcourir la taille de notre tour pour créer chaque particule. Nous définissons les coordonnées actuelles pour que Y augmente par notre valeur de vitesse multipliée par i. Nos valeurs X et Z restent à leurs points de départ car nous montons seulement vers le haut.
app<span>.get('/', function(request<span>, response</span>) {
</span> response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>Avec ces coordonnées définies pour cette particule, nous fixons la position de cette particule en tant que sommet dans notre objet TowerGeométrie:
<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>qui garantit que notre positionnement des particules est réglé correctement. Ensuite, nous définissons à quoi ressemblera les particules de cette tour dans la variable de lamaterie. Nos particules seront placées dans un objet Three.PointCloud et donc pour les styliser, nous utiliserons un matériau à trois.PointCloudMaterial:
<span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').createServer(app),
</span> port <span>= process.env.PORT || 80,</span>Enfin, nous définissons le nuage de points de notre tour dans la variable de la tour. Nous passons dans notre géométrie contenant les points sur lesquels nous voulons que chaque particule apparaisse, ainsi que le matériau que nous avons défini ci-dessus pour chacun d'eux.
io <span>= require('socket.io')(server),</span>Nous ajoutons cette tour à notre objet de collection Tweettowers, puis vérifions pour voir combien de tours sont dans la scène. Si nous avons plus de tours que notre maximum autorisé, nous cachons le plus ancien pour réduire la charge sur l'appareil. Si vous avez des problèmes de performances, il y a de fortes chances qu'ils soient un peu meilleurs si vous réduisez le maxtowercount!
config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>Pour exécuter cette démo localement, vous aurez besoin de nœud installé et vous devrez exécuter les commandes habituelles. Installez toutes les dépendances pour le projet:
<span>{
</span> <span>"consumer_key": "YOURKEY",
</span> <span>"consumer_secret": "YOURKEYSECRET",
</span> <span>"token": "YOURTOKEN",
</span> <span>"token_secret": "YOURTOKENSECRET"
</span><span>}</span>puis exécutez-le:
app<span>.get('/', function(request<span>, response</span>) {
</span> response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>Afin de tester cela sur votre smartphone, vous devrez soit vous assurer que votre smartphone est sur le même réseau local et trouver l'adresse IP de votre ordinateur, soit utiliser un service de tunneling comme Ngrok (je couvre comment utiliser Ngrok dans l'article sur l'accès localhost de n'importe où).
Vous pouvez également héberger le serveur de nœuds quelque part. J'ai personnellement utilisé Heroku, mais c'est une préférence complètement personnelle.
Une fois que vous avez le serveur quelque part en marche, ouvrez Chrome pour mobile et visitez-le! Mettez votre google en carton ou autre casque similaire et vous devriez voir une expérience qui après une demi-minute environ ressemble à ceci si vous recherchez:
Cela aurait dû vous donner un bon aperçu de l'utilisation de Node, Socket.io et Three.js pour créer une visualisation de réalité virtuelle activée par API 3D. La démo elle-même pourrait être développée davantage, ajoutant plus de mots clés, de filtres, ce qui la rend plus fluide avec plus de particules et ainsi de suite. Il y a beaucoup de potentiel! N'hésitez pas à sortir et à essayer de faire votre propre expérience fantastique à partir de cette démo!
J'ai également eu d'autres démos ici à SitePoint qui utilisent des concepts similaires, mais les amène plutôt dans une expérience de réalité augmentée. Si vous êtes intéressé, filtrant la réalité avec JavaScript et Google Cardboard explore la prise de l'appareil photo de votre smartphone et l'ajout de filtres, et augmente la réalité dans le navigateur avec awe.js explore le chemin et augmenter les éléments dans votre champ de vision via via via via via via VIA VIA La combinaison toujours puissante de trois.js et awe.js!
si vous relevez le défi de mettre en place votre propre visualisation VR de la démo dans cet article (ou de le combiner avec des éléments des exemples AR mentionnés), laissez une note dans les commentaires ou contactez-vous avec Moi sur Twitter (@thatpatrickguy), je vais sortir mon casque et jeter un œil!
La configuration de Twitter pour les sites Web implique quelques étapes. Tout d'abord, vous devez créer une application Twitter sur le site du développeur Twitter. Après avoir créé l'application, vous recevrez un ensemble de clés et de jetons. Ceux-ci sont utilisés pour authentifier votre application avec Twitter. Vous devez ensuite installer l'API JavaScript Twitter sur votre site Web. Cette API permet à votre site Web d'interagir avec Twitter, permettant des fonctionnalités telles que des boutons de tweet et des tweets intégrés.
trois.js est un croisement croisé Bibliothèque JavaScript utilisée pour créer et afficher des graphiques informatiques 3D animés dans un navigateur Web. Il utilise WebGL pour rendre les graphiques. La bibliothèque fournit un ensemble d'objets et de méthodes qui facilitent la création de scènes 3D complexes, y compris des caméras, des lumières, des matériaux et des géométries.
Pour utiliser trois.js sur node.js, vous devez installer le package 'trois' à l'aide de NPM, le gestionnaire de package Node.js. Une fois installé, vous pouvez avoir besoin du module «trois» dans vos scripts Node.js. Vous pouvez ensuite utiliser l'API Three.js pour créer des graphiques 3D.
Visualiser un flux Twitter en VR implique plusieurs étapes. Tout d'abord, vous devez configurer un flux Twitter en utilisant l'API Twitter. Cela implique de créer une application Twitter et de l'authentifier avec votre compte Twitter. Une fois le flux configuré, vous pouvez utiliser trois.js pour créer une visualisation 3D des tweets. Cela implique la création d'une scène 3D, l'ajout d'objets pour représenter les tweets et la mise à jour de la scène en temps réel à mesure que de nouveaux tweets arrivent.
trois.js est une bibliothèque de haut niveau qui fournit une API simple pour créer des graphiques 3D. Il résume bon nombre des complexités du travail avec WebGL directement, ce qui facilite la création de scènes 3D complexes. D'autres bibliothèques peuvent fournir un accès plus de bas niveau à WebGL, mais nécessitent une compréhension plus profonde de la programmation graphique 3D.
Lors de la configuration d'un Twitter Stream, des erreurs peuvent se produire pour diverses raisons, telles que des problèmes de réseau ou des informations d'authentification incorrectes. L'API Twitter fournit des messages d'erreur qui peuvent vous aider à diagnostiquer et résoudre ces problèmes. Il est important de gérer ces erreurs dans votre code pour vous assurer que votre application continue de fonctionner en douceur.
L'optimisation d'une application Three.js implique une variété de techniques. Il s'agit notamment de réduire la complexité de vos modèles 3D, d'optimiser vos textures et de minimiser le nombre d'appels de dessin. Vous pouvez également utiliser des outils comme l'inspecteur Three.js pour analyser les performances de votre application et identifier les goulots d'étranglement.
Vous pouvez personnaliser L'apparition de votre flux Twitter en VR en modifiant les propriétés des objets 3D qui représentent les tweets. Cela comprend des propriétés telles que la couleur, la texture et la taille. Vous pouvez également utiliser différents types de lumières et de caméras pour modifier l'aspect et la sensation globaux de la scène.
Ajout d'interactivité à votre Twitter Le flux en VR implique d'utiliser des écouteurs d'événements pour détecter les actions des utilisateurs, telles que des clics ou des touches. Vous pouvez ensuite mettre à jour la scène 3D en réponse à ces actions. Par exemple, vous pouvez permettre aux utilisateurs de sélectionner des tweets en cliquant sur eux, ou naviguer dans la scène en utilisant les gestes tactiles.
Déployage Une application Three.js sur le Web consiste à emballer vos fichiers d'application et à les télécharger sur un serveur Web. Vous pouvez utiliser des outils comme WebPack pour regrouper vos fichiers JavaScript et des services comme GitHub Pages ou NetLify pour héberger votre application. Une fois déployé, votre application sera accessible à toute personne ayant un navigateur Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment annuler le renouvellement automatique de la carte Taobao Money Saving
Introduction aux outils de robot d'exploration
utilisation de la fonction de rééchantillonnage
Que dois-je faire si la carte d'itinéraire ne peut pas être ouverte ?
Diagramme de topologie de réseau
Outil de valorisation de nom de domaine de site Web
variables membres Java
Introduction à l'utilisation de la fonction axis dans Matlab
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
