Skip to first unread message
CrashedBboy
Nov 5, 2018, 9:53:56 PM11/5/18
to cesium-dev
Hi,
I'm trying to create an ESRI i3s web browser using Cesium,
now I'm able to create the 3D buildings (GeometryInstance) after parsing the geometry data into vertices and normals, the screenshot below is the current status of the visualization.
codes of drawing buildings:
let geometry = new Cesium.Geometry({
attributes: {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3,
values: positions // vertices of buildings
}),
normal: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 3,
values: normals // normals of buildings
})
},
primitiveType: Cesium.PrimitiveType.TRIANGLES,
boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
});
var instance = new Cesium.GeometryInstance({
geometry: geometry,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(color)
},
show: new Cesium.ShowGeometryInstanceAttribute(true)
});
The next important step is to map the image textures onto those buildings. How can I implement this? and what data/parameters should I have besides the images?
The image textures would be something like this:
The Cesium I use is v1.50, and I use Chrome browser on Windows10.
Thank you in advance!
Omar Shehata
Nov 13, 2018, 10:18:18 AM11/13/18
to cesium-dev
This looks very cool! Are you publishing this i3s browser as open source?
Typically in any engine what you'd need is someway to map the texture coordinates to the vertices of the geometry. This is called UV mapping. You might need to create a custom material, this doc has some info on that:
For example, there the "st" is the 2d coordinates of the texture. So if you have a geometry that's a rectangle, and it has 6 vertices (2 triangles), you would create 6 corresponding positions in 2d (which would be the corners of your texture) to map the full texture onto the rectangle. Does that make sense?
It might be helpful to look at the source to see how the CesiumJS engine sets up the ST coordinates for other geometry. For example, here is a helper function for rectangle geometry that computes these coordinates when constructing the geometry:
Reply all
Reply to author
Forward
Message has been deleted
0 new messages