数据可视化原理与实例课件-三维数据可视化-地图

柱状图柱状图饼图饼图地球地球力导向图力导向图图表目录地球球体几何对象材质：地理情况图坐标+连线+运动轨迹渲染文字THREE.SphereGeometry(100,32,32);THREE.SphereGeometry(100,32,32);radius:Floatradius:FloatwidthSegments:IntegerwidthSegments:IntegerheightSegments:IntegerheightSegments:Integer球体https:/threejs.org/docs/#api/en/geometries/SphereGeometry地形图地形图地球材质凹凸贴图凹凸贴图透明度贴图透明度贴图大气层大气层地理地球绘制曲线：获取定点var positions=;var positions=;positions.push(obj0.position);positions.push(obj0.position);var midVector=obj0.position.clone().add(obj1.position.clone();var midVector=obj0.position.clone().add(obj1.position.clone();if(midVector.length()radius*1.5)if(midVector.length()radius*1.5)midVector.multiplyScalar(0.8);midVector.multiplyScalar(0.8);positions.push(midVector);positions.push(midVector);positions.push(obj1.position);positions.push(obj1.position);var curve=new THREE.CatmullRomCurve3(positions);var curve=new THREE.CatmullRomCurve3(positions);起始点 中间点 结束点绘制曲线var curve=new THREE.CatmullRomCurve3(positions);var curve=new THREE.CatmullRomCurve3(positions);var points=curve.getPoints(50);var points=curve.getPoints(50);var geometry=new THREE.BufferGeometry().setFromPoints(points);var geometry=new THREE.BufferGeometry().setFromPoints(points);var material=new THREE.LineBasicMaterial(color:0 x2376DD );var material=new THREE.LineBasicMaterial(color:0 x2376DD );var curveObject=new THREE.Line(geometry,material);var curveObject=new THREE.Line(geometry,material);scene.add(curveObject);scene.add(curveObject);https:/threejs.org/docs/#api/en/extras/curves/CatmullRomCurve3运动点：几何对象var pointGeometry=new THREE.SphereGeometry(1,20,20);var pointGeometry=new THREE.SphereGeometry(1,20,20);var pointMaterial=new THREE.MeshBasicMaterial(color:0 xFFCF71);var pointMaterial=new THREE.MeshBasicMaterial(color:0 xFFCF71);var pointMesh=new THREE.Mesh(pointGeometry,pointMaterial);var pointMesh=new THREE.Mesh(pointGeometry,pointMaterial);点动画循环index=0;index=0;function pointAnimate()function pointAnimate()index+=0.001;index+=0.001;if(index=1)if(index=1)index=0;index=0;pointMesh.position.copy(curve.getPointAt(index);pointMesh.position.copy(curve.getPointAt(index);requestAnimationFrame(pointAnimate);requestAnimationFrame(pointAnimate);pointAnimate();pointAnimate();0-1 THREE.CatmullRomCurve3 下一帧调用canvascanvas作为粒子作为粒子SpriteSprite纹理纹理context.fontcontext.font：设置字体样式：设置字体样式content.fillTextcontent.fillText：文本：文本渲染文字地理地球力导向图几何体：点和边自定义图数据结构布局算法：物理引擎拖拽控制器