Backbone.js 및 three.js - 캔버스가있는 MVC

Question

3D 공간에서 대화 형 데이터 시각화를 수행하는 작은 웹 앱을 개발할 계획입니다.

가장 넓은 브라우저 호환성을 위해 WebGL, 캔버스 또는 SVG를 사용하여 동일한 장면을 렌더링 할 수 있으므로 three.js가 최상의 선택입니다.

이상적으로, 나는 멋진 MVC 레이어를 제공하고 아약스 쓰기에 지루한 일을 피하기 위해 backbone.js를 사용하고 싶다. 그러나 내가 그걸로 멀리 가기 전에 누군가 경험/팁/단어가 있는지 궁금해했다. 그 일을하려고 애쓰는 데

캔버스 또는 WebGL을 가정하면 backbone.view가 three.js 모델을 지원하기 위해 매우 쉽게 추상화 된 것처럼 보입니다. 렌더링 함수는 오버라이드 (override) 될 예정입니다. 나는 캔버스에 간단한 청취자를 붙일 수 있고, 그 다음에 우리는 몇 가지 3 가지 방법을 사용할 수 있습니다. 이벤트를 발생시키는 특정 모델을 끌어 내기 위해 속임수를 씁니다 (가장 어려운 작업 인 것처럼 보입니다). 백본 모델 및 컬렉션은 내 API로 제대로 작동합니다 (필자는 생각합니다). 컨트롤러는 아마도 조금 더 어려울 지 모르지만 카메라 위치 등을 저장하여 사용할 수도 있습니다.

SVG 렌더링에서는 모든 요소가 DOM에 포함되어있어 분명히 단순화되었지만 장면에 1,000 개 이상의 개체가있는 경우에도 SVG가 좋은 옵션인지 궁금합니다. 누구나 SVG에서 큰 장면 그래프를 경험 한 적이 있습니까?

렌더링이나 백본과 유사한 다른 라이브러리가 더 좋은 방법일까요? 이 문제에 대한 제안은 열려 있습니다.

Answer 1

당신이 백본을 사용하는 방법에 대한 당신의 평가는 꽤 옳았고, 추가 보너스도 있다고 생각합니다. 당신은 "three.js 속임수를 사용하여 이벤트를 발생시키는 특정 모델을 끌어내는 것에 대해 언급했습니다. (가장 어려운 작업 인 것처럼 보입니다") - 모델 사용에 혼란 스러울 지 모르겠지만 뷰 렌더링이 트리거되면 바인딩 된 컬렉션/모델이 해당 렌더링 메소드에 전달되므로 조회가 필요하지 않습니다. 그리고 Underscore의 _.bindAll()을 통해 render 메소드 (또는 뷰의 모든 메소드)를 _.bindAll()이 실행되는 모든 이벤트에 바인드 할 수 있습니다. 그리고 당신은 상기 모델/컬렉션으로부터 당신 자신의 커스텀 이벤트를 모두 트리거 할 수 있습니다. 가능성은 꽤 무한합니다. 그리고 예, 렌더링 방법은 아무 것도 될 수 없으므로 그 공간에서 three.js와의 상호 작용이 완벽해야합니다. 그것은 "and"s입니다!

당신이하고 싶은 일은 분명히 가능하고, 정말 재미 있고, 백본에 대한 훌륭한 응용 프로그램입니다.