3.jsとノードでVRのTwitterストリームを視覚化する

Twitterは素晴らしく、情報が豊富な獣です。視覚化の力のいくつかを組み合わせたThree.jsとそのVR機能をsocket.ioとノードと組み合わせて、Twitterストリームを介して生成されたきれいな粒子の世界を作成したかった。

私たちが構築するデモは、キーワードのライブTwitterストリームを視聴します。ストリームを見ている間にツイートされると、ツイートの長さを表す輝く粒子の「塔」が表示されます。特にこのデモでは、「ピザ」という言葉の言及を探します。なぜピザを尋ねるのですか？私は「ビーバー」ほど頻繁に言及されていないが、「ボックスカーレーシングハイエナ」よりも頻繁に言及されていた用語を探していました。要するに、最良の用語は、あなたが見ている間に表示されるほど比較的頻繁に頻繁に行われるものですが、それほど頻繁ではないほど頻繁ではありません。ピザもその一人です。

キーテイクアウト

node.jsとsocket.ioを使用して、Twitterストリームデータを処理および発射することができるリアルタイムサーバーを作成し、VRの視覚化の互換性を向上させます。

3.jsを統合して、ツイートがユニークなパーティクルタワーとして表される3D VR環境を構築し、ツイートの長さに基づいて高さが異なります。
• 最大粒子数を設定し、パフォーマンスの遅れを防ぐために定義範囲内に粒子タワーを配置することにより、VRのユーザーエクスペリエンスを最適化します。
粒子にユーザープロファイルの色を使用し、3つのjsで利用可能なテクスチャとブレンドオプションを使用して、ツイート表現の視覚的側面をカスタマイズします。
• Herokuなどのプラットフォームにノードサーバーを展開し、Ngrokなどのトンネリングサービスを使用してさまざまなデバイスでVRエクスペリエンスをテストすることにより、幅広いアクセシビリティとリアルタイム機能を確保します。
• デモコード
• コードにまっすぐに入って試してみたい場合は、ここでgithubで見つけることができます。
• 実行中に試してみませんか？ここでホストされているランニングバージョンがあります：VR Twitter World。
サーバーコード

ノードサーバーコードを調べることから始めます。フラットHTMLを表示し、Twitterからデータのストリームを引き込むsocket.ioサーバーとしても動作します。

フルサーバーは比較的短く、そうです：

最初の行は、ノードエクスプレスフレームワークを使用してサーバーをセットアップしました。これは、すべての依存関係を引き込み、サーバー機能にアクセスするためのアプリ変数を準備するかなり簡単なセットアップです。ポートは、サーバーを実行したいポートを設定します（process.env.portは、Herokuが定義するようないくつかのホスティングセットアップをサーバー変数です）。

<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>

その後、IO変数をセットアップしながら、Socket.ioサーバーの機能を同時に起動し、上で設定したExpressサーバーに添付します。

<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アクセス​​のセットアップ

config変数は、アプリケーションのTwitter認証キーを維持し、独自のファイルにトークンにアクセスする良い方法です。 Twitterストリームをライブで表示するために、必要なすべての機能を提供するNode-Tweet-StreamというNPMモジュールを使用します。 Twitterアクセス​​にオブジェクトを割り当て、すべての関連する関数をT変数に割り当て、構成JSONを渡してアクセスできることを証明します。

Twitter APIにアクセスするためのTwitterキーがない場合は、恐れることはありません！ Twitterでアプリを登録するだけです。 Twitterアプリケーション管理ページにアクセスして、Twitterの資格情報でログインし、[新しいアプリの作成]をクリックします。

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

アプリを取得したら、アプリの管理ページに表示される「キーとアクセストークン」リンクをクリックして、キーを取得してトークンにアクセスできます。見つからない場合は、https：//apps.twitter.com/app/0000000/keys（0000000をアプリのIDに置き換える）のURLにあります。

次に、config.jsonと呼ばれるindex.htmlと同じレベルでファイルを作成します。その中に、独自のアプリの値で以下を追加します：

その他のサーバーの基本

index.jsファイルにさらに沿って、サーバーのルートに呼び出しを設定して、/public/index.html：

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

また、サーバー上のパブリックディレクトリ内の他の静的ファイルを提供しています。

エラーがある場合、サーバーのコンソールでそのエラーを記録し、500エラーを返します。

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

次の行は、上記のすべての設定でサーバーの実行を開始します。

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

ライブTwitterストリームを取得

最後に、Twitter固有のサーバー機能を設定します。 track（）関数を使用して、拡張されているTwitterコンテンツストリームで追跡するキーワードを指定します。

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

次に、ノードツイートストリームモジュールがそのキーワードを使用してツイートをスポットするたびに、コールバック関数を設定して実行します。表示されている場合は、サーバーのコンソールログにログインします（これはオプションです。必要に応じてこれを削除できます）。

Twitter APIで何らかの理由でエラーがある場合、サーバーログにログに記録されます。

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>

すべてのサーバーの依存関係と詳細は、すべてのノードアプリと同様にpackage.json内に保存されます。 node.jsを初めて使用している場合は、すべての意味について少し読んでください：package.json。

フロントエンドコード

フロントエンドコードは、Google CardboardとThree.jsの記事を使用して、VRからWebにVRをもたらすのと同じセットアップで始まります。これは、立体効果を通じて表示され、VRビューにシーンをもたらします。これを短くて甘く保つために、その記事の以前のデモと同じビットをカバーしません。ここで説明しないことがわからない場合は、以前の記事を確認してください。

socket.io

のセットアップ

以前の基盤と比較して追加する唯一の新しいJSファイルは、socket.io javascriptファイルです。シンプルなライナーです：

<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>

次に、「タワー」（基本的にツイートを表す垂直粒子セット）の変数を設定します。私たちの塔はすべて、TweetTowersと呼ばれる3.Object3Dオブジェクト内に保存されます。これは、すべてのタワーを追跡できるコンテナオブジェクトです。

ParticleTextureとParticleMaterialは、粒子がどのように見えるかを表す変数です。

MaxtowerCountは、私たちのシーンで見えるタワーの最大数です。これが高すぎると、遅れた体験になります。最大粒子を約100万に設定するため、6000に設定しました。私の意見では合理的な数！

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>

範囲は、これらの塔を配置したい視聴者の周りの領域の大きさです。タワーはシーンのランダムなスポットに配置されるため、これにより、それらがすべて配置されていることが制限されます。ユーザーに近い彼らとのより良い経験であることがわかりました。ユーザーから遠く離れている場合、それほど多くはないように見えます（何千もの粒子に何千もの粒子があります！）。 100：

に設定します

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

init機能

init（）関数内で新しいものはあまりありません。主にVRカメラを設定し、前の記事で説明したようにコントロールします。新しいビットは最後にあります。

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

particleletexture画像を、パブリックフォルダー内にあるParticle-new.pngと呼ばれるPNGであると定義しています。

TweetTowersコンテナをシーンに追加することにより、init（）関数を終了します。私たちのシーンでこれを使用すると、タワーのいずれかをシーンに直接追加することを心配する必要はありません。TweetTowersオブジェクトに直接追加するだけです。

ツイートに反応する

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

「ピザ」のキーワードを使用してサーバーがTwitterを通じてツイートをストリーミングしているのを見つけたら、「Tweet」と呼ばれるイベントが発生したことを思い出してください。クライアント側のJavaScriptがそのイベントを監視し、応答します：<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>

応答コードは、そのツイートを表すシーンにタワーを追加するGenerateTower（）と呼ばれる関数への呼び出しです。 4つの値を渡します：

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

• 色は私たちの粒子の色です。ユーザーのプロフィールの背景の色を渡します。これにより、さまざまな色を表すさまざまな色を表示することができます。
startingcoordsは、タワーが配置される場所です。これらを私たちの周りに配置することを望んでいるので、x軸とz軸の上の範囲変数（これは-100〜100の間に終わるはずです）の間に配置します。それらをyにランダムに配置すると、建物のように並ぶのではなく、地面からより高いレベルと低いレベルで開始します。私たちは間違いなくそれを望んでいないので、それらがすべて0のy位置に配置されるようにします。getRandomarbitrary（）は、2つの値の間の単純な乱数ジェネレーターです。
• 速度は、粒子がどれだけ離れて配置されるかを定義します（または、上向きにアニメーション化した場合、タワーが上昇する速度）。
サイズは、私たちの塔がどれだけ高い粒子になりますか。 140文字の最大Twitterの長さを仮定して、平均してパーセンテージになります。
タワーの表示
generateTower（）関数自体は、TowerGeometry変数を定義することから始まります。これは、タワー内のすべての粒子の位置を含む3つのGeometryオブジェクトです。すべてのポイントを1つのジオメトリオブジェクト内で追跡することは、3つのjsが独立した粒子の範囲ではなく、各タワーオブジェクトとそのポイントを追跡するだけであるため、処理時間を抑えるのに役立ちます。コードの後半では、粒子にそれらのポイントを解釈できる3.pointcloudオブジェクトにジオメトリを提供します。

次に、粒子がタワー内で開始して仕上げられる場所を保存するパーティクルモーブメントと呼ばれるJavaScriptオブジェクトを設定し、それらがどれだけ離れているか（以前に渡された値）：

CurrentCoods変数は、タワー内の粒子の最後の位置を追跡します。 0,0,0で初期化します。タワーが配置されるstartingCoordsは、以前に関数呼び出しから解析されます。関数呼び出しから最初の座標がない場合は、CurrentCoordsと同じになるように初期化します。

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

次に、タワーのサイズを繰り返して、各粒子を作成します。 Yの現在の座標を設定して、速度値にiを掛けて増加します。私たちは上向きにしか動いていないので、私たちのx値とz値は彼らのスタートスポットに残ります。

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

この粒子に対して定義されたこれらの座標を使用して、TowerGeometryオブジェクトの頂点としてその粒子の位置を取り付けます。

<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>

粒子の位置付けが正しく設定されることを保証します。次に、この塔の粒子が粒子材料変数内でどのように見えるかを定義します。私たちの粒子は3つのポイントクラウドオブジェクト内に配置され、したがってスタイルをスタイルするために、3つを使用します。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>

• マップは、粒子に使用する画像を定義します。先に定義したパーティクレクチャーを渡します。
色が粒子を渡します（デフォルトは3.jsで0xffffffにデフォルトです）。
• ブレンディングは、粒子がシーンにどのように融合するかをセットアップします。 Three.AdditiveBlendingその背後にあるテクスチャの色を追加します。
透明性は、作業に透明性のレベルを必要とするため、ブレンドが発生する可能性があることを保証します。
• サイズは粒子のサイズです。
最後に、タワーの変数内のタワーのポイントクラウドを定義します。各粒子が表示されるポイントと、それぞれの上記で定義した材料を含むジオメトリを渡します。
TweetTowersコレクションオブジェクトにそのタワーを追加し、シーンにあるタワーの数を確認します。許可されている最大タワーよりも多くのタワーがある場合は、デバイスの負荷を減らすために最も古いタワーを隠します。パフォーマンスの問題がある場合は、MaxtowerCountを減らすと少し良くなる可能性があります！

コードを実行している

このデモをローカルに実行するには、ノードをインストールする必要があり、通常のコマンドを実行する必要があります。プロジェクトのすべての依存関係をインストールします：

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>

スマートフォンでこれをテストするには、スマートフォンが同じローカルネットワーク上にあることを確認し、コンピューターのIPアドレスを見つけるか、ngrokのようなトンネリングサービスを使用する必要があります（記事でNgrokの使用方法について説明しますどこからでもLocalHostにアクセスすると）。

どこかでノードサーバーをホストすることもできます。私は個人的にHerokuを使用しましたが、これは完全に個人的な好みです。

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

サーバーがどこかに稼働していたら、モバイル用のChromeを開いてアクセスしてください！ Googleの段ボールやその他の同様のヘッドセットを装着すると、30分ほど後にこのように見える場合は、次のようになります。

結論

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

これにより、ノード、socket.io、およびthree.jsを使用して、3D Web API対応の仮想現実視覚化を作成することの適切な概要が与えられるはずです。デモ自体をさらに開発し、より多くのキーワード、フィルターを追加し、より多くの粒子でスムーズに実行するなどします。たくさんの可能性があります！自由に出かけて、このデモからあなた自身の素晴らしい体験を作ってみてください！

この記事のデモからの独自のVRの視覚化をまとめる（または言及されたARの要素と組み合わせる）という課題を引き受ける場合は、コメントにメモを残すか、連絡を取りますTwitterで私（@thatpatrickguy）、ヘッドセットを取り出して見てみます！

3つのjsとノードでVRのTwitterストリームを視覚化することに関するよくある質問（FAQ） WebサイトにTwitterを設定するにはどうすればよいですか？

WebサイトのTwitterのセットアップには、いくつかのステップが含まれます。まず、Twitter開発者のサイトにTwitterアプリケーションを作成する必要があります。アプリケーションを作成した後、キーとトークンのセットを受け取ります。これらは、Twitterでアプリケーションを認証するために使用されます。その後、WebサイトにTwitter JavaScript APIをインストールする必要があります。このAPIを使用すると、WebサイトがTwitterと対話し、ツイートボタンや埋め込みツイートなどの機能を有効にします。 Webブラウザーにアニメーション化された3Dコンピューターグラフィックを作成および表示するために使用されるJavaScriptライブラリ。 WebGLを使用してグラフィックをレンダリングします。ライブラリは、カメラ、ライト、材料、ジオメトリなどの複雑な3Dシーンを簡単に作成できるオブジェクトとメソッドのセットを提供します。

node.jsで3つのjsを使用するには、node.jsパッケージマネージャーであるnpmを使用して「3つの」パッケージをインストールする必要があります。インストールしたら、node.jsスクリプトに「3つの」モジュールが必要になります。 3Dグラフィックスを作成するには、Three.js APIを使用して3Dグラフィックスを作成できます。VRのTwitterストリームを視覚化するには、VRのTwitterストリームを視覚化するには、いくつかのステップが含まれます。まず、Twitter APIを使用してTwitterストリームを設定する必要があります。これには、Twitterアプリケーションを作成し、Twitterアカウントで認証することが含まれます。ストリームがセットアップされたら、3.jsを使用して、ツイートの3D視覚化を作成できます。これには、3Dシーンの作成、ツイートを表すオブジェクトを追加し、新しいツイートが到着するにつれてシーンをリアルタイムで更新することが含まれます。

3つのグラフィックスライブラリと他の3Dグラフィックスライブラリの重要な違いは何ですか？

​​

3.jsは、3Dグラフィックを作成するためのシンプルなAPIを提供する高レベルのライブラリです。 WebGLを直接操作することの複雑さの多くを抽象化し、複雑な3Dシーンの作成を容易にします。他のライブラリはWebGLへのより低いレベルのアクセスを提供する場合がありますが、3Dグラフィックプログラミングをより深く理解する必要があります。 Twitterストリームでは、ネットワークの問題や誤った認証資格情報など、さまざまな理由でエラーが発生する可能性があります。 Twitter APIは、これらの問題を診断して修正するのに役立つエラーメッセージを提供します。コードでこれらのエラーを処理して、アプリケーションがスムーズに実行され続けるようにすることが重要です。さまざまなテクニック。これらには、3Dモデルの複雑さを減らし、テクスチャの最適化、抽選数の数の最小化が含まれます。 Three.js Inspectorなどのツールを使用して、アプリケーションのパフォーマンスを分析し、ボトルネックを識別することもできます。ツイートを表す3Dオブジェクトのプロパティを変更することにより、VRでのTwitterストリームの外観。これには、色、テクスチャ、サイズなどのプロパティが含まれます。また、さまざまな種類のライトとカメラを使用して、シーンの全体的なルックアンドフィールを変更することもできます。 VRのストリーミングでは、イベントリスナーを使用して、クリックやタッチなどのユーザーアクションを検出します。その後、これらのアクションに応じて3Dシーンを更新できます。たとえば、ユーザーがクリックしてツイートを選択したり、タッチジェスチャーを使用してシーンをナビゲートしたりできるようにします。 Webへの3.jsアプリケーションには、アプリケーションファイルのパッケージ化とWebサーバーにアップロードすることが含まれます。 Webpackなどのツールを使用してJavaScriptファイルをバンドルしたり、GitHubページやNetlifyなどのサービスをホストしたりすることができます。展開すると、アプリケーションはWebブラウザを持っている人なら誰でもアクセスできます。

以上が3.jsとノードでVRのTwitterストリームを視覚化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。