Published
Edited
Oct 25, 2020
1 fork
2 stars
md`# SVG Icons`
function icon (iconPath, z) {
const _material = new THREE.MeshNormalMaterial();
const _geometry = _createIconGeometryFromSVGPath(iconPath);
const _icon = new THREE.Mesh(_geometry, _material);
_icon.position.set(0,0,z);
return _icon;
}
function _createIconGeometryFromSVGPath(iconPath) {
const ICON_SIZE = 10;
// Grab the SVGLoader.
const _loader = new THREE.SVGLoader();
// Prepare and parse the path command string.
const _iconPath = `<path d="${iconPath}">`;
const _parsedSVG = _loader.parse(_iconPath);
// Convert to shapes.
const _shapes = _parsedSVG.paths[0].toShapes(false);
// Extrude to an array of geometries.
const _shapeBufferGeometry = [];
_shapes.forEach((shape) =>
_shapeBufferGeometry.push(
new THREE.ExtrudeBufferGeometry(shape, {
depth: 4,
bevelEnabled: false,
})
)
);
// Merge the geometries (for performance)
const _iconGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
_shapeBufferGeometry,
true
);
// _try_ to 'normalise' the icon size.
_iconGeometry.computeBoundingSphere();
_iconGeometry.scale(
ICON_SIZE / _iconGeometry.boundingSphere.radius,
ICON_SIZE / _iconGeometry.boundingSphere.radius,
1
);
return _iconGeometry;
}
height = 600
svgZigbee = `M4.06,6.15C3.97,6.17 3.88,6.22 3.8,6.28C2.66,7.9 2,9.87 2,12A10,10 0 0,0 12,22C15,22 17.68,20.68 19.5,18.6L17,18.85C14.25,19.15 11.45,19.19 8.66,18.96C7.95,18.94 7.24,18.76 6.59,18.45C5.73,18.06 5.15,17.23 5.07,16.29C5.06,16.13 5.12,16 5.23,15.87L7.42,13.6L15.03,5.7V5.6H10.84C8.57,5.64 6.31,5.82 4.06,6.15M20.17,17.5C20.26,17.47 20.35,17.44 20.43,17.39C21.42,15.83 22,14 22,12A10,10 0 0,0 12,2C9.22,2 6.7,3.13 4.89,4.97H5.17C8.28,4.57 11.43,4.47 14.56,4.65C15.5,4.64 16.45,4.82 17.33,5.17C18.25,5.53 18.89,6.38 19,7.37C19,7.53 18.93,7.7 18.82,7.82L9.71,17.19L9,17.95V18.06H13.14C15.5,18 17.84,17.81 20.17,17.5Z`;
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.