3D 관련 컴포넌트

Bar3D

Bar3D는 ECharts-GL에서 데이터를 3차원 막대 형태로 시각화하는 대표적인 3D 차트 유형입니다.

Bar3DSeries.js

Bar3DSeries는 3D 막대 차트의 데이터 모델을 정의합니다.

ECharts의 SeriesModel을 확장하여 다음과 같은 기능을 제공합니다.

// Bar3DSeries 클래스 구조 var Bar3DSeries = echarts.SeriesModel.extend({ type: 'series.bar3D', dependencies: ['grid3D'], // 기본 옵션 설정 defaultOption: { // 좌표계 설정 coordinateSystem: 'grid3D', grid3DIndex: 0, // 막대 스타일 설정 bevelSize: 0, bevelSmoothness: 2, barSize: [1, 1], minHeight: 0, // 시각적 효과 설정 shading: 'color', realisticMaterial: { roughness: 0.5, metalness: 0 }, // 기타 옵션... }, // 데이터 초기화 메서드 getInitialData: function (option, ecModel) { // 데이터 처리 로직... return data; } });

Bar3DView.js

Bar3DView는 3D 막대 차트의 시각적 표현을 담당합니다.

ECharts의 ChartView를 확장하여 다음과 같은 기능을 제공합니다:

// Bar3DView 클래스 구조 var Bar3DView = echarts.ChartView.extend({ type: 'bar3D', // 렌더링 메서드 render: function (seriesModel, ecModel, api) { // 메시 생성 및 설정 // 재질 설정 // 라벨 처리 // 애니메이션 설정 }, // 이벤트 처리 메서드 _initHandler: function (seriesModel, api) { // 마우스 이벤트 처리 // 하이라이트 효과 } });

기하학적 모델 생성 과정

Bar3D의 도형은 Bars3DGeometry 클래스에서 생성합니다.

데이터 준비: 시리즈 데이터를 기하 데이터로 변환할 준비

정점 계산: 각 막대의 8개 정점(꼭지점) 계산

면 생성: 6개의 면(사각형)을 구성하는 12개의 삼각형 생성

법선 계산: 조명 효과를 위한 법선 벡터 계산

텍스처 좌표 설정: 텍스처 매핑을 위한 UV 좌표 설정

인덱스 버퍼 생성: 정점 인덱스를 이용한 삼각형 구성

// 막대 추가 메서드 예시 addBar: function (x, y, z, sx, sy, sz, color, index) { // 정점 계산 var vertices = [ [x, y, z], [x + sx, y, z], [x + sx, y, z + sz], [x, y, z + sz], [x, y + sy, z], [x + sx, y + sy, z], [x + sx, y + sy, z + sz], [x, y + sy, z + sz] ]; // 면 구성 (삼각형) // 법선 계산 // 색상 설정 // 인덱스 버퍼 업데이트 }

3D 좌표계

Grid3D

3차원 직교 좌표계로, x, y, z 축을 기반으로 데이터를 표현합니다.

// Grid3D 구조 var Grid3D = function (gridModel, ecModel, api) { // 축 생성 this.axisPointerEnabled = true; this.dimensions = ['x', 'y', 'z']; // 뷰 설정 this.viewGL = null; // 변환 행렬 this.model = null; this._viewTransform = new Matrix4(); // 축 객체 this._axisHelper = new cartesian3DAxisHelper(); }; Grid3D.prototype = { // 좌표 변환 메서드 dataToPoint: function (data, out) { // 데이터 좌표를 3D 공간 좌표로 변환 }, // 초기화 메서드 update: function (ecModel, api) { // 축 업데이트 // 뷰 설정 // 카메라 설정 } };