cesium实现uv贴图功能_cesium地区贴图资源-CSDN文库

共3个文件

png：2个

html：1个

webgl

cesium

需积分: 5 138 浏览量 2024-02-18 16:57:03 上传评论收藏 1.2MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

cesium_uv.rar （3个子文件）

cesium_uv

效果图.png 1.19MB

123.png 15KB

index.html 6KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>UV贴图</title> <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" /> <script src="./Cesium/Cesium.js"></script> <style> html, body, #map { margin: 0; padding: 0; width: 100%; height: 100%; } </style> </head> <body onload="initMap()"> <div id="map"> </div> <script> let viewer; function initMap() { Cesium.Ion.defaultAccessToken ="你的token"; viewer = new Cesium.Viewer('map', { navigationHelpButton: false, animation: false, timeline: false });//初始化完成 setView(); getUvImage(); } let u = 0.1, v = 0; let allUv = [ 0, 1, 0.33, 1, 0.33, 0.5, 0, 1, 0.33, 0.5, 0, 0.5, 0.33, 1, 0.66, 0.5, 0.33, 0.5, 0.33, 1, 0.66, 1, 0.66, 0.5, 0.66, 1, 1, 1, 1, 0.5, 0.66, 1, 1, 0.5, 0.66, 0.5, 0.33, 0, 0.33, 0.5, 0.66, 0.5, 0.33, 0, 0.66, 0.5, 0.66, 0 ] function getUvImage() { viewer.scene.primitives.removeAll(); let allPoints = [ //012 116.18, 39.93, 1000, 116.2, 39.93, 1000, 116.2, 39.93, 1, //023 116.18, 39.93, 1000, 116.2, 39.93, 1, 116.18, 39.93, 1, //142 116.2, 39.93, 1000, 116.2, 39.91, 1, 116.2, 39.93, 1, //154 116.2, 39.93, 1000, 116.2, 39.91, 1000, 116.2, 39.91, 1, //567 116.2, 39.91, 1000, 116.18, 39.91, 1000, 116.18, 39.91, 1, //574 116.2, 39.91, 1000, 116.18, 39.91, 1, 116.2, 39.91, 1, //324 116.18, 39.93, 1, 116.2, 39.93, 1, 116.2, 39.91, 1, //347 116.18, 39.93, 1, 116.2, 39.91, 1, 116.18, 39.91, 1, ] let cartesianArr = Cesium.Cartesian3.fromDegreesArrayHeights(allPoints); console.log(cartesianArr); let resultPoint = []; for (let i = 0; i < cartesianArr.length; i++) { resultPoint.push(cartesianArr[i].x) resultPoint.push(cartesianArr[i].y) resultPoint.push(cartesianArr[i].z) } const mps = new Float32Array(resultPoint); let normalsVec = []; for (let i = 0; i < resultPoint.length / 3; i++) { normalsVec.push(0) normalsVec.push(0) normalsVec.push(1) } var normals = new Float32Array(normalsVec);//写一个normal，决定每个position点上的反光方向 let st = allUv; var geometry = new Cesium.Geometry({ attributes: { position: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.DOUBLE,//数据类型 componentsPerAttribute: 3,//每个点由多少个数据 values: mps//数据 }), normal: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.FLOAT, componentsPerAttribute: 3, values: normals }), st: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.FLOAT, componentsPerAttribute: 2, values: st, }), }, primitiveType: Cesium.PrimitiveType.TRIANGLES,//geometry的类型 boundingSphere: Cesium.BoundingSphere.fromVertices(mps)//感应外框 }); var pap = new Cesium.MaterialAppearance( { material: new Cesium.Material( { fabric: { type: "Image", uniforms: { image: "./123.png", }, }, } ), faceForward: false, translucent: false //是否透明 } );//定义材质 var myInstance = new Cesium.GeometryInstance({ geometry: geometry, }); viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: [myInstance], asynchronous: false, appearance: pap }));//最后在场景里加载它 } function setView() { viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(116.127043, 39.918295, 4721.680980322776), orientation: { heading: 1.578606, pitch: -0.7353928, roll: 0 } }) } </script> </body> </html>

评论收藏

内容反馈