Three.js Echarts结合教程

Echarts结合 ·Combine Echarts· ▶ 在线运行案例

• 案例合集：三维可视化功能案例（threehub.cn）
• 开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
• 400个案例代码:网盘链接

你将学到什么

• glTF/FBX/OBJ 外部模型加载
• 相机交互控制器
• CSS2D/3D 标签渲染
• ECharts 与三维融合
• requestAnimationFrame 渲染循环

效果说明

本案例演示Echarts结合效果：ECharts 图表与 Three.js 场景同屏联动展示；核心用到 OrbitControls、glTF/Draco、ECharts。建议先打开文首在线案例查看动态画面，再对照下方源码逐步理解。

核心概念

• Loader异步加载模型；glTF 返回gltf.scene，加载后注意scale与坐标系。Draco 需配置DRACOLoader。
• OrbitControls轨道旋转缩放；开enableDamping时每帧需controls.update()。
• DOM 元素叠加在 3D 坐标上，适合信息面板（注意与 WebGL 深度关系）。
• 二维图表/飞线与 Cesium/Three 场景叠加或纹理映射。

实现步骤

• 搭建 Scene / Camera / Renderer 与 OrbitControls
• Loader 异步加载模型/纹理资源
• rAF 循环中 update 并 render

• 代码要点

  import * as THREE from 'three'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import * as echarts from 'echarts'
  const DOM = document.getElementById('box')
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, DOM.clientWidth / DOM.clientHeight, 0.1, 10000)
  camera.position.set(50, 90, 300)
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
  renderer.setSize(DOM.clientWidth, DOM.clientHeight)
  DOM.appendChild(renderer.domElement)
  scene.add(new THREE.AmbientLight(0xffffff, 3))
  new OrbitControls(camera, renderer.domElement)
  const css3DRender = setCss3DRenderer(DOM)
  new GLTFLoader().load(FILE_HOST + "files/model/Fox.glb", gltf => scene.add(gltf.scene))
  animate()
  function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
  css3DRender.render(scene, camera) }
  window.onresize = () => {
  renderer.setSize(box.clientWidth, box.clientHeight)
  camera.aspect = box.clientWidth / box.clientHeight
  camera.updateProjectionMatrix()
  css3DRender.resize()
  }
  /css3d 渲染/ function setCss3DRenderer(DOM) {
  const css3DRender = new CSS3DRenderer()
  css3DRender.resize = () => {
  css3DRender.setSize(DOM.clientWidth, DOM.clientHeight)
  css3DRender.domElement.style.zIndex = 0
  css3DRender.domElement.style.position = 'relative'
  css3DRender.domElement.style.top = -DOM.clientHeight + 'px'
  css3DRender.domElement.style.height = DOM.clientHeight + 'px'
  css3DRender.domElement.style.width = DOM.clientWidth + 'px'
  css3DRender.domElement.style.pointerEvents = 'none'
  }
  css3DRender.resize()
  DOM.appendChild(css3DRender.domElement)
  return css3DRender
  }
  /图表 ----------------------------------------------------------------------/
  const container = document.createElement("div") container.style.width = "300px" container.style.height = "200px" const myChart = echarts.init(container)
  myChart.setOption({ graphic: { elements: [ { type: 'text', left: 'center', top: 'center', style: { text: 'Echarts', fontSize: 80, fontWeight: 'bold', lineDash: [0, 200], lineDashOffset: 0, fill: 'transparent', stroke: '#fff', lineWidth: 1 }, keyframeAnimation: { duration: 3000, loop: true, keyframes: [ { percent: 0.7, style: { fill: 'transparent', lineDashOffset: 200, lineDash: [200, 0] } }, { // Stop for a while. percent: 0.8, style: { fill: 'transparent' } }, { percent: 1, style: { fill: 'black' } } ] } } ] } })
  const css3DObject = new CSS3DObject(container) css3DObject.position.set(0, 130, 0) scene.add(css3DObject)
  const container2 = document.createElement("div") container2.style.width = "300px" container2.style.height = "300px" const myChart2 = echarts.init(container2)
  myChart2.setOption({ xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {} } ] })
  const css3DObject2 = new CSS3DObject(container2) css3DObject2.position.set(0, -80, 0) scene.add(css3DObject2)

  完整源码：GitHub

  小结

  • 本文提供Echarts结合完整 Three.js 源码与在线 Demo，建议先运行案例再改 uniform/参数做二次实验
  • 更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库