---
code: "3D-03"
id: "c-surface"
tab: "spatial"
kind: "core"
title: "Surface3D · 3D 표면"
library: "ECharts-GL"
deps: ["echarts@5", "echarts-gl"]
load: "high"
pasteKind: "echarts-option"
family: "spatial-3d"
dataShape: "3D coordinates, surfaces or paths"
tasks: ["inspect spatial form", "rotate perspective", "show structure", "inspect shape in 3D"]
tags: ["3d", "spatial", "webgl", "surface3d", "표면"]
gallery: "https://graph.heal7.com/#3D-03"
js: "/sku/3D-03.js"
---

# [3D-03] Surface3D · 3D 표면

> AI 붙여넣기 카드. 갤러리 런타임(`main.js`)이 아니라 이 파일을 가져와라.

## 언제 가져가나
2변수 함수 지형도 — 두 축 조합의 적합도 표면.

**응용** 시간×난이도 학습효율, 금리×기간 수익곡면.

## 데이터 모양
- family: `spatial-3d`
- dataShape: 3D coordinates, surfaces or paths
- tasks: inspect spatial form, rotate perspective, show structure, inspect shape in 3D
- tags: 3d, spatial, webgl, surface3d, 표면


## 의존
echarts@5, echarts-gl · load `high` · library `ECharts-GL`

## 붙여넣는 법
1. echarts 5.x 로드
2. 아래 코드를 그대로 붙인다
3. `T` 토큰이 없으면 파일 상단 defaultT를 쓴다

```js
const T = {
  "bg": "transparent",
  "fg": "#ece8f5",
  "sub": "#a59bbd",
  "grid": "rgba(255,255,255,.08)",
  "gold": "#e8c069",
  "royal": "#6b8cff",
  "rose": "#e07a9f",
  "teal": "#6dd2c4",
  "plum": "#b487e8"
};
const el = document.querySelector('#chart');
const chart = echarts.init(el);
chart.setOption({
  backgroundColor:T.bg, visualMap:{show:false, dimension:2, min:-1, max:1, inRange:{color:['#1f1640','#6b8cff','#b487e8','#e8c069']}},
  xAxis3D:{type:'value', axisLabel:{color:T.sub,fontSize:9}}, yAxis3D:{type:'value', axisLabel:{color:T.sub,fontSize:9}}, zAxis3D:{type:'value', axisLabel:{color:T.sub,fontSize:9}},
  grid3D:{viewControl:{autoRotate:true, autoRotateSpeed:5}, axisLine:{lineStyle:{color:T.grid}}, splitLine:{lineStyle:{color:T.grid}}},
  series:[{type:'surface', wireframe:{show:false}, shading:'realistic',
    parametric:true, parametricEquation:{
      u:{min:-Math.PI,max:Math.PI,step:Math.PI/24},
      v:{min:-Math.PI,max:Math.PI,step:Math.PI/24},
      x:(u,v)=>u, y:(u,v)=>v, z:(u,v)=>Math.sin(u)*Math.cos(v)
    }
  }]
});
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 737-748
- gallery: https://graph.heal7.com/#3D-03
- raw js: https://graph.heal7.com/sku/3D-03.js

```js
() => reg('c-surface', {
  backgroundColor:T.bg, visualMap:{show:false, dimension:2, min:-1, max:1, inRange:{color:['#1f1640','#6b8cff','#b487e8','#e8c069']}},
  xAxis3D:{type:'value', axisLabel:{color:T.sub,fontSize:9}}, yAxis3D:{type:'value', axisLabel:{color:T.sub,fontSize:9}}, zAxis3D:{type:'value', axisLabel:{color:T.sub,fontSize:9}},
  grid3D:{viewControl:{autoRotate:true, autoRotateSpeed:5}, axisLine:{lineStyle:{color:T.grid}}, splitLine:{lineStyle:{color:T.grid}}},
  series:[{type:'surface', wireframe:{show:false}, shading:'realistic',
    parametric:true, parametricEquation:{
      u:{min:-Math.PI,max:Math.PI,step:Math.PI/24},
      v:{min:-Math.PI,max:Math.PI,step:Math.PI/24},
      x:(u,v)=>u, y:(u,v)=>v, z:(u,v)=>Math.sin(u)*Math.cos(v)
    }
  }]
})
```