3.js 및 노드로 VR에서 트위터 스트림 시각화

트위터는 훌륭하고 정보가 풍부한 짐승입니다. 나는 시각화의 힘 중 일부, 3.js 및 VR 기능을 Socket.io 및 노드와 결합하여 트위터 스트림을 통해 생성 된 예쁜 입자의 세계를 생성하고 싶었습니다.

. 이전에 itepoint 기사에서 가상 현실 웹 경험을 개발하는 모든 기본 사항에 대해 Google Cardboard 및 Three.js를 사용하여 VR을 웹에 가져 오는 모든 기본 사항에 대해 논의했습니다. 따라서이 전체 아이디어를 처음 접한다면 - 먼저 읽고 오세요. 뒤쪽에. 이 데모는 동일한 기초를 사용합니다.

우리가 빌드 할 데모는 키워드를 위해 라이브 트위터 스트림을 볼 것입니다. 스트림을보고있는 동안 트윗을 할 때 트윗의 시간을 나타내는 빛나는 입자의“타워”를 불러 일으킬 것입니다. 이 데모는 특히 "피자"라는 단어의 언급을 찾을 것입니다. 왜 피자를 묻습니까? 나는 "Bieber"만큼 자주 언급되지 않았지만 "Boxcar Racing Hyenas"보다 자주 언급되지 않은 용어를 찾고있었습니다. 요컨대, 가장 좋은 용어는 당신이 보는 동안 나타날 정도로 상대적으로 빈번한 것이지만, 너무 자주 방문하여 수백 초에 겪지는 않습니다. 피자 중 하나입니다.

키 테이크 아웃

Node.js 및 Socket.io를 사용하여 Twitter 스트림 데이터를 처리하고 방출 할 수있는 실시간 서버를 생성하여 VR 시각화의 상호 작용을 향상시킵니다. <.> 3.js를 통합하여 트윗이 고유 한 입자 타워로 표시되는 3D VR 환경을 구성하여 트윗 길이에 따라 높이가 다양합니다. 최대 입자 수를 설정하고 성능 지연을 방지하기 위해 정의 된 범위 내에서 입자 타워를 배열하여 VR의 사용자 경험을 최적화합니다. 입자에 사용자 프로필 색상을 사용하고 3.js에서 사용할 수있는 텍스처 및 블렌딩 옵션을 사용하여 트윗 표현의 시각적 측면을 사용자 정의하십시오. Heroku와 같은 플랫폼에 노드 서버를 배포하고 Ngrok과 같은 터널링 서비스를 사용하여 다양한 장치에서 VR 경험을 테스트하여 광범위한 접근성 및 실시간 기능을 보장하십시오.

데모 코드 코드에 똑바로 들어가서 시험 해보고 싶다면 github에서 찾을 수 있습니다. 실제로 시도하고 싶습니까? 여기에 실행중인 버전이 있습니다 : VR Twitter World.

우리의 서버 코드 우리는 노드 서버 코드를 살펴 보는 것으로 시작합니다. Flat HTML을 표시하고 Twitter에서 데이터 스트림을 가져 오는 Socket.io 서버로도 작동합니다. 전체 서버는 비교적 짧고 그렇게 보입니다.

첫 번째 줄은 노드 익스프레스 프레임 워크를 사용하여 서버를 설정합니다. 모든 종속성을 끌어 내고 서버 기능에 액세스 할 수 있도록 앱 변수를 준비하는 간단한 설정입니다. 포트는 서버가 실행되기를 원하는 포트를 설정합니다 (Process.env.port는 서버 변수입니다.

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

그런 다음 Socket.io 서버 기능을 동시에 시작하는 동안 IO 변수를 설정하여 위에서 설정 한 Express 서버에 첨부합니다.

트위터 액세스 설정 구성 변수는 응용 프로그램의 Twitter 인증 키와 자체 파일에 액세스 토큰을 유지하는 좋은 방법입니다. Twitter 스트림을 실시간으로 보려면 필요한 모든 기능을 제공하는 Node-Tweet-Stream이라는 NPM 모듈을 사용합니다. 우리는 트위터 액세스에 대한 객체와 모든 관련 기능을 t 변수에 할당하여 구성 json을 통과하여 액세스 할 수 있음을 증명합니다.

트위터 API에 액세스 할 트위터 키가 없다면 두려워하지 마십시오! 트위터에 앱을 등록하면됩니다. Twitter 응용 프로그램 관리 페이지로 이동하여 Twitter 자격 증명으로 로그인 한 다음 "새 앱 생성"을 클릭하십시오. 앱이 있으면 앱 관리 페이지에 나타날 "키 및 액세스 토큰"링크를 클릭하여 키와 액세스 토큰을 얻을 수 있습니다. 찾을 수없는 경우 https://apps.twitter.com/app/0000000/keys의 URL에 있습니다 (앱의 ID로 0000000을 교체). 그런 다음 config.json이라는 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>

기타 서버 기본 사항

index.js 파일을 따라 서버의 루트에 호출을 설정하여 /public/index.html : 를로드합니다.

우리는 또한 서버의 공개 디렉토리 내의 다른 정적 파일을 제공합니다.

오류가 있으면 서버 콘솔에 해당 오류를 기록하고 500 오류를 반환합니다.

다음 줄은 위의 모든 설정으로 서버를 실행합니다.

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

라이브 트위터 스트림을 검색 마지막으로, 우리는 트위터 특정 서버 기능을 설정했습니다. 우리는 Track () 함수를 사용하여 트위터 확장 컨텐츠 스트림에서 추적하려는 키워드를 지정합니다. 그런 다음 노드-트윗 스트림 모듈이 해당 키워드와 트윗을 발견 할 때마다 실행하기 위해 콜백 함수를 설정합니다. 하나가 보이면 서버의 콘솔 로그에 로그인 한 다음 (선택 사항이므로 원하는 경우 제거 할 수 있음) 연결된 클라이언트에게 소켓으로 트윗을 방출합니다.

트위터 API에 어떤 이유로 든 오류가 있으면 서버 로그에 로그인됩니다.

모든 서버 종속성 및 세부 사항은 모든 노드 앱과 마찬가지로 package.json 내에 저장됩니다. Node.js를 처음 접한다면 모든 것이 의미하는 바에 대해 조금 읽고 싶을 수도 있습니다. 우리의 프론트 엔드 코드 <code> 우리의 프론트 엔드 코드는 Google Cardboard와 Three.js 기사를 사용하여 VR을 가져 오는 VR에서 웹 로의 동일한 설정으로 시작하여 입체 효과를 통해 표시되는 3.js 장면으로 장면을 VR보기로 가져옵니다. 이 짧고 달콤하게 유지하기 위해 해당 기사의 이전 데모와 동일한 비트를 다루지 않습니다. 여기서 설명하지 않는 것이 확실하지 않으면 이전 기사를 확인하십시오. <h2> <ocket ocket> SOCKET.IO 설정 <j> 이전 기초와 비교하여 추가 할 새로운 JS 파일은 Socket.io JavaScript 파일입니다. 간단한 하나의 라이너입니다 : </j></ocket> </h2> <p> <access> socket.io에서 기능에 액세스하려면 index.html 파일에서 조금 더 아래로 볼 수 있듯이 해당 기능을 IO 변수에 할당하는 것입니다. </access></p> <tow> 우리의 탑 준비 그런 다음“타워”(기본적으로 트윗을 나타내는 수직 입자 세트)에 대한 변수를 설정합니다. 모든 타워는 TweetTowers라는 3.Object3d 객체 내에 저장됩니다. 이것은 우리가 모든 탑을 추적 할 수있는 컨테이너 객체입니다. <h3> 입자 텍스트와 파티브 해제는 입자가 어떻게 보이는지를 나타내는 변수입니다. </h3> <c> maxtowerCount는 우리가 장면에서 볼 수있는 최대 타워 수입니다. 이것이 너무 높으면 지연된 경험으로 끝날 수 있습니다. 이를 통해 최대 입자가 약 백만 정도가되므로 6000으로 설정했습니다. 내 의견으로는 합리적인 숫자! <p> </p> <large> 범위는 뷰어 주변의 영역이 얼마나 큰지이 탑을 배치하기를 원합니다. 타워는 장면에서 임의의 반점에 배치되므로 모두 멀리 떨어져 있는지를 제한합니다. 사용자에게 더 가까운 경험이라는 것을 알았습니다. 그들이 사용자와 더 멀리 떨어져 있다면, 수천 개의 입자에 수천 개의 입자가 있음에도 불구하고 많은 것이없는 것처럼 보입니다. 100으로 설정했습니다 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;var express = require('express'), &lt;/span&gt; app &lt;span&gt;= express(), &lt;/span&gt; server &lt;span&gt;= require('http').createServer(app), &lt;/span&gt; port &lt;span&gt;= process.env.PORT || 80, &lt;/span&gt; io &lt;span&gt;= require('socket.io')(server), &lt;/span&gt; config &lt;span&gt;= require('./config.json'), &lt;/span&gt; &lt;span&gt;Twitter = require('node-tweet-stream'), &lt;/span&gt; t &lt;span&gt;= new Twitter(config); &lt;/span&gt; app&lt;span&gt;.get('/', function(request&lt;span&gt;, response&lt;/span&gt;) { &lt;/span&gt; response&lt;span&gt;.sendFile(__dirname + '/public/index.html'); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; app&lt;span&gt;.get(&lt;span&gt;/&lt;span&gt;^(.+)$&lt;/span&gt;/&lt;/span&gt;, function(req&lt;span&gt;, res&lt;/span&gt;) { &lt;/span&gt; res&lt;span&gt;.sendFile(__dirname + '/public/' + req.params[0]); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; app&lt;span&gt;.use(function(err&lt;span&gt;, req, res, next&lt;/span&gt;) { &lt;/span&gt; &lt;span&gt;console.error(err.stack); &lt;/span&gt; res&lt;span&gt;.status(500).send('Something broke!'); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; server&lt;span&gt;.listen(port, function() { &lt;/span&gt; &lt;span&gt;console.log('Listening on ' + port); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; t&lt;span&gt;.track('pizza'); &lt;/span&gt;t&lt;span&gt;.on('tweet', function(tweet){ &lt;/span&gt; &lt;span&gt;console.log('Roger that. Tweets incoming!'); &lt;/span&gt; &lt;span&gt;console.log(tweet); &lt;/span&gt; io&lt;span&gt;.emit('tweet', tweet); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; t&lt;span&gt;.on('error', function (err) { &lt;/span&gt; &lt;span&gt;console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err); &lt;/span&gt;&lt;span&gt;});&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 우리의 init 함수 <too> init () 함수 내에 새로운 것이 너무 많지 않습니다. 주로 이전 기사에서 설명한대로 VR 카메라와 컨트롤을 설정합니다. 새로운 비트는 끝에 있습니다. <p> <our> 우리는 Particletexture 이미지를 공개 폴더 내에 가지고있는 Particle-New.png라는 PNG로 정의합니다. </our></p> <init> 우리는 트위터 컨테이너를 장면에 추가하여 init () 함수를 완료합니다. 장면에서 탑을 직접 추가하는 것에 대해 걱정할 필요가 없습니다. TweetTowers 객체에 직접 추가합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;var express = require('express'), &lt;/span&gt; app &lt;span&gt;= express(), &lt;/span&gt; server &lt;span&gt;= require('http').createServer(app), &lt;/span&gt; port &lt;span&gt;= process.env.PORT || 80,&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <tw> 트윗에 반응합니다 <that> 서버가“피자”키워드로 트위터를 통해 스트리밍하는 트윗을 찾으면“트윗”이라는 이벤트가 나옵니다. 우리의 클라이언트 측 JavaScript는 이제 해당 이벤트를보고 응답합니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;var express = require('express'), &lt;/span&gt; app &lt;span&gt;= express(), &lt;/span&gt; server &lt;span&gt;= require('http').createServer(app), &lt;/span&gt; port &lt;span&gt;= process.env.PORT || 80, &lt;/span&gt; io &lt;span&gt;= require('socket.io')(server), &lt;/span&gt; config &lt;span&gt;= require('./config.json'), &lt;/span&gt; &lt;span&gt;Twitter = require('node-tweet-stream'), &lt;/span&gt; t &lt;span&gt;= new Twitter(config); &lt;/span&gt; app&lt;span&gt;.get('/', function(request&lt;span&gt;, response&lt;/span&gt;) { &lt;/span&gt; response&lt;span&gt;.sendFile(__dirname + '/public/index.html'); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; app&lt;span&gt;.get(&lt;span&gt;/&lt;span&gt;^(.+)$&lt;/span&gt;/&lt;/span&gt;, function(req&lt;span&gt;, res&lt;/span&gt;) { &lt;/span&gt; res&lt;span&gt;.sendFile(__dirname + '/public/' + req.params[0]); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; app&lt;span&gt;.use(function(err&lt;span&gt;, req, res, next&lt;/span&gt;) { &lt;/span&gt; &lt;span&gt;console.error(err.stack); &lt;/span&gt; res&lt;span&gt;.status(500).send('Something broke!'); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; server&lt;span&gt;.listen(port, function() { &lt;/span&gt; &lt;span&gt;console.log('Listening on ' + port); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; t&lt;span&gt;.track('pizza'); &lt;/span&gt;t&lt;span&gt;.on('tweet', function(tweet){ &lt;/span&gt; &lt;span&gt;console.log('Roger that. Tweets incoming!'); &lt;/span&gt; &lt;span&gt;console.log(tweet); &lt;/span&gt; io&lt;span&gt;.emit('tweet', tweet); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; t&lt;span&gt;.on('error', function (err) { &lt;/span&gt; &lt;span&gt;console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err); &lt;/span&gt;&lt;span&gt;});&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <is> 응답 코드는 그 트윗을 나타내는 장면에 타워를 추가 할 generateTower ()라는 함수로 호출됩니다. 우리는 그것을 네 가지 값으로 전달합니다 : <p> </p> <color> 색상은 우리 입자의 색입니다. 우리는 사용자의 프로필 배경의 색상을 통과합니다. 이를 통해 피자에 대해 트윗하는 다른 배고픈 사용자를 나타 내기 위해 다른 색상을 보여줄 수 있습니다. <s> STARTINGCOORDS는 타워가 배치 될 곳입니다. 우리는 이것들이 우리 주위에 배치되기를 원하기 때문에 X와 Z 축에서 위의 범위 변수 (-100에서 100 사이) 사이에 배치합니다. 우리가 Y에 무작위로 배치하면 건물처럼 줄을 서서 대신지면에서 더 높아지는 수준에서 시작합니다. 우리는 확실히 그것을 원하지 않기 때문에 우리는 모두 0의 y 위치에 배치되도록합니다. getrandomarbitrary ()는 두 값 사이의 간단한 랜덤 번호 생성기입니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;var express = require('express'), &lt;/span&gt; app &lt;span&gt;= express(), &lt;/span&gt; server &lt;span&gt;= require('http').createServer(app), &lt;/span&gt; port &lt;span&gt;= process.env.PORT || 80,&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>. <how> 속도는 입자가 얼마나 멀리 떨어져 있는지 (또는 타워가 위쪽으로 생기면 상승하는 속도)를 정의합니다. <many> 크기는 탑이 얼마나 많은 입자 수입니다. 최대 트위터 길이가 140 자의 문자라고 가정하면 평균 백분율입니다. . <ul> <tower> 타워 표시 <et> GenerateTower () 함수 자체는 TowerGeometry 변수를 정의하여 시작합니다. 이것은 타워 내의 모든 입자의 위치를 ​​포함하는 3. Geometry 객체입니다. 하나의 지오메트리 객체 내에서 추적을 유지하면 3.js는 다양한 독립 입자가 아닌 각 타워 객체와 그 지점을 추적하면 시간을 낮추는 데 도움이 될 수 있습니다. 코드의 뒷부분에서, 우리는 그 지점을 입자로 해석 할 수있는 3.pointcloud 객체에 지오메트리를 제공 할 것입니다. <li> <up> 그런 다음 우리는 입자가 타워 내에서 시작하고 마무리 할 곳을 저장하는 ParticleMovements라는 JavaScript 객체를 설정하고 얼마나 멀리 떨어져 있을지 (이전에 통과 한 값) : . </up> </li> <ord> CurrentCoords 변수는 타워 내 입자의 마지막 위치를 추적합니다. 우리는 그것을 0,0,0으로 초기화합니다. 타워가 배치 될 출발 코드는 이전 기능 호출에서 구문 분석됩니다. 함수 호출에서 코디네이트를 시작하지 않으면 CurrentCoords와 동일하게 초기화합니다. <li> <erate> 우리는 각 입자를 만들기 위해 타워의 크기를 반복합니다. 우리는 현재의 좌표가 우리의 속도 값을 곱한 속도 값을 i에 곱하도록 설정했습니다. X와 Z 값은 우리가 위쪽으로 만 움직일 때 시작 지점에 남아 있습니다. </erate> </li> <li> 이 입자에 대해 정의 된 코디네이션의 경우, 우리는 타워 지구 객체에서 해당 입자의 위치를 ​​정점으로 부착합니다. </li> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;var express = require('express'), &lt;/span&gt; app &lt;span&gt;= express(), &lt;/span&gt; server &lt;span&gt;= require('http').createServer(app), &lt;/span&gt; port &lt;span&gt;= process.env.PORT || 80, &lt;/span&gt; io &lt;span&gt;= require('socket.io')(server), &lt;/span&gt; config &lt;span&gt;= require('./config.json'), &lt;/span&gt; &lt;span&gt;Twitter = require('node-tweet-stream'), &lt;/span&gt; t &lt;span&gt;= new Twitter(config); &lt;/span&gt; app&lt;span&gt;.get('/', function(request&lt;span&gt;, response&lt;/span&gt;) { &lt;/span&gt; response&lt;span&gt;.sendFile(__dirname + '/public/index.html'); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; app&lt;span&gt;.get(&lt;span&gt;/&lt;span&gt;^(.+)$&lt;/span&gt;/&lt;/span&gt;, function(req&lt;span&gt;, res&lt;/span&gt;) { &lt;/span&gt; res&lt;span&gt;.sendFile(__dirname + '/public/' + req.params[0]); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; app&lt;span&gt;.use(function(err&lt;span&gt;, req, res, next&lt;/span&gt;) { &lt;/span&gt; &lt;span&gt;console.error(err.stack); &lt;/span&gt; res&lt;span&gt;.status(500).send('Something broke!'); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; server&lt;span&gt;.listen(port, function() { &lt;/span&gt; &lt;span&gt;console.log('Listening on ' + port); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; t&lt;span&gt;.track('pizza'); &lt;/span&gt;t&lt;span&gt;.on('tweet', function(tweet){ &lt;/span&gt; &lt;span&gt;console.log('Roger that. Tweets incoming!'); &lt;/span&gt; &lt;span&gt;console.log(tweet); &lt;/span&gt; io&lt;span&gt;.emit('tweet', tweet); &lt;/span&gt;&lt;span&gt;}); &lt;/span&gt; t&lt;span&gt;.on('error', function (err) { &lt;/span&gt; &lt;span&gt;console.log('Brace yourself! We are goin doooowwwwwwnnnnnnnn! ', err); &lt;/span&gt;&lt;span&gt;});&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 입자의 위치가 올바르게 설정되도록하는 <our>. 다음으로, 우리는이 타워의 입자가 입자 물질 변수 내에서 어떻게 보일지 정의합니다. 우리의 입자는 3.pointcloud 객체 내에 배치되어 스타일을 지정하기 위해 세 가지를 사용합니다. <p> </p> <the> 맵은 입자에 사용할 이미지를 정의하고, 앞에서 정의한 입자 텍스트를 전달합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;var express = require('express'), &lt;/span&gt; app &lt;span&gt;= express(), &lt;/span&gt; server &lt;span&gt;= require('http').createServer(app), &lt;/span&gt; port &lt;span&gt;= process.env.PORT || 80,&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>. <in in> 색상이 색상으로 통과합니다. <s> 블렌딩은 입자가 장면에 어떻게 혼합되는지 설정합니다. 3. additivebeldend는 텍스처의 색상을 뒤에있는 것에 추가합니다. <ens> 투명한 수준의 투명성이 필요하므로 블렌딩이 발생할 수 있도록합니다. <size> 크기는 입자의 크기입니다 <ul> <def> 마지막으로, 우리는 탑의 변수 내에서 타워의 포인트 구름을 정의합니다. 우리는 각 입자가 나타나기를 원하는 포인트와 각각에 대해 위에서 정의한 재료를 포함하는 지오메트리를 통과합니다. <li> <tower> 우리는 그 타워를 트윗 컬렉션 객체에 추가 한 다음 장면에 얼마나 많은 탑이 있는지 확인합니다. 허용되는 최대 탑보다 더 많은 타워가있는 경우 가장 오래된 타워를 숨겨 장치의 부하를 줄입니다. 성능 문제가 있으면 maxtowerCount를 줄이면 조금 더 나아질 가능성이 있습니다! </tower> </li>. <li> 코드 실행 이 데모를 로컬로 실행하려면 노드를 설치해야하며 일반적인 명령을 실행해야합니다. 프로젝트의 모든 종속성을 설치하십시오 </li> <: :> 그런 다음 실행하십시오 : <li> <test> 스마트 폰에서 이것을 테스트하려면 스마트 폰이 동일한 로컬 네트워크에 있는지 확인하고 컴퓨터의 IP 주소를 찾거나 NGROK와 같은 터널링 서비스를 사용해야합니다 (기사에서 ngrok을 사용하는 방법을 다루는 방법 어디서나 LocalHost에 액세스 할 때) <host> 어딘가에 노드 서버를 호스팅 할 수도 있습니다. 나는 개인적으로 Heroku를 사용했지만 이것은 완전히 개인적인 취향입니다. </host></test> </li> <got> 일단 서버가 어딘가에 실행되면 Chrome을 모바일로 열고 방문하십시오! Google Cardboard 또는 기타 유사한 헤드셋을 착용하면 반 1 분 후에 찾아 보면 다음과 같이 보이는 경험을 보게됩니다. <li> </li> 결론 <given> 이것은 Node, Socket.io 및 Three.js를 사용하여 3D 웹 API 활성화 가상 현실 시각화를 생성하는 것에 대한 좋은 개요를 제공해야합니다. 데모 자체는 더 많은 키워드, 필터를 추가하여 더 많은 입자 등으로 더 매끄럽게 작동시킬 수 있습니다. 많은 잠재력이 있습니다! 자유롭게 나가서이 데모에서 자신만의 환상적인 경험을하려고 노력하십시오! <li><other> 나는 또한 Sitepoint에서 유사한 개념을 사용하지만 증강 현실 경험을 제공하는 다른 데모도 있습니다. 관심이 있으시면 JavaScript 및 Google Cardboard를 사용하여 현실을 필터링하고 스마트 폰에서 카메라를 가져 와서 필터를 추가하는 것을 탐색하고 Awe.js가있는 브라우저에서 현실을 증강시킵니다. 3.js와 awe.js의 강력한 조합! <p> 이 기사의 데모에서 자신의 VR 시각화를 수립 해야하는 도전 (또는 언급 된 AR 예제의 요소와 결합). 주석에 메모를 남기거나 연락을 취하는 데 어려움을 겪는 경우 트위터에서 나 (@ThatpatrickGuy), 헤드셋을 꺼내서 살펴 보겠습니다! <questions> 3.js 및 노드 가 자주 묻는 질문 (FAQ) <set> 웹 사이트 용 트위터를 설정하려면 어떻게해야합니까? </set></questions></p> <p> 웹 사이트를 위해 트위터를 설정하는 데 몇 단계가 필요합니다. 먼저 Twitter 개발자 사이트에서 Twitter 응용 프로그램을 작성해야합니다. 응용 프로그램을 만들면 키와 토큰 세트가 수신됩니다. 이들은 트위터로 응용 프로그램을 인증하는 데 사용됩니다. 그런 다음 웹 사이트에 Twitter JavaScript API를 설치해야합니다. 이 API는 귀하의 웹 사이트가 트위터와 상호 작용하여 트윗 버튼 및 임베디드 트윗과 같은 기능을 활성화 할 수 있습니다. </p> 3.js는 무엇이며 어떻게 작동합니까? <h2 id="Three-js는-크로스-브라우저입니다-웹-브라우저에서-애니메이션-D-컴퓨터-그래픽을-작성하고-표시하는-데-사용되는-JavaScript-라이브러리-WebGL을-사용하여-그래픽을-렌더링합니다-라이브러리는-카메라-조명-재료-및-형상을-포함한-복잡한-D-장면을보다-쉽게-만들-수있는-일련의-객체-및-메소드를-제공합니다"> Three.js는 크로스 브라우저입니다. 웹 브라우저에서 애니메이션 3D 컴퓨터 그래픽을 작성하고 표시하는 데 사용되는 JavaScript 라이브러리. WebGL을 사용하여 그래픽을 렌더링합니다. 라이브러리는 카메라, 조명, 재료 및 형상을 포함한 복잡한 3D 장면을보다 쉽게 ​​만들 수있는 일련의 객체 및 메소드를 제공합니다. </h2> Node.js에서 3.js를 어떻게 사용할 수 있습니까? <h3>. <.> node.js에서 3.js를 사용하려면 node.js 패키지 관리자 인 NPM을 사용하여 '3'패키지를 설치해야합니다. 설치되면 Node.js 스크립트에 '3'모듈이 필요할 수 있습니다. 그런 다음 Three.js API를 사용하여 3D 그래픽을 만들 수 있습니다. </.> </h3> VR에서 Twitter 스트림을 시각화하려면 어떻게됩니까? <p> </p> VR에서 Twitter 스트림을 시각화하려면 여러 단계가 포함됩니다. 먼저 Twitter API를 사용하여 Twitter 스트림을 설정해야합니다. 여기에는 트위터 응용 프로그램을 작성하고 트위터 계정으로 인증하는 것이 포함됩니다. 스트림이 설정되면 3.js를 사용하여 트윗의 3D 시각화를 만들 수 있습니다. 여기에는 3D 장면을 만들고, 트윗을 나타내는 개체 추가 및 새로운 트윗이 도착하면 실시간으로 장면을 업데이트하는 것이 포함됩니다.<key> 3.js와 기타 3D 그래픽 라이브러리의 주요 차이점은 무엇입니까? <h3 id="Three-js는-D-그래픽을-만들기위한-간단한-API를-제공하는-고급-라이브러리입니다-그것은-WebGL과-직접-작업하는-많은-복잡성을-추상화하여-복잡한-D-장면을보다-쉽게-만들-수-있습니다-다른-라이브러리는-WebGL에-대한보다-낮은-수준의-액세스를-제공-할-수-있지만-D-그래픽-프로그래밍에-대한-더-깊은-이해가-필요합니다"> Three.js는 3D 그래픽을 만들기위한 간단한 API를 제공하는 고급 라이브러리입니다. 그것은 WebGL과 직접 작업하는 많은 복잡성을 추상화하여 복잡한 3D 장면을보다 쉽게 ​​만들 수 있습니다. 다른 라이브러리는 WebGL에 대한보다 낮은 수준의 액세스를 제공 할 수 있지만 3D 그래픽 프로그래밍에 대한 더 깊은 이해가 필요합니다. </h3> 트위터 스트림을 설정할 때 오류를 처리 할 수있는 방법은 무엇입니까? 트위터 스트림, 네트워크 문제 또는 잘못된 인증 자격 증명과 같은 다양한 이유로 오류가 발생할 수 있습니다. Twitter API는 이러한 문제를 진단하고 수정하는 데 도움이되는 오류 메시지를 제공합니다. 응용 프로그램이 계속 실행되도록 코드에서 이러한 오류를 처리하는 것이 중요합니다. <p> Three.js 응용 프로그램의 성능을 최적화하려면 어떻게해야합니까? </p> <h3 id="Three-js-응용-프로그램을-최적화하십시오-다양한-기술-여기에는-D-모델의-복잡성을-줄이고-텍스처-최적화-및-추첨-호출-수를-최소화하는-것이-포함됩니다-Three-js-Inspector와-같은-도구를-사용하여-응용-프로그램의-성능을-분석하고-병목-현상을-식별-할-수-있습니다"> Three.js 응용 프로그램을 최적화하십시오. 다양한 기술. 여기에는 3D 모델의 복잡성을 줄이고, 텍스처 최적화 및 추첨 호출 수를 최소화하는 것이 포함됩니다. Three.js Inspector와 같은 도구를 사용하여 응용 프로그램의 성능을 분석하고 병목 현상을 식별 할 수 있습니다. </h3> VR에서 내 트위터 스트림의 모양을 사용자 정의 할 수 있습니까? <p> </p> 사용자 정의 할 수 있습니다. 트윗을 나타내는 3D 객체의 속성을 수정하여 VR에서 트위터 스트림의 모양. 여기에는 색상, 질감 및 크기와 같은 속성이 포함됩니다. 다른 유형의 조명과 카메라를 사용하여 장면의 전반적인 모양과 느낌을 변경할 수 있습니다. <h3 id="VR에서-트위터-스트림에-상호-작용을-추가-할-수-있습니까"> VR에서 트위터 스트림에 상호 작용을 추가 할 수 있습니까? </h3> <p> 트위터에 상호 작용을 추가하십시오. VR의 스트림에는 이벤트 리스너를 사용하여 클릭 또는 터치와 같은 사용자 작업을 감지합니다. 그런 다음 이러한 작업에 응답하여 3D 장면을 업데이트 할 수 있습니다. 예를 들어, 사용자가 트윗을 클릭하여 트윗을 선택하거나 터치 제스처를 사용하여 장면을 탐색 할 수 있습니다. </p> Three.js 응용 프로그램을 웹에 배포하려면 어떻게합니까? </key></other></li></given></got></:></def> </ul></size></ens></s></in></the></our></ord></et></tower> </ul></many></how></s></color></is></that></tw></init></too></large></c></tow>

위 내용은 3.js 및 노드로 VR에서 트위터 스트림 시각화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!