网站流量的作用,广告在什么网站做,龙岗网站建设费用明细,开源wordpress小程序源码前言
技术调研#xff1a;做底代码平台的3d行政区组件 写的demo
效果图#xff1a;
实现的功能项
地标、打点、飞线、three.js 3d 中国地图的一些基础配置补充 geo中国地图文件获取
其他项:包 dependencies: {d3: ^7.9.0,d3-…前言
技术调研做底代码平台的3d行政区组件 写的demo
效果图
实现的功能项
地标、打点、飞线、three.js 3d 中国地图的一些基础配置补充 geo中国地图文件获取
其他项:包 dependencies: {d3: ^7.9.0,d3-geo: ^3.1.0,three: ^0.142.0,vue: ^3.3.4},源码
以下代码所需的图片可以在iconfont官网进行搜索这里不做提供
script setup
import * as THREE from three;import { OrbitControls } from three/examples/jsm/controls/OrbitControls;
import Stats from three/examples/jsm/libs/stats.module.js;
import { FontLoader } from three/examples/jsm/loaders/FontLoader.js;
import { TextGeometry } from three/examples/jsm/geometries/TextGeometry.js;import { Line2 } from three/examples/jsm/lines/Line2.js;
import { LineMaterial } from three/examples/jsm/lines/LineMaterial.js;
import { LineGeometry } from three/examples/jsm/lines/LineGeometry.js;import * as d3 from d3;// 渲染性能监测工具
const stats new Stats();
document.body.appendChild(stats.dom);// 初始化场景
const scene new THREE.Scene();// 创建透视相机
const camera new THREE.PerspectiveCamera(90,window.innerHeight / window.innerHeight,0.1,100000
);
// 设置相机位置
camera.position.set(0, 0, 120);
// 更新摄像头
camera.aspect window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
scene.add(camera);// // 加入辅助轴帮助我们查看3维坐标轴
// const axesHelper new THREE.AxesHelper(10);
// scene.add(axesHelper);// 添加环境光和直射光
const light new THREE.AmbientLight(0xffffff, 100); // soft white light
scene.add(light);
const directionalLight new THREE.DirectionalLight(0xffffff, 100);
scene.add(directionalLight);// 初始化渲染器
const renderer new THREE.WebGLRenderer({ alpha: false, antialias: true });
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到body
document.body.appendChild(renderer.domElement);// 初始化控制器
const controls new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping true;// 监听屏幕大小改变的变化动态设置渲染的尺寸
window.addEventListener(resize, () {// 更新摄像头camera.aspect window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比例renderer.setPixelRatio(window.devicePixelRatio);
});const canvas renderer.domElement;
// 构造生成三维物体对象
const map new THREE.Object3D();// 地图geojson的json文件得到的坐标点是经纬度数据需要把它转为坐标数据
// 这里使用插件d3 geoMercator()方法转换
// .center: 以北京经纬度坐标(116.23, 39.54)为中心点
// .translate 移动地图位置
const projection d3.geoMercator().center([103.8, 35.0]).translate([0, 0, 0]);
const fileLoader new THREE.FileLoader();
fileLoader.load(../public/中华人民共和国.geojson, (data) {const loader new FontLoader();loader.load(Alibaba PuHuiTi_Regular.json, (font) {const chinaJsonData JSON.parse(data);handleData(chinaJsonData, font);})
})/*** 处理地图数据* param {Object} jsonData */
function handleData(jsonData, font) {// createPlane()// 全国信息const features jsonData.features;features.forEach((feature) {// 单个省份 对象const province new THREE.Object3D();// 地址province.propertiesName feature.properties.name;const coordinates feature.geometry.coordinates;const color #ffffff; // if (feature.geometry.type MultiPolygon) {// 多个多边形const text drawText(feature.properties, projection, font)if (text) {province.add(text)}coordinates.forEach((coordinate) {// coordinate 多边形数据coordinate.forEach((coord) {const mesh drawExtrudeMesh(coord, 0x3a6877, projection, {depth: 6, borderColor: 0xffffff, borderWidth: 0.1, code:feature.properties.code});// const line drawLine(coord, color, projection);// 唯一标识mesh.name feature.properties.name;mesh.userData.originalColor 0x3a6877; // 初始颜色province.add(mesh);// province.add(line);});});}if (feature.geometry.type Polygon) {const text drawText(feature.properties, projection, font)if (text) {province.add(text)}// 多边形coordinates.forEach((coordinate) {const mesh drawExtrudeMesh(coordinate, 0x3a6877, projection, {depth: 6, borderColor: 0xffffff, borderWidth: 0.1, code: feature.properties.code||feature.properties.filename});// const line drawLine(coordinate, color, projection);// 唯一标识mesh.userData.originalColor 0x3a6877; // 初始颜色mesh.name feature.properties.name;province.add(mesh);// province.add(line);});}map.add(province);map.rotation.x -Math.PI / 5;});scene.add(map);createLine(projection)}
function createPlane() {var gridHelper new THREE.GridHelper(300, 15, 0xff0000, 0x003333);gridHelper.material.depthWrite false; // 禁止写入深度缓冲区gridHelper.material.depthTest false;gridHelper.position.y -10.1gridHelper.rotateX(Math.PI / 3);scene.add(gridHelper);// 创建一个平面作为地面var geometry new THREE.PlaneGeometry(310, 310);var material new THREE.MeshLambertMaterial({color: 0xffffff, // 白色transparent: true, // 开启透明效果opacity: 0.1, // 设置透明度side: THREE.DoubleSide, // 双面渲染});var mesh new THREE.Mesh(geometry, material);scene.add(mesh);mesh.position.y -10mesh.rotateX(-Math.PI / 6);
}function drawText(properties, projection, font) {// console.log(properties, properties)let center properties.centroid || properties.centerlet name properties.nameconst geometry new TextGeometry(name, {font,depth: 0.1,size: 1, // 文本大小默认为100width: 16,height:0.2 // 文字厚度});geometry.computeBoundingBox(); // 计算包围盒const boundingBox geometry.boundingBox;const xOffset (boundingBox.max.x - boundingBox.min.x) / 2; // X 方向偏移const yOffset (boundingBox.max.y - boundingBox.min.y) / 2; // Y 方向偏移geometry.translate(-xOffset, -yOffset, 0);const textMaterial new THREE.MeshBasicMaterial({color: 0x00fff0||0xb0c4ca,});const mesh new THREE.Mesh(geometry, textMaterial);if (center) {let [x, y] projection(center)mesh.position.set(x, -y, 6.5);return mesh}return null
}/*** 根据经纬度坐标生成几何物体* param {Array} polygon 经纬度坐标数据* param {string} color 物体颜色* param {Function} projectionFun 经纬度转平面坐标函数* returns THREE.Mesh*/
function drawExtrudeMesh(polygon, color, projectionFun, options {}) {const { depth 6, borderColor 0xffffff, borderWidth 0.1 } options;// 创建形状const shape new THREE.Shape();polygon.forEach((row, i) {const [x, y] projectionFun(row);if (i 0) {shape.moveTo(x, -y);}shape.lineTo(x, -y);});// 挤压缓冲几何体const geometry new THREE.ExtrudeGeometry(shape, {depth: depth, // 这里是高度参数bevelEnabled: true,bevelSegments: 10,steps: 1, // 用于分段的数量默认 1bevelSize: 0.5, // 倒角大小bevelThickness: 0.5 // 倒角深度});// 材质const randomColor (Math.random() * 0.5 0.5) * 0xffffff;const material new THREE.MeshBasicMaterial({color: 0x3a6877 || randomColor,transparent: true,opacity: 0.5,});const mesh new THREE.Mesh(geometry, material);// 添加边界const edges new THREE.EdgesGeometry(geometry);const lineMaterial new THREE.LineBasicMaterial({color: borderColor, // 边界颜色linewidth: borderWidth, // 边界线宽度});const edgeLines new THREE.LineSegments(edges, lineMaterial);mesh.add(edgeLines);mesh.userData {originalColor: color,fillMaterial: material, // 默认材质originalBorderMaterial: lineMaterial, // 保存默认材质edgeLines: edgeLines, // 保存边界线};return mesh;
}/*** 根据坐标点一条连续的线* param {*} polygon 经纬度坐标数据* param {*} color 线的颜色* param {*} projectionFun 经纬度转平面坐标函数* returns THREE.Line*/
function drawLine(polygon, color, projectionFun) {const lineGeometry new THREE.BufferGeometry();const pointsArr [];polygon.forEach((row) {const [x, y] projectionFun(row);// 创建三维点pointsArr.push(new THREE.Vector3(x, -y, 6.4));});// console.log(pointsArr, pointsArr)// 放入多个点lineGeometry.setFromPoints(pointsArr);// 生成随机颜色const lineColor new THREE.Color(Math.random() * 0.5 0.5,Math.random() * 0.5 0.5,Math.random() * 0.5 0.5);const lineMaterial new THREE.LineBasicMaterial({color: #ffffff,linewidth: 200});return new THREE.Line(lineGeometry, lineMaterial);
}// 地标
const rippleMaterial new THREE.ShaderMaterial({uniforms: {uTime: { value: 0.0 }, // 时间uColor: { value: new THREE.Color(0xff00ff) }, // 气泡颜色},vertexShader: varying vec2 vUv;void main() {vUv uv;gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0);},fragmentShader: uniform float uTime;uniform vec3 uColor;varying vec2 vUv;void main() {float dist length(vUv - 0.5); // 计算像素到中心的距离float ripple sin(dist * 10.0 - uTime) * 0.5 0.5; // 波纹效果gl_FragColor vec4(uColor, ripple * (1.0 - 0.0));},transparent: true, // 使气泡透明
});
let pos [[116.23, 39.54], [117.2857, 31.8612]]
for (let p of pos) {const geometry new THREE.CircleGeometry(3, 64); // 半径1分段64const ripple new THREE.Mesh(geometry, rippleMaterial);const [x, y] projection(p);console.log(x, y, xy)ripple.position.set(x, -y, 7)map.add(ripple);
}// 创建圆形波纹的几何体 引入图片 打点
let pos2 [[116.4074, 39.9042], // 北京[117.3616, 39.3434], // 天津[112.9834, 28.1127], // 湖南[113.4244, 23.3417], // 广东[108.7880, 23.8298], // 广西[110.3492, 20.0174], // 海南[104.0665, 30.5723], // 四川
];
for (let p of pos2) {const texture new THREE.TextureLoader().load(../public/坐标-fill.png);const material new THREE.MeshBasicMaterial({ map: texture, color: 0x7777ff, transparent: true, side: THREE.DoubleSide });const plane new THREE.Mesh(new THREE.PlaneGeometry(4, 4), material);const [x, y] projection(p);plane.position.set(x, -y, 8.5);plane.rotateX(Math.PI / 2) // 将平面旋转到水平位置// plane.rotateY(Math.PI / 4); // 旋转 Y 轴增加立体感plane.lookAt(camera.position); // plane.renderOrder 1;map.add(plane);
}
// 创建圆形波纹的几何体function getPoint(startPoint, endPoint, projection) {// const startPoint [116.4074, 39.9042]// const endPoint [87.6177, 43.7928]let [sx, sy] projection(startPoint)let [ex, ey] projection(endPoint)// 定义起始点和终止点const sp new THREE.Vector3(sx, -sy, 7.5);const ep new THREE.Vector3(ex, -ey, 7.5);return [sp, ep]
}let curvature 0.3;
const curveList []
function createCurve(endPoint, startPoint) {// 计算起点到终点的方向向量和距离const direction new THREE.Vector3().subVectors(endPoint, startPoint).normalize(); // 单位方向向量const distance startPoint.distanceTo(endPoint); // 两点间距离// 计算垂直于方向向量的偏移向量用来确定控制点// const perpendicular new THREE.Vector3(-direction.y, direction.x, 0).normalize();// 计算控制点位置沿垂直方向偏移偏移量与距离和曲率相关const controlPoint new THREE.Vector3().addVectors(startPoint.clone().add(endPoint).multiplyScalar(0.5), // 中点new THREE.Vector3(0, 0, curvature * distance)// perpendicular.multiplyScalar(curvature * distance * 0.5) // 曲率控制的偏移量);// 创建二次贝塞尔曲线const curve new THREE.QuadraticBezierCurve3(startPoint, controlPoint, endPoint);const points curve.getPoints(500);if (points.some(point isNaN(point.x) || isNaN(point.y) || isNaN(point.z))) {console.error(生成的点数组包含无效值);}return {curve,points};
}
function createLine(projection) {let pointList [[[116.4074, 39.9042], [117.2857, 31.8612]], [[110.3492, 20.0174], [117.2857, 31.8612]],[[87.6177, 43.7928], [117.2857, 31.8612]], [[91.1164, 29.6500], [117.2857, 31.8612]],[[126.6617, 45.7421], [117.2857, 31.8612]], [[120.0934, 29.1828], [117.2857, 31.8612]], [[102.7097, 25.0453], [117.2857, 31.8612]]]for (let point of pointList) {let [sp, ep] pointlet [startPoint, endPoint] getPoint(sp, ep, projection)const texture new THREE.TextureLoader().load(飞机-客机.png);texture.center.set(0.5, 0.5);const material new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide });const planeMesh new THREE.Mesh(new THREE.PlaneGeometry(6, 6), material);planeMesh.position.set(endPoint.x, endPoint.y, 8.5);map.add(planeMesh);// 创建线材质和几何体const lineMaterial new LineMaterial({color: 0xffffff,linewidth: 4, // 设置线条宽度opacity: 0,transparent: true,depthWrite: false,depthTest: false});lineMaterial.needsUpdate true;lineMaterial.resolution.set(window.innerWidth, window.innerHeight);// 创建线对象const lineGeometry new LineGeometry();let { points, curve } createCurve(startPoint, endPoint);let plane createFlyLine(points)curveList.push({points,curve,plane,planeMesh})let pr []for (let p of points) {pr.push(p.x, p.y, p.z)}lineGeometry.setPositions(pr); // 设置点的位置const line new Line2(lineGeometry, lineMaterial);line.computeLineDistances(); // 计算线段的距离line.renderOrder 1;map.add(line);}
}const uniforms {// uTime: { value: 0.0 },// uSColor: { value: new THREE.Color(0xff0000) },// uEColor: { value: new THREE.Color(0xffffff) },// uWidth: { value: 5.0 },// uSpeed: { value: 1 },// uLength: { value: 0.8 }uTime: { value: 0.0 }, // 用于控制时间的 uniformuScale: { value: 1.0 }, // 点的缩放比例uColor: { value: new THREE.Color(0xffffff) }, // 颜色数组
};const commonUniforms {u_time: {value: 0.0}
}
function initLineMaterial(setting) {let number setting ? (Number(setting.number) || 1.0) : 4.0; // 在一个路径中同时存在的个数let speed setting ? (Number(setting.speed) || 1.0) : 0.6;// 速度约大越快let length setting ? (Number(setting.length) || 0.5) : 0.3;// 单根线的长度0-1之间1代表全满let size setting ? (Number(setting.size) || 3.0) : 6.0;// 在最大的地方的大小 默认为3像素let color setting ? setting.color || new THREE.Vector3(0, 1, 1) : new THREE.Vector3(0, 1, 1);// 颜色此处以Vector3的方式传入分别为RBG值 都是0-1的范围let singleUniforms {u_time: commonUniforms.u_time,number: { type: f, value: number },speed: { type: f, value: speed },length: { type: f, value: length },size: { type: f, value: size },color: { type: v3, value: color },initialOpacity: { value: 1 }};let lineMaterial new THREE.ShaderMaterial({uniforms: singleUniforms,vertexShader: varying vec2 vUv;attribute float percent;varying float opacity;uniform float u_time;uniform float number;uniform float speed;uniform float length;uniform float size;void main(){vUv uv;vec4 mvPosition modelViewMatrix * vec4( position, 1.0 );float l clamp(1.0-length,0.0,1.0);//空白部分长度占比gl_PointSize clamp(fract(percent*number l - u_time*number*speed)-l ,0.0,1.) * size * (1./length);opacity gl_PointSize/size;gl_Position projectionMatrix * mvPosition;},//顶点着色器部分fragmentShader: precision mediump float;varying float opacity;uniform vec3 color;uniform float initialOpacity;void main(){if(opacity 0.1){discard;}gl_FragColor vec4(color,1.0);},// 片元着色器部分transparent: true,blending:THREE.AdditiveBlending,});return lineMaterial;
}function createFlyLine(points) {var geometry new THREE.BufferGeometry().setFromPoints(points);let length points.length;var percents new Float32Array(length);for (let i 0; i points.length; i 1) {percents[i] (i / length);}geometry.setAttribute(percent, new THREE.BufferAttribute(percents, 1));let lineMaterial initLineMaterial({color: new THREE.Color(0xffffff),});var flyLine new THREE.Points(geometry, lineMaterial);// let euler new THREE.Euler(Math.random() * Math.PI, Math.random() * Math.PI, 0);// flyLine.setRotationFromEuler(euler);map.add(flyLine)
}let t 0
function animate(time) {controls.update();stats.update();if(rippleMaterialrippleMaterial.uniforms){rippleMaterial.uniforms.uTime.value 0.1;}requestAnimationFrame(animate);// console.log(uniforms, uniforms)const speed 0.001for (let obj of curveList) {// obj.planeMesh.uTime.value 0.001;const curve obj.curve;const position curve.getPointAt(t);const tangent curve.getTangentAt(t).normalize();const axis new THREE.Vector3(0, 1, 0);const quaternion new THREE.Quaternion().setFromUnitVectors(axis, tangent);// planeMesh.position.copy(position); // 更新位置obj.planeMesh.lookAt(position.clone().add(tangent)); // 设置朝向obj.planeMesh.position.set(position.x, position.y, position.z 0.2)obj.planeMesh.quaternion.copy(quaternion);}t speed;if (t 1) t 0;// uniforms.uTime.value 0.01;if(commonUniformscommonUniforms.u_time){commonUniforms.u_time.value 0.01;}// 使用渲染器渲染相机看这个场景的内容渲染出来renderer.render(scene, camera);}
animate();/script
