2013-10-05 3 views
0

새로운 예 :실생활 예를 들어 당신이 여기에서 볼 수있는 멀티 스크린 목적

webgl_multiple_canvases_circle

webgl_multiple_canvases_complex

webgl_multiple_canvases_grid

은 정말 멋진, 그들은 심지어 구글에 대해 이야기 액체 은하 프로젝트 : liquidGalaxy

그래서 기본적으로 여러 화면의 필요성에 맞추기 위해이 앱을 어떻게 적용할까요? 4 개의 1920x1080 디스플레이가 모두 이미지의 멋진 부분을 보여줍니다.

기본적인 개념 증명으로 끝납니다. 여기서는 단순히 새 창 화면 콘텐츠/캔버스를 표시하고 node.js 서버 및 socket.io를 통해 마우스 위치를 동기화합니다.

다른 크기의 창을 표시 할 때까지 원활하게 작동합니다.

실패한 경우를 참조하십시오.

기록을 남기려면 전체 앱이 작동하지 않습니다 (화면이 다른 컴퓨터에서 작성 될 준비가 아직되어 있지 않음). 먼저이 오프셋 문제를 해결하고 싶습니다.

감사합니다. 당신이 밖으로 시도하거나 기여하려는 경우

아, 그리고,이 프로젝트는 여기에 있습니다 : 다시

Screeny

Here, you can see the scene is a bit distorded and the window height are different

Here, you can see the scene is a ok and the window height are the same

감사합니다!

+0

하나의 기계에 높이가 다른 캔버스를 넣기 위해 three.js 복잡한 예를 수정할 수 있습니까? 그게 효과가있는 것처럼 보입니다. 다음은 그 예입니다. http://greggman.com/downloads/examples/three.js/examples/webgl_multiple_canvases_complex_different_heights.html – gman

+0

특별한 일을하고 계십니까? 여기에있는 이미지 : [테두리가있는 이미지] (http://i.imgur.com/KCkP3pE.png)는 카메라 뷰가 수직으로 바뀌면서 테두리가 움직이는 것을 보여줍니다? 또한 socket.io에 의해 카메라 축이 동기화 된 프로젝트를 시도 했습니까? – gabrielstuff

+0

알았어. 예를 들어 두 번 생각해. 모든 예제는 하나의 창만을 기반으로하므로 windowHalfX 및 windowHalfY 값을 사용할 수 없습니다. 그것에 종사. 감사합니다. – gabrielstuff

답변

0

괜찮 았어, 이건 논리적이지, windowHalfX 값은 각 창으로 전달되어야한다. 이제 완벽하게 작동하고 코드가 업데이트됩니다. 당신의 발언에 감사드립니다!

해결 방법은 현재 창의 크기를 mouseMove 이벤트로 옮겨서 이동이 발생한 창을 기반으로 모든 창을 업데이트하는 것입니다.

분리 된 컴퓨터의 완전한 작동 예제를 만들기 위해 더 깊이 들어가야합니다.

+0

만약 나 였다면 마우스 움직임이 아닌 카메라의 정보 (번역, 회전, fov)를 전송할 것입니다. – gman

+0

글쎄, 최종 사용에 의존, 난 그냥 멀티 화면/영역 렌더링이 실제 생활에서 사용할 수 있는지 확인하려고합니다.기본적으로, 당신은 옳습니다. 대화 형이 아닌 경우와 단순한 장면 렌더링 카메라 위치 동기화가 가장 좋습니다. 컨 피규 레이터 준비가 완료되면 알려 드리겠습니다. – gabrielstuff