3.js 및 노드로 VR에서 트위터 스트림 시각화
- 尊渡假赌尊渡假赌尊渡假赌원래의
- 2025-02-19 12:48:11239검색
우리의 서버 코드
<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>
index.js 파일을 따라 서버의 루트에 호출을 설정하여 /public/index.html : 를로드합니다.
io <span>= require('socket.io')(server),</span>
우리의 프론트 엔드 코드
<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으로 설정했습니다
<pre class="brush:php;toolbar:false"><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></pre>
우리의 init 함수
<too> init () 함수 내에 새로운 것이 너무 많지 않습니다. 주로 이전 기사에서 설명한대로 VR 카메라와 컨트롤을 설정합니다. 새로운 비트는 끝에 있습니다. <p>
<our> 우리는 Particletexture 이미지를 공개 폴더 내에 가지고있는 Particle-New.png라는 PNG로 정의합니다.
</our></p>
<init> 우리는 트위터 컨테이너를 장면에 추가하여 init () 함수를 완료합니다. 장면에서 탑을 직접 추가하는 것에 대해 걱정할 필요가 없습니다. TweetTowers 객체에 직접 추가합니다.
<pre class="brush:php;toolbar:false"><span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').createServer(app),
</span> port <span>= process.env.PORT || 80,</span></pre>
<tw> 트윗에 반응합니다
<that> 서버가“피자”키워드로 트위터를 통해 스트리밍하는 트윗을 찾으면“트윗”이라는 이벤트가 나옵니다. 우리의 클라이언트 측 JavaScript는 이제 해당 이벤트를보고 응답합니다.<pre class="brush:php;toolbar:false"><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></pre>
<is> 응답 코드는 그 트윗을 나타내는 장면에 타워를 추가 할 generateTower ()라는 함수로 호출됩니다. 우리는 그것을 네 가지 값으로 전달합니다 :
<p>
</p>
<color> 색상은 우리 입자의 색입니다. 우리는 사용자의 프로필 배경의 색상을 통과합니다. 이를 통해 피자에 대해 트윗하는 다른 배고픈 사용자를 나타 내기 위해 다른 색상을 보여줄 수 있습니다.
<s> STARTINGCOORDS는 타워가 배치 될 곳입니다. 우리는 이것들이 우리 주위에 배치되기를 원하기 때문에 X와 Z 축에서 위의 범위 변수 (-100에서 100 사이) 사이에 배치합니다. 우리가 Y에 무작위로 배치하면 건물처럼 줄을 서서 대신지면에서 더 높아지는 수준에서 시작합니다. 우리는 확실히 그것을 원하지 않기 때문에 우리는 모두 0의 y 위치에 배치되도록합니다. getrandomarbitrary ()는 두 값 사이의 간단한 랜덤 번호 생성기입니다. <pre class="brush:php;toolbar:false"><span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').createServer(app),
</span> port <span>= process.env.PORT || 80,</span></pre>.
<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>
<pre class="brush:php;toolbar:false"><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></pre>
입자의 위치가 올바르게 설정되도록하는 <our>. 다음으로, 우리는이 타워의 입자가 입자 물질 변수 내에서 어떻게 보일지 정의합니다. 우리의 입자는 3.pointcloud 객체 내에 배치되어 스타일을 지정하기 위해 세 가지를 사용합니다.
<p>
</p>
<the> 맵은 입자에 사용할 이미지를 정의하고, 앞에서 정의한 입자 텍스트를 전달합니다. <pre class="brush:php;toolbar:false"><span>var express = require('express'),
</span> app <span>= express(),
</span> server <span>= require('http').createServer(app),
</span> port <span>= process.env.PORT || 80,</span></pre>.
<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> 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> Three.js는 3D 그래픽을 만들기위한 간단한 API를 제공하는 고급 라이브러리입니다. 그것은 WebGL과 직접 작업하는 많은 복잡성을 추상화하여 복잡한 3D 장면을보다 쉽게 만들 수 있습니다. 다른 라이브러리는 WebGL에 대한보다 낮은 수준의 액세스를 제공 할 수 있지만 3D 그래픽 프로그래밍에 대한 더 깊은 이해가 필요합니다. </h3> 트위터 스트림을 설정할 때 오류를 처리 할 수있는 방법은 무엇입니까? 트위터 스트림, 네트워크 문제 또는 잘못된 인증 자격 증명과 같은 다양한 이유로 오류가 발생할 수 있습니다. Twitter API는 이러한 문제를 진단하고 수정하는 데 도움이되는 오류 메시지를 제공합니다. 응용 프로그램이 계속 실행되도록 코드에서 이러한 오류를 처리하는 것이 중요합니다. <p> Three.js 응용 프로그램의 성능을 최적화하려면 어떻게해야합니까? </p> <h3> Three.js 응용 프로그램을 최적화하십시오. 다양한 기술. 여기에는 3D 모델의 복잡성을 줄이고, 텍스처 최적화 및 추첨 호출 수를 최소화하는 것이 포함됩니다. Three.js Inspector와 같은 도구를 사용하여 응용 프로그램의 성능을 분석하고 병목 현상을 식별 할 수 있습니다. </h3> VR에서 내 트위터 스트림의 모양을 사용자 정의 할 수 있습니까? <p> </p> 사용자 정의 할 수 있습니다. 트윗을 나타내는 3D 객체의 속성을 수정하여 VR에서 트위터 스트림의 모양. 여기에는 색상, 질감 및 크기와 같은 속성이 포함됩니다. 다른 유형의 조명과 카메라를 사용하여 장면의 전반적인 모양과 느낌을 변경할 수 있습니다. <h3> 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
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으로 문의하세요.