Public
Edited
Feb 12
container = html `<div style="height:800px"></div>`
target = [0, 0, 0.5]
deckgl = {
const props = {
container,
// layers: [mesh_layer],
layers: layers,
views: [new deck.OrbitView()],
initialViewState: {
target: target, // center of the mesh
rotationX: -30,
rotationOrbit: 30,
zoom: 8,
},
controller: true,
};
// Avoid creating multiple instances
const prevDeckInstance = this;
if (prevDeckInstance) {
prevDeckInstance.setProps(props);
return prevDeckInstance;
}
return new deck.DeckGL(props);
}
// textLayer = {
// return new deck.TextLayer({
// data: [
// {position: [-122.402, 37.79], text: 'Hello World'}
// ],
// getPosition: d => d.position,
// getText: d => d.text
// });
// }
data = ({
"vertices": [[-0.5, -0.5, 0], [0.5, -0.5, 0], [0.5, 0.5, 0], [-0.5, 0.5, 0], [-0.3, -0.3, 1], [0.3, -0.3, 1], [0.3, 0.3, 1], [-0.3, 0.3, 1]],
"faces": [[0, 1, 2], [0, 2, 3], [4, 5, 6], [4, 6, 7], [0, 4, 1], [1, 4, 5], [1, 5, 2], [2, 5, 6], [2, 6, 3], [3, 6, 7], [3, 7, 0], [0, 7, 4]]
})
// data_meshes = ({
// "meshes": [
// {
// "vertices": [
// [-0.5, -0.5, 0], [0.5, -0.5, 0], [0.5, 0.5, 0], [-0.5, 0.5, 0], // Z = 0
// [-0.3, -0.3, 1], [0.3, -0.3, 1], [0.3, 0.3, 1], [-0.3, 0.3, 1], // Z = 1
// [0, 0, 2] // Z = 2
// ],
// "faces": [
// [0, 1, 2], [0, 2, 3], // bottom face
// [4, 5, 6], [4, 6, 7], // middle face
// [8, 5, 6], [8, 4, 5], [8, 7, 4], [8, 6, 7], // top face
// [0, 4, 1], [1, 4, 5], [1, 5, 2], [2, 5, 6], [2, 6, 3], [3, 6, 7], [3, 7, 0], [0, 7, 4] // side faces
// ],
// "position": [0, 0, 0] // Position of the first mesh
// },
// {
// "vertices": [
// [1.5, 1.5, 0], [2.5, 1.5, 0], [2.5, 2.5, 0], [1.5, 2.5, 0], // Z = 0
// [1.7, 1.7, 1], [2.3, 1.7, 1], [2.3, 2.3, 1], [1.7, 2.3, 1], // Z = 1
// [2, 2, 2], [2.5, 2, 2], // Z = 2
// [2.25, 2.25, 3] // Z = 3
// ],
// "faces": [
// [0, 1, 2], [0, 2, 3], // bottom face
// [4, 5, 6], [4, 6, 7], // 1st middle face
// [8, 9, 5], [8, 5, 4], [8, 6, 9], [9, 6, 7], // 2nd middle face
// [10, 8, 9], [10, 9, 4], [10, 4, 8], [10, 7, 4], [10, 9, 7], [10, 8, 7] // top face
// ],
// "position": [1.5, 1.5, 0] // Position of the second mesh
// }
// ]
// })
// works with two trapezoids
data_meshes = ({
"meshes":
[
{
'vertices': [
[0, 0, 0.1],
[1, 0, 0],
[1, 1, 0],
[0, 1, 0],
[0.25, 0.25, 1],
[0.75, 0.25, 1],
[0.75, 0.75, 1],
[0.25, 0.75, 1],
[0.5, 0.5, 2]
],
'faces': [
[0, 1, 2],
[0, 2, 3],
[0, 1, 4],
[4, 1, 5],
[1, 2, 5],
[5, 2, 6],
[2, 3, 6],
[6, 3, 7],
[3, 0, 7],
[7, 0, 4]
]
},
{'vertices': [[2, 2, 0],
[3, 2, 0],
[3, 3, 0],
[2, 3, 0],
[2.25, 2.25, 1],
[2.75, 2.25, 1],
[2.75, 2.75, 1],
[2.25, 2.75, 1],
[2.5, 2.5, 2]],
'faces': [[0, 1, 2],
[0, 2, 3],
[0, 1, 4],
[4, 1, 5],
[1, 2, 5],
[5, 2, 6],
[2, 3, 6],
[6, 3, 7],
[3, 0, 7],
[7, 0, 4]]}]
})
wireframe = false
opacity = 0.1
layers = data_meshes.meshes.map((meshData, i) => {
const vertices = new Float32Array(meshData.vertices.flat());
const indices = new Uint16Array(meshData.faces.flat());
// Create a Geometry instance for this mesh
const geometry = new luma.Geometry({
attributes: {
positions: vertices,
},
indices,
});
return new deck.SimpleMeshLayer({
id: `mesh-layer-${i}`,
data: [0], // Just need a single entry in data, as we're not using data attributes
mesh: geometry,
wireframe: wireframe,
transparent: true,
// lightSettings: {
// ambientRatio: 0, // Adjust ambient lighting
// diffuseRatio: 0., // Adjust diffuse lighting
// specularRatio: 0, // Adjust specular lighting
// lightsPosition: [0, 0, 0], // Adjust light position
// lightsStrength: [1.0, 0.0, 0.0, 0.0] // Adjust light strength
// },
getPosition: () => meshData.position,
getColor: [255, 0, 0],
opacity: opacity,
pickable: true,
});
})
// vertices = new Float32Array(data.vertices.flat())
vertices = new Float32Array(data.vertices.flat())
indices = new Uint16Array(data.faces.flat())
luma = deck && window.luma
geometry = new luma.Geometry({
attributes: {
positions: vertices,
},
indices,
});
// mesh_layer = new deck.SimpleMeshLayer({
// id: 'simple-mesh-layer',
// data: [{position: [0, 0, 0]}], // Position of the mesh
// mesh: geometry,
// getScale: [1, 1, 1], // Scale of the mesh
// getOrientation: [0, 0, 0], // Orientation of the mesh
// getColor: [255, 0, 0], // Color of the mesh
// opacity: 0.15, // Transparency of the mesh
// });
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
