function getSymbolMesh(data) {
const group = new THREE.Group();
const scale = 0.01;
const colorDepth = 30;
const outlineDepth = 40;
data.paths.forEach((path, i) => {
const isOutline = true;
// const mat = getGlassMaterial(path.color);
// const mat = new THREE.MeshBasicMaterial({ color: path.color })
console.log(path.color)
const mat = new THREE.MeshPhysicalMaterial({
color: "yellow",
metalness: 0.15,
roughness: 0.1,
transmission: 0.1,
opacity: 0.1,
ior: 1.3,
thickness: 0.3,
envMapIntensity: 0.9,
specularIntensity: 0.5,
exposure: 0.99,
side: THREE.DoubleSide
})
path.toShapes(isOutline).forEach((shape) => {
const geo = new THREE.ExtrudeGeometry(shape, { depth: isOutline ? outlineDepth : colorDepth });
const shapeMesh = new THREE.Mesh(geo, mat);
const shift = (outlineDepth - colorDepth) * scale;
shapeMesh.position.z = isOutline ? 0 : shift / 2;
shapeMesh.scale.set(scale, -scale, scale)
group.add(shapeMesh);
});
});
// Offset all of group's elements, to center them
const box = new THREE.Box3().setFromObject(group);
const groupSize = new THREE.Vector3();
box.getSize(groupSize);
group.children.forEach(item => {
item.position.x = groupSize.x / -2;
item.position.y = groupSize.y / 2;
item.position.z -= groupSize.z / 2;
});
return group;
}
function getGlassMaterial(color) {
return new THREE.MeshPhysicalMaterial({
color: color,
metalness: 0.15,
roughness: 0.05,
transmission: 0.75,
opacity: 0.9,
ior: 1.3,
thickness: 0.03,
envMapIntensity: 0.0,
specularIntensity: 1.0,
exposure: 0.99,
side: THREE.DoubleSide
});
}
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.
