Primitive appearance how to define video material
// 添加
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.MaterialAppearance({
material: new Cesium.Material({
fabric: {
type: 'Image',
uniforms: {
image: 'Images/6.mp4' <-------------------------
}
}
})
})
}));
Checkout the Video Material Sandcastle example for how it works on the Entity level. You’ll need to pass the uniform an instance of the HTML video element, rather than the video url.
Thanks,
Gabby
Even if you use primitives, you should still be able to create the video material the same way:
var videoElement = document.getElementById(‘trailer’);
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.MaterialAppearance({
material: videoElement
})
``
Thanks,
Gabby
在 2018年6月21日星期四 UTC+8下午9:59:54，Gabby Getz写道：
Even if you use primitives, you should still be able to create the video material the same way:
var videoElement = document.getElementById('trailer');
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium\.MaterialAppearance\(\{
material: videoElement
\}\)
Thanks,
Gabby
On Tuesday, June 19, 2018 at 8:52:48 PM UTC-4, xypi...@126.com wrote:在 2018年6月19日星期二 UTC+8下午10:56:59，Gabby Getz写道：
> Checkout the Video Material Sandcastle example for how it works on the Entity level. You'll need to pass the uniform an instance of the HTML video element, rather than the video url.
>
>
> Thanks,
> Gabby
>
> On Monday, June 18, 2018 at 10:57:14 PM UTC-4, xypi...@126.com wrote:Primitive appearance how to define video material
>
>
>
>
>
> // 添加
>
> scene.primitives.add(new Cesium.Primitive({
>
> geometryInstances: instance,
>
>
>
> appearance: new Cesium.MaterialAppearance({
>
> material: new Cesium.Material({
>
> fabric: {
>
> type: 'Image',
>
> uniforms: {
>
> image: 'Images/6.mp4' <-------------------------
>
> }
>
> }
>
> })
>
> })
>
> }));
Thanks,but i want use "primitives" add rectangle,not use "entities" add rectangle.because "entities" not "modelMatrix" interface. my english very bad - -!
An error occurred while rendering. Rendering has stopped.
TypeError: this.material.isTranslucent is not a function
TypeError: this.material.isTranslucent is not a function
at p.s.isTranslucent (http://localhost:51309/Build/Cesium/Cesium.js:495:12163)
at V.update (http://localhost:51309/Build/Cesium/Cesium.js:501:12716)
at a.update (http://localhost:51309/Build/Cesium/Cesium.js:540:20000)
at tt (http://localhost:51309/Build/Cesium/Cesium.js:544:3341)
at Ke (http://localhost:51309/Build/Cesium/Cesium.js:544:1145)
at Ze (http://localhost:51309/Build/Cesium/Cesium.js:544:731)
at Qe (http://localhost:51309/Build/Cesium/Cesium.js:543:31164)
at lt (http://localhost:51309/Build/Cesium/Cesium.js:544:7171)
at ut (http://localhost:51309/Build/Cesium/Cesium.js:544:7339)
at we.render (http://localhost:51309/Build/Cesium/Cesium.js:544:15524)
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.MaterialAppearance({
material: videoElement
}),
releaseGeometryInstances: false,
show: true,
}));
An error occurred while rendering. Rendering has stopped.
TypeError: this.material.isTranslucent is not a function
TypeError: this.material.isTranslucent is not a function
at p.s.isTranslucent (http://localhost:51309/Build/Cesium/Cesium.js:495:12163)
at V.update (http://localhost:51309/Build/Cesium/Cesium.js:501:12716)
at a.update (http://localhost:51309/Build/Cesium/Cesium.js:540:20000)
at tt (http://localhost:51309/Build/Cesium/Cesium.js:544:3341)
at Ke (http://localhost:51309/Build/Cesium/Cesium.js:544:1145)
at Ze (http://localhost:51309/Build/Cesium/Cesium.js:544:731)
at Qe (http://localhost:51309/Build/Cesium/Cesium.js:543:31164)
at lt (http://localhost:51309/Build/Cesium/Cesium.js:544:7171)
at ut (http://localhost:51309/Build/Cesium/Cesium.js:544:7339)
at we.render (http://localhost:51309/Build/Cesium/Cesium.js:544:15524)
var videoElement = document.getElementById('trailer');
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.MaterialAppearance({
material: videoElement
}),
releaseGeometryInstances: false,
show: true,
}));
在 2018年6月21日星期四 UTC+8下午9:59:54，Gabby Getz写道：
Even if you use primitives, you should still be able to create the video material the same way:
var videoElement = document.getElementById('trailer');
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium\.MaterialAppearance\(\{
material: videoElement
\}\)
Thanks,
Gabby
On Tuesday, June 19, 2018 at 8:52:48 PM UTC-4, xypi...@126.com wrote:在 2018年6月19日星期二 UTC+8下午10:56:59，Gabby Getz写道：
> Checkout the Video Material Sandcastle example for how it works on the Entity level. You'll need to pass the uniform an instance of the HTML video element, rather than the video url.
>
>
> Thanks,
> Gabby
>
> On Monday, June 18, 2018 at 10:57:14 PM UTC-4, xypi...@126.com wrote:Primitive appearance how to define video material
>
>
>
>
>
> // 添加
>
> scene.primitives.add(new Cesium.Primitive({
>
> geometryInstances: instance,
>
>
>
> appearance: new Cesium.MaterialAppearance({
>
> material: new Cesium.Material({
>
> fabric: {
>
> type: 'Image',
>
> uniforms: {
>
> image: 'Images/6.mp4' <-------------------------
>
> }
>
> }
>
> })
>
> })
>
> }));
Thanks,but i want use "primitives" add rectangle,not use "entities" add rectangle.because "entities" not "modelMatrix" interface. my english very bad - -!
An error occurred while rendering. Rendering has stopped.
TypeError: this.material.isTranslucent is not a function
TypeError: this.material.isTranslucent is not a function
at p.s.isTranslucent (http://localhost:51309/Build/Cesium/Cesium.js:495:12163)
at V.update (http://localhost:51309/Build/Cesium/Cesium.js:501:12716)
at a.update (http://localhost:51309/Build/Cesium/Cesium.js:540:20000)
at tt (http://localhost:51309/Build/Cesium/Cesium.js:544:3341)
at Ke (http://localhost:51309/Build/Cesium/Cesium.js:544:1145)
at Ze (http://localhost:51309/Build/Cesium/Cesium.js:544:731)
at Qe (http://localhost:51309/Build/Cesium/Cesium.js:543:31164)
at lt (http://localhost:51309/Build/Cesium/Cesium.js:544:7171)
at ut (http://localhost:51309/Build/Cesium/Cesium.js:544:7339)
at we.render (http://localhost:51309/Build/Cesium/Cesium.js:544:15524)
var videoElement = document.getElementById('trailer');
scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: new Cesium.MaterialAppearance({
material: videoElement
}),
releaseGeometryInstances: false,
show: true,
}));
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
showRenderLoopErrors : false,
shouldAnimate : true
});
var videoElement = document.getElementById(‘trailer’);
var scene = viewer.scene;
var instance = new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -88.0, 28.0),
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
})
});
var material = Cesium.Material.fromType(‘Image’);
material.uniforms.image = videoElement;
material.uniforms.repeat = new Cesium.Cartesian2(1.0, 1.0);
scene.primitives.add(new Cesium.Primitive({
geometryInstances : instance,
appearance : new Cesium.MaterialAppearance({
material : material
})
}));
``
You’ll probably need to play with the shape and repeat values.
The problem has been solved, thank you very much. love u love u kiss kiss
在 2018年6月27日星期三 UTC+8下午10:09:01，Gabby Getz写道：