cesium官方教程12学习

最新推荐文章于 2023-11-13 16:20:34 发布

原创最新推荐文章于 2023-11-13 16:20:34 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

cesium 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何使用Cesium库创建WebGL地图应用，包括设置访问令牌、创建自定义材质、加载3D模型并应用材质等关键步骤。通过具体代码示例，读者可以学会如何在Cesium中实现复杂的地图渲染效果。

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOWM3MzYxZS0xNDg5LTRhYzgtOTE3ZS1hMTgyNmFmNzY5ZDIiLCJpZCI6MTYwNTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1Njk0NzMxMjl9.QT-UwdXK6VZyYMhtznEEIru0AEQEzMPxDlxQw96mTlA'; var viewer = new Cesium.Viewer('cesiumContainer'); //GLSL代码创建材质 /* function czm_materialInput() { this.s = 0; float s = 0; vec2 st; vec3 str; mat3 tangentToEyeMatrix; vec3 positionToEyeEC; vec3 normalEC; }; struct czm_material { vec3 diffuse; float specular; float shininess; vec3 normal; vec3 emission; float alpha; }; */ //创建材质 var theFabric = { type : 'myNewMaterial', uniforms : { image : 'http://localhost:8080/apps/sampleData/fire.png', color : new Cesium.Color(1.0, 0.0,0.0,1.0) }, materials : { diffuseMaterial : { type : 'DiffuseMap' }, specularMaterial :{ type : 'SpecularMap' } }, components : { //纯白色散光 //diffuse : 'texture2D(image, materialInput.st).rgb', diffuse : 'diffuseMaterial.diffuse', //高光 // specular : '0.1', specular : 'specularMaterial.specular', //自发光 emission : 'vec3(0.5)', //透明度 alpha : 'color.a' } /* source : 'czm_material czm_getMaterial(czm_materialInput materialInput) { \n' + ' czm_material material = czm_getDefaultMaterial(materialInput); \n' + ' material.diffuse = texture2D(image, materialInput.st).rgb; \n' + ' material.specular = 0.5; \n' + // Specular mountain tops /* ' vec4 color; \n' + ' float heightValue = texture2D(heightField, materialInput.st).r; \n' + ' color.rgb = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue); \n' + ' color.a = (1.0 - texture2D(image, materialInput.st).r) * 0.7; \n' + ' color = czm_gammaCorrect(color); \n' + ' material.diffuse = color.rgb; \n' + ' material.alpha = color.a; \n' + ' material.normal = bumpMap.normal; \n' + ' material.specular = step(0.1, heightValue); \n' + // Specular mountain tops ' material.shininess = 8.0; \n' + // Sharpen highlight ' return material; \n' + '} \n' */ }; var modelMatrix_car = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414,0.0)); var model_car = viewer.scene.primitives.add( Cesium.Model.fromGltf({ url : 'http://localhost:8080/apps/sampleData/models/GroundVehicle/GroundVehicle.glb', modelMatrix : modelMatrix_car, scale : 200000.0 }) ); model_car.material = new Cesium.Material({ fabric : theFabric }); //viewer.trackedEntity = model_car; //viewer.zoomTo(model_car);