cesium 知乎_Cesium开发：在平面上播放视频

Cesium的sancastle示例中有一个在球体上创建视频的例子，不过大家可能更需要一个在平面上创建视频，好应用到实际工程中去。

https://www.zhihu.com/video/1012029395518750720

代码比较简单，使用了Material Apperance，并且创建了一个包含video的Material。 需要注意的点是：new Cesium.Material的方式，把video作为构造函数参数传进去的做法不能用，Cesium有bug，内部没加对HtmlVideo的判断；

需要在html中增加如下代码：

Your browser does not support the video element.

然后js代码如下：

var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;

var dimensions = new Cesium.Cartesian3(400000.0, 400000.0, 1.0);

var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.3912, 39.920);

var translateMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);

var rotationXMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(-90.0)));

var rotationYMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(90.0)));

var scaleMatrix = Cesium.Matrix4.fromScale(dimensions);

var planeZModelMatrix = new Cesium.Matrix4();

Cesium.Matrix4.multiply(translateMatrix, scaleMatrix, planeZModelMatrix);

var planeXModelMatrix = new Cesium.Matrix4();

Cesium.Matrix4.multiply(translateMatrix, rotationXMatrix, planeXModelMatrix);

Cesium.Matrix4.multiply(planeXModelMatrix, scaleMatrix, planeXModelMatrix);

var planeYModelMatrix = new Cesium.Matrix4();

Cesium.Matrix4.multiply(translateMatrix, rotationYMatrix, planeYModelMatrix);

Cesium.Matrix4.multiply(planeYModelMatrix, scaleMatrix, planeYModelMatrix);

var videoElement = document.getElementById('trailer');

createPlane(planeZModelMatrix, new Cesium.Color(0.0, 0.0, 1.0, 1.0));

//createPlane(planeXModelMatrix, new Cesium.Color(1.0, 0.0, 0.0, 1.0));

//createPlane(planeYModelMatrix, new Cesium.Color(0.0, 1.0, 0.0, 1.0));

function createPlane(planeModelMatrix) {

// 创建平面

var planeGeometry = new Cesium.PlaneGeometry({

vertexFormat : Cesium.MaterialAppearance.VERTEX_FORMAT,

});

// 创建平面外轮廓

var planeOutlineGeometry = new Cesium.PlaneOutlineGeometry({

});

var planeGeometryInstance = new Cesium.GeometryInstance({

geometry : planeGeometry,

modelMatrix : planeModelMatrix

});

var material = Cesium.Material.fromType('Image');

material.uniforms.image = videoElement;

/* Cesium 1.47 有bug，以下代码会报错

var material = new Cesium.Material({

fabric : {

type : 'Image',

uniforms : {

image : videoElement

}

}

});

*/

scene.primitives.add(new Cesium.Primitive({

geometryInstances : planeGeometryInstance,

appearance : new Cesium.MaterialAppearance({

closed: false,

//translucent: false,

material: material

})

}));

var planeOutlineGeometryInstance = new Cesium.GeometryInstance({

geometry : planeOutlineGeometry,

modelMatrix : planeModelMatrix,

attributes : {

color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0))

}

});

scene.primitives.add(new Cesium.Primitive({

geometryInstances : planeOutlineGeometryInstance,

appearance : new Cesium.PerInstanceColorAppearance({

flat : true,

renderState : {

lineWidth : Math.min(2.0, scene.maximumAliasedLineWidth)

}

})

}));

}

viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(positionOnEllipsoid, 300000));

点击czm6.com，查看更多内容。