搜索

首页 >web前端 >js教程 >用三个和节点在VR中可视化Twitter流

用三个和节点在VR中可视化Twitter流

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原创
2025-02-19 12:48:11239浏览

用三个和节点在VR中可视化Twitter流

Twitter是一只美妙而丰富的野兽。我想将一些可视化的功能，三。及其VR功能与socket.io和节点结合在一起，以创建通过Twitter流生成的漂亮粒子世界。

>我以前已经讨论过在SitePoint文章中开发虚拟现实网络体验的所有基础知识，将VR带到网络上使用Google Cardboard和Thrive.js，因此，如果您是整个想法的新手，请先阅读该一个，然后再阅读一个，然后出现。后退。该演示使用相同的基础。

>我们将要构建的演示将观看现场Twitter流以获取关键字。当一个人在观看溪流时发推文时，它将带来一个闪亮的颗粒的“塔”，代表了推文的时间。特别是该演示将寻找“披萨”一词。你为什么要披萨？我正在寻找一个不像“ Bieber”那样频繁提及的术语，而是“ Boxcar Racing Hyenas”更频繁。简而言之，最好的术语是相对频繁的术语，在您正在观看时会出现它们，但并不是那么频繁，以至于它们每秒几百次。披萨是其中之一。

钥匙要点

>利用node.js和socket.io创建一个可以处理和发射Twitter流数据的实时服务器，从而增强了VR可视化的交互性。>
    集成了三个.js以构建一个3D VR环境，其中推文表示为唯一的粒子塔，根据推文长度的高度变化。
    • >通过设置最大粒子计数并在定义范围内安排粒子塔来优化VR中的用户体验，以防止性能滞后。
    • >通过使用用户配置文件颜色来自定义Tweet表示的视觉方面
  • >通过在Heroku等平台上部署节点服务器并使用Ngrok等隧道服务在各种设备上测试VR体验，请确保广泛的可访问性和实时功能。
  • 演示代码
  • 如果您渴望直接进入代码并尝试一下，则可以在GitHub上找到它。
>是否想在行动中尝试？我在这里托管了一个跑步版本：VR Twitter World。

我们的服务器代码

我们将首先查看我们的节点服务器代码。它将显示我们的Flat HTML，并且还可以作为socket.io服务器运行，该服务器将从Twitter中汲取数据流。

>

完整的服务器相对较短，看起来很短：

>我们的第一行使用Node Express Framework设置服务器。这是一个相当简单的设置，正在吸引我们所有的依赖项，并为我们准备访问服务器功能的应用变量。端口设置了我们希望服务器运行的哪个端口（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 Server上：>

>设置Twitter访问
<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身份验证键和访问令牌保留在自己的文件中的好方法。为了实时查看Twitter流，我们将使用一个名为Node-tweet-stream的NPM模块，该模块提供我们需要的所有功能。我们将Twitter访问的对象和所有关联功能分配给t变量，并传递我们的配置JSON，以证明我们可以访问它。

> 

io <span>= require('socket.io')(server),</span>
如果您没有任何访问Twitter API的Twitter键，请不要担心！您只需要在Twitter上注册一个应用程序即可。前往Twitter应用程序管理页面，使用您的Twitter凭据登录，然后单击“创建新应用”。

>拥有应用程序后，您可以通过单击将显示在应用程序管理页面上的“键和访问令牌”链接来获取键和访问令牌。如果找不到它，它将在以下网址：https：//apps.twitter.com/app/0000000/keys（用您的应用程序ID替换0000000）。

然后，在与index.html相同的级别上创建一个名为config.json的文件。在其中，使用您自己的应用程序的值添加以下内容：

其他服务器基础知识
config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>

>在我们的index.js文件中，我们将呼叫设置为服务器的根，以供load /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>

如果我们确实有错误，我们会在服务器的控制台中记录该错误，然后返回500错误：

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>

>检索我们的实时Twitter流

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>
>最后，我们设置了特定于Twitter的服务器功能。我们使用track（）函数来指定我们要在不断扩展的Twitter内容流中跟踪哪个关键字。

然后，我们设置了一个回调函数，以便任何时候运行节点 - tweet-stream模块，都以该关键字显示一条推文。如果看到了一个，我们将其记录在服务器的控制台日志中（这是可选的，可以在您愿意的情况下删除），然后将其作为socket.io事件发出到任何连接的客户端。

>如果我们的Twitter API出于任何原因有错误，则将登录到我们的服务器日志：> 
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});</span>

>与所有节点应用一样，我们的所有服务器依赖性和详细信息都存储在package.json中。如果您是node.js的新手，则可能需要对所有内容的含义进行一些阅读：package.json。

我们的前端代码

>我们的前端代码以Google Cardboard和Thrim.js文章的“ Bringing VR到Web”的相同设置开头 - 我们通过立体镜面效果显示的三个.js场景，使我们的场景成为VR视图。为了保持这一简短而甜美，我不会涵盖与该文章以前的演示相同的位。如果您不确定我在这里没有解释的任何内容，请查看以前的文章以获取信息。

>设置socket.io

与以前的基础相比，我们将添加的唯一新JS文件是我们的socket.io javascript文件。这是一个简单的衬里：

为了从socket.io访问功能，我们需要的只是将该功能分配给io变量，因为您会在我们的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>    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的三个对象中。这是一个容器对象，可让我们跟踪所有塔：

明显和特定材料是我们的变量，它将代表我们的颗粒的外观：

MaxtowerCount是我们想在场景中可见的最大塔楼数量 - 如果设定太高，我们可能会获得懒惰的体验。我将其设置为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>

>我们将明显的图像定义为一个称为粒子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通过我们的“披萨”流式传输的推文，它就会发出一个称为“ 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（）函数的调用，该函数将在我们的场景中添加塔，代表该推文。我们将其传递给四个值：

<span>var express = require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    port <span>= process.env.PORT || 80,</span>
  • >颜色是我们粒子的颜色。我们传递了用户个人资料背景的颜色。这使我们能够显示出不同的颜色，以代表有关披萨的不同饥饿的用户。>
    • 开始座位是放置塔的地方。我们希望将它们放在我们周围，因此我们将它们放在X和Z轴上的上方范围变量之间（应在-100至100之间）。如果我们将它们随机放置在Y上，它们将从地面更高和较低的不同级别开始，而不是像建筑物一样排列。我们绝对不想要它，因此我们确保它们都放置在0的位置。getRandomarBitrary（）是两个值之间的简单随机数生成器。
  • 速度定义了我们的粒子最终放置的距离（或塔架上塔的速度上升的速度）。
  • 大小是我们塔高多少颗粒。假设最大Twitter长度为140个字符。
  • 显示塔
>我们的generateTeTower（）函数本身首先定义高层变量。这是一个三个几何对象，它将包含塔中我们所有颗粒的位置。将跟踪的所有点保持在一个几何对象中可以帮助保持处理时间的降低，因为三个。JS只需要跟踪每个塔对象及其点，而不是一系列独立的粒子。在代码的稍后，我们将提供几何形状，以将这些点解释到我们的粒子中的三个。

然后，我们设置了一个称为颗粒的JavaScript对象，该对象存储了我们的粒子将在塔中启动和完成的位置，以及它们的相距多远（我们之前通过的值）：

>

> CurrentCoords变量跟踪塔中粒子的最后位置。我们将其初始化为0,0,0。较早的功能调用将放置将放置塔的起点座。如果我们没有来自函数调用的任何启动坐标，我们将它们初始化为与CurrentCoord相同：
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>
>在为该粒子定义的那些坐标中，我们将粒子的位置连接为高层测定对象中的顶点： 

<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>
确保我们对粒子的定位的设置的设置正确。接下来，我们定义该塔中的颗粒在颗粒变量中的外观。我们的粒子将被放置在三个点云对象中，因此将其造型，我们将使用三个coptcloudmaterial材料：> 

<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定义了我们将用于粒子的图像，我们通过了前面定义的特定时间表。
    颜色以我们希望粒子为颜色的颜色传递（默认为triph.js中的0xffffff）。
    • 混合设置了粒子如何融入场景的方式。 three.additive -glighend在其后面的纹理上添加了纹理的颜色。
  • 透明确保可以进行混合，因为它需要一定的透明度工作。>
    • 大小是我们粒子的大小。
  • 最后，我们在塔的变量中定义了塔的点云。我们传递包含希望每个粒子出现的点的几何形状，以及上面为它们定义的材料。
  • >我们将该塔添加到我们的TweetTowers Collection对象中，然后检查以查看现场有多少塔。如果我们的塔超过允许的塔，我们将隐藏最古老的塔，以减少设备上的负载。如果您有任何性能问题，那么如果您减少MaxtowerCount！
  • 运行我们的代码
    •
>要在本地运行此演示，您需要安装节点，并且需要运行通常的命令。安装项目的所有依赖项：

然后运行它：
io <span>= require('socket.io')(server),</span>

为了在智能手机上进行测试，您要么需要确保智能手机在同一本地网络上并找到计算机的IP地址，要么使用Ngrok等隧道服务（我介绍了如何在文章中使用Ngrok从任何地方访问本地主机）

> 
config <span>= require('./config.json'),
</span><span>Twitter = require('node-tweet-stream'),
</span>t <span>= new Twitter(config),</span>
>您也可以在某个地方托管节点服务器。我个人使用了Heroku，但这完全是个人的偏好。

>

>将服务器设置在某个地方并运行后，打开Chrome以供移动设备访问！戴上您的Google纸板或其他类似耳机，您应该看到一种经历，如果您抬头看，则在半分钟左右后看起来像这样：

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

>这应该为您提供了使用Node，socket.io和Trix.js创建启用3D Web API的虚拟现实可视化的良好概述。可以进一步开发演示本身，增加更多的关键字，过滤器，使其与更多粒子等等更光滑。有很多潜力！随时出去那里，尝试通过此演示来获得自己的出色体验！
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendFile(__dirname + '/public/index.html');
</span><span>});</span>

>我还在Sitepoint上还有其他使用类似概念的演示，而是将它们带入了增强的现实体验。如果您有兴趣，请使用JavaScript和Google Cardboard过滤现实，探索从您的智能手机中摄取的相机并将过滤器添加到它的相机，并在浏览器中增强现实，awe.js探索一路探索并通过将元素扩大到您的视野中。三分和敬畏的强大组合！

>

如果您确实承担了本文中从演示中进行自己的VR可视化的挑战（或将其与提到的AR示例中的元素结合在一起），请在评论中留下注释或与之联系我在Twitter上（@thatpatrickguy），我会拿出头戴式耳机，看看！

经常询问的问题（常见问题解答），以在VR中可视化twitter流的三个.js和node

>

我如何为网站设置Twitter？

>为网站设置Twitter涉及几个步骤。首先，您需要在Twitter开发人员的网站上创建一个Twitter应用程序。创建应用程序后，您将收到一组键和令牌。这些用于用Twitter来验证您的应用程序。然后，您需要在网站上安装Twitter JavaScript API。此API允许您的网站与Twitter进行交互，从而启用了诸如Tweet按钮和嵌入式推文之类的功能。

什么是three.js，它如何工作？

three.js是跨浏览器用于在Web浏览器中创建和显示动画3D计算机图形的JavaScript库。它使用WebGL渲染图形。该库提供了一组对象和方法，使创建复杂的3D场景变得更容易，包括相机，灯光，材料和几何形状。

>

如何在node.js上使用three.js？

>要在node.js上使用trix.js，您需要使用node.js package manager安装“三”软件包。安装后，您可以在node.js脚本中需要“三个”模块。然后，您可以使用三个.js api创建3D图形。

>如何在VR？

​​

中可视化Twitter流中的Twitter流>在VR中可视化的Twitter流涉及几个步骤。首先，您需要使用Twitter API设置Twitter流。这涉及创建一个Twitter应用程序并使用您的Twitter帐户对其进行认证。设置流后，您可以使用Trix.js创建推文的3D可视化。这涉及创建一个3D场景，添加对象以表示推文，并随着新推文到达时实时更新场景。>

three.js是一个高级库，为创建3D图形提供了简单的API。它抽象了直接与WebGL合作的许多复杂性，从而更容易创建复杂的3D场景。其他库可能会提供对WebGL的更低级访问权限，但需要更深入地了解3D图形编程。 Twitter流，出于多种原因可能发生错误，例如网络问题或不正确的身份验证凭证。 Twitter API提供的错误消息可以帮助您诊断和解决这些问题。处理代码中的这些错误很重要，以确保您的应用程序继续顺利运行。

>如何优化我的three.js应用程序的性能？

>优化三。js应用程序涉及多种技术。其中包括降低3D型号的复杂性，优化纹理，并最大程度地减少抽奖呼叫的数量。您还可以使用诸如Three.js Inspertor之类的工具来分析应用程序的性能并确定瓶颈。

>

>我如何自定义在VR？

​​

中的Twitter流的外观，您可以自定义通过修改表示推文的3D对象的属性，在VR中的Twitter流的外观。这包括颜色，纹理和大小等属性。您还可以使用不同类型的灯光和相机来改变场景的整体外观。 VR中的流涉及使用事件侦听器检测用户操作，例如点击或触摸。然后，您可以根据这些操作更新3D场景。例如，您可以允许用户单击推文，或使用触摸手势浏览场景。

>如何将我的三个.js应用程序部署到网络？ Web上的三分应用程序涉及包装您的应用程序文件并将其上传到Web服务器。您可以使用WebPack之类的工具来捆绑JavaScript文件，以及诸如GitHub页面或Netlify之类的服务来托管您的应用程序。部署后，使用Web浏览器的任何人都可以访问您的应用程序。

>

以上是用三个和节点在VR中可视化Twitter流的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json chrome html npm webpack express Static Object define if count for select include require try Directory Error register using public Length finally Event Collection map JS console number function this display position background github idea https ar vr webgl everything Access word Foundation Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp下一篇：Creating an Accessible Breakout Game Using Web Audio and SVG

相关文章

查看更多