SkillAgentSearch skills...

CesiumMeshVisualizer

Cesium+Three.js.

GenerateConvertImprove

Install / Use

/learn @MikesWei/CesiumMeshVisualizer
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

CesiumMeshVisualizer

Make you can use three.js geometry in Cesium,and use mesh,geometry,material like three.js to manage renderable object in Cesium.

Build

npm install --save-dev
npm run build

Install

npm install cesiummeshvisualizer

Download

<a href="http://os.mesh-3d.com/meshvis/dist/CesiumMeshVisualizer.js">CesiumMeshVisualizer.js</a>

<a href="http://os.mesh-3d.com/meshvis/dist/CesiumMeshVisualizer.min.js">CesiumMeshVisualizer.min.js</a>

Usage

1.commonjs

html:

<script src="./ThirdParty/Cesium/Cesium.js"></script>

js:

var CesiumMeshVisualizer=require('./dist/CesiumMeshVisualizer.js')
//...
//npm install
//var CesiumMeshVisualizer=require('cesiummeshvisualizer')
//...

2.module

var g=typeof(window)!='undefined'?window:(typeof(global)!='undefined'?global:globalThis);
import Cesium from 'cesium/Source/Cesium.js'
g.Cesium=Cesium;
import CesiumMeshVisualizer from './Source/Main.js'

//npm install
//import CesiumMeshVisualizer from 'cesiummeshvisualizer/Source/Main.js'
//...

or

<script src="./ThirdParty/Cesium/Cesium.js"></script>

import CesiumMeshVisualizer from './Source/Main.js'

3.script element

<script src="./ThirdParty/Cesium/Cesium.js"></script>
<script src="./dist/CesiumMeshVisualizer.js"></script>
<script>
  console.log(CesiumMeshVisualizer,Cesium)
  //...
</script>

Example

        MeshVisualizer = Cesium.MeshVisualizer;
        Mesh = Cesium.Mesh;
        MeshMaterial = Cesium.MeshMaterial; 
        FramebufferTexture = Cesium.FramebufferTexture;

        var center = Cesium.Cartesian3.fromDegrees(homePosition[0], homePosition[1], 50000);
        var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);

        var meshVisualizer = new MeshVisualizer({
            modelMatrix: modelMatrix,
        });
        viewer.scene.primitives.add(meshVisualizer);


        //示例1：Cesium.Geometry+Cesium.MeshMaterial组合
        var box = Cesium.BoxGeometry.createGeometry(Cesium.BoxGeometry.fromDimensions({
            dimensions: new Cesium.Cartesian3(100000, 50000, 50000),
            vertexFormat: Cesium.VertexFormat.POSITION_ONLY
        }));
        
        var material = new MeshMaterial({
            defaultColor: "rgba(255,0,0,1.0)",
            wireframe: false,
            side: MeshMaterial.Sides.DOUBLE
        });
        var boxMesh = new Mesh(box, material);

        meshVisualizer.add(boxMesh);

        //示例2：Cesium.CSG+Cesium.MeshMaterial组合，可以用Cesium.CSG做布尔运算并渲染运算结果

        //首先使用Cesium创建球体
         var sphere = new Cesium.SphereGeometry({
             radius: 50000.0,
             vertexFormat: Cesium.VertexFormat.POSITION_ONLY
         });
         sphere = Cesium.SphereGeometry.createGeometry(sphere);
        
         var sphereMesh = new Mesh(sphere, material);
         sphereMesh.position = new Cesium.Cartesian3(100000, 0, 0)
         meshVisualizer.add(sphereMesh);

         //将球体对象Cesium.SphereGeometry转成Cesium.CSG实例
         sphere = CSG.toCSG(sphere);
         //将盒子对象转成Cesium.CSG实例
         box = CSG.toCSG(box);

          //做布尔运算
          var subResult = sphere.subtract(box);
          //渲染运算结果
          var subResultMesh = new Mesh(subResult, material);
          subResultMesh.position = new Cesium.Cartesian3(700000, 0, 0)
          meshVisualizer.add(subResultMesh);

          //示例3：使用帧缓存作纹理,实际应用中如体绘制，风场流场绘制等等都可以运用此技术

          function createGeometry() {
            var p1 = new Cesium.Cartesian3(-50000, 50000, 100);
            var p2 = new Cesium.Cartesian3(-50000, -50000, 100);
            var p3 = new Cesium.Cartesian3(50000, -50000, 100);
            var p4 = new Cesium.Cartesian3(50000, 50000, 100);

            var positions = new Float64Array([
              p1.x, p1.y, p1.z,
              p2.x, p2.y, p2.z,
              p3.x, p3.y, p3.z,
              p4.x, p4.y, p4.z
            ]);
            var indices = new Uint16Array([
              0, 1, 3,
              1, 2, 3,
            ]);
            var sts = new Float32Array([
              1, 1,
              1, 0,
              0, 0,
              0, 1
            ]);
            var geometry = new Cesium.Geometry({
                attributes: {
                    position: new Cesium.GeometryAttribute({
                        componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                        componentsPerAttribute: 3,
                        values: positions
                    }),
                    st: new Cesium.GeometryAttribute({
                        componentDatatype: Cesium.ComponentDatatype.FLOAT,
                        componentsPerAttribute: 2,
                        values: sts
                    })
                },
                indices: indices,
                primitiveType: Cesium.PrimitiveType.TRIANGLES,
                boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
            });

            return geometry;
        }
        //将上文中的盒子渲染到缓存，作为纹理参与createGeometry（）方法创建的几何体渲染过程
        var framebufferTex = new FramebufferTexture(boxMesh);
        var geometry = createGeometry();
        var customMesh = new Mesh(geometry, new MeshMaterial({

            uniforms: {
                u_textureMap: framebufferTex//Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/STK.png')
            },
            side: MeshMaterial.Sides.DOUBLE,
            vertexShader : "\n\
                \n\
                varying vec3 v_position;\n\
                varying vec2 v_st;\n\
                \n\
                void main(void) \n\
                {\n\
                vec4 pos = u_modelViewMatrix * vec4(position,1.0);\n\
                v_position = pos.xyz;\n\
                v_st=st;\n\
                gl_Position = u_projectionMatrix * pos;\n\
                }",
            fragmentShader : "varying vec2 v_st;\
                uniform sampler2D u_textureMap;\
                void main()\
                {\
                gl_FragColor = texture2D(u_textureMap,v_st);\n\
                \
                }\
                "
        }));
        customMesh.position = new Cesium.Cartesian3(100000, 0, 0);
        meshVisualizer.add(customMesh);

Document

<a href="http://os.mesh-3d.com/meshvis/Document/index.html" target="_blank">Document</a>

Online Demos

<hr />

 demos（示例中常用操作有：左击发射，Q、A——左、右摆动，W、S、A、D——前进、后退、左转弯、右转弯）: <br /><br/> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/CSG/index.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/CSG/screenshot.jpg" /> </a><br/>

<a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/CSG/index.html">CSG</a><br /><br />

<a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/LOD/index.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/LOD/screenshot.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/LOD/index.html">LOD</a><br /><br />

<a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/MeshVisualizer/index.html">MeshVisualizer</a><br /><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/helloworld.html">physics/helloworld</a><br/><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/cloth.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/physics/cloth.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/cloth.html">physics/cloth</a><br /><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/vehicle.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/physics/vehicle.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/vehicle.html">physics/vehicle</a><br /><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/terrain.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/physics/terrain.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/terrain.html">physics/terrain</a><br /><br />
<a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/softbody_volume.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/physics/soft_volume.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/softbody_volume.html">physics/softbody_volume</a><br /><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/softbody_volume2.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/physics/soft_volume2.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/softbody_volume2.html">physics/softbody_volume2</a><br /><br />

<a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/softbody_rope.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/physics/soft_rope.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/softbody_rope.html">physics/softbody_rope</a><br /><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/convex_break.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/physics/convex_break.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/physics/convex_break.html">physics/convex_break</a><br /><br />

<a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/ReferenceMesh/index.html">ReferenceMesh</a><br /><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/VolumeRendering/index.html"> <img src="http://os.mesh-3d.com/meshvis/App/demo/VolumeRendering/screenshot.jpg" /> </a><br /> <a target="_blank" href="http://os.mesh-3d.com/meshvis/App/demo/VolumeRendering/index.html">VolumeRendering</a><br /> <a target

MikesWei

View profile

View on GitHub
GitHub Stars756
CategoryDevelopment
Updated11d ago
Forks236
MikesWei/CesiumMeshVisualizer

Languages

JavaScript

Security Score

80/100

Audited on Mar 20, 2026

No findings