Three.js Echarts结合教程

Echarts结合 ·Combine Echarts· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么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 与 OrbitControlsLoader 异步加载模型/纹理资源rAF 循环中 update 并 render代码要点import * as THREE from threeimport { 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 echartsconst 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.clientHeightcamera.updateProjectionMatrix()css3DRender.resize()}/css3d 渲染/ function setCss3DRenderer(DOM) {const css3DRender new CSS3DRenderer()css3DRender.resize () {css3DRender.setSize(DOM.clientWidth, DOM.clientHeight)css3DRender.domElement.style.zIndex 0css3DRender.domElement.style.position relativecss3DRender.domElement.style.top -DOM.clientHeight pxcss3DRender.domElement.style.height DOM.clientHeight pxcss3DRender.domElement.style.width DOM.clientWidth pxcss3DRender.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 开源仓库