塔の準(zhǔn)備

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

ParticleTextureとParticleMaterialは、粒子がどのように見(jiàn)えるかを表す変數(shù)です。

MaxtowerCountは、私たちのシーンで見(jiàn)えるタワーの最大數(shù)です。これが高すぎると、遅れた體験になります。最大粒子を約100萬(wàn)に設(shè)定するため、6000に設(shè)定しました。私の意見(jiàn)では合理的な數(shù)！

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>

に設(shè)定します

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

particleletexture畫(huà)像を、パブリックフォルダー內(nèi)にあるParticle-new.pngと呼ばれるPNGであると定義しています。

TweetTowersコンテナをシーンに追加することにより、init（）関數(shù)を終了します。私たちのシーンでこれを使用すると、タワーのいずれかをシーンに直接追加することを心配する必要はありません。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>

応答コードは、そのツイートを表すシーンにタワーを追加するGenerateTower（）と呼ばれる関數(shù)への呼び出しです。 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は、タワーが配置される場(chǎng)所です。これらを私たちの周りに配置することを望んでいるので、x軸とz軸の上の範(fàn)囲変數(shù)（これは-100?100の間に終わるはずです）の間に配置します。それらをyにランダムに配置すると、建物のように並ぶのではなく、地面からより高いレベルと低いレベルで開(kāi)始します。私たちは間違いなくそれを望んでいないので、それらがすべて0のy位置に配置されるようにします。getRandomarbitrary（）は、2つの値の間の単純な亂數(shù)ジェネレーターです。
• 速度は、粒子がどれだけ離れて配置されるかを定義します（または、上向きにアニメーション化した場(chǎng)合、タワーが上昇する速度）。
サイズは、私たちの塔がどれだけ高い粒子になりますか。 140文字の最大Twitterの長(zhǎng)さを仮定して、平均してパーセンテージになります。
タワーの表示
generateTower（）関數(shù)自體は、TowerGeometry変數(shù)を定義することから始まります。これは、タワー內(nèi)のすべての粒子の位置を含む3つのGeometryオブジェクトです。すべてのポイントを1つのジオメトリオブジェクト內(nèi)で追跡することは、3つのjsが獨(dú)立した粒子の範(fàn)囲ではなく、各タワーオブジェクトとそのポイントを追跡するだけであるため、処理時(shí)間を抑えるのに役立ちます。コードの後半では、粒子にそれらのポイントを解釈できる3.pointcloudオブジェクトにジオメトリを提供します。

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

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

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

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

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

• マップは、粒子に使用する畫(huà)像を定義します。先に定義したパーティクレクチャーを渡します。
色が粒子を渡します（デフォルトは3.jsで0xffffffにデフォルトです）。
• ブレンディングは、粒子がシーンにどのように融合するかをセットアップします。 Three.AdditiveBlendingその背後にあるテクスチャの色を追加します。
透明性は、作業(yè)に透明性のレベルを必要とするため、ブレンドが発生する可能性があることを保証します。
• サイズは粒子のサイズです。
最後に、タワーの変數(shù)內(nèi)のタワーのポイントクラウドを定義します。各粒子が表示されるポイントと、それぞれの上記で定義した材料を含むジオメトリを渡します。
TweetTowersコレクションオブジェクトにそのタワーを追加し、シーンにあるタワーの數(shù)を確認(rèn)します。許可されている最大タワーよりも多くのタワーがある場(chǎng)合は、デバイスの負(fù)荷を減らすために最も古いタワーを隠します。パフォーマンスの問(wèn)題がある場(chǎng)合は、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>

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

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