Public
Edited
Apr 18, 2023
1 fork
svg = html`${await file.text()}`
async function create3dFromSvgV8(svg, type, scaleBy) {
// Get Shapes and Points
const loader = new THREE.SVGLoader();
let paths = loader.parse(svg.outerHTML).paths;
let style = paths[0].userData.style;
const shapes = [],
points = [];
paths.forEach((path, i) => {
paths[i].toShapes(true, false).forEach((shape, i) => {
shapes.push(shape);
});
for (let j = 0, jl = path.subPaths.length; j < jl; j++) {
points.push(path.subPaths[j].getPoints());
}
});
// Create Group
const group = new THREE.Group();
let h = 600;
var center = { x: width / 2, y: h / 2 };
// Prepare Extrude Settings
const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
const extrudeOptions = { depth: 40, bevelEnabled: false };
// Shapes: Extrtrude Geometry
if( ['geoms'].includes(type) ){
shapes.forEach(shape => {
const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeOptions); // ExtrudeGeometry
material.color = new THREE.Color().setStyle( 'blue' )
const mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
});
}
// Points: Paint Stroke
if( ['lines'].includes(type) ){
points.forEach((pointsArr, i) => {
const geometry = THREE.SVGLoader.pointsToStroke( pointsArr, style )
material.color = new THREE.Color().setStyle( 'pink' )
const mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
});
}
// Points: Extrude Stroke
if (["extrude"].includes(type)) {
let x = 10; // depth
let y = 2; // Topwidth
let z = 2; // bottomWidth
const squareShape = new THREE.Shape()
.moveTo(x, 0)
.lineTo(x, y)
.lineTo(y, z)
.lineTo(z, 0);
const shapeBufferGeometry = [];
points.forEach((twoVectorArray, i) => {
let threeVectorArray = [];
twoVectorArray.forEach((v, i) => {
threeVectorArray.push(new THREE.Vector3(v.x, v.y, 8));
});
// Replace CatmullRomCurve3 with line segments
const extrusionPath = new THREE.CurvePath();
for (let i = 0; i < threeVectorArray.length - 1; i++) {
const line = new THREE.LineCurve3(
threeVectorArray[i],
threeVectorArray[i + 1]
);
extrusionPath.add(line);
}
var geometry = new THREE.ExtrudeBufferGeometry(squareShape, {
extrudePath: extrusionPath,
curveSegments: 1,
steps: 200,
bevelEnabled: false,
});
material.color = new THREE.Color().setHex(Math.random() * 0xffffff);
shapeBufferGeometry.push(geometry);
});
const iconGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
shapeBufferGeometry,
true
);
const mesh = new THREE.Mesh(iconGeometry, material);
mesh.translateZ(40);
group.add(mesh);
}
group.rotateX(Math.PI);
group.scale.multiplyScalar(scaleBy);
center = { x: width * scaleBy, y: h * scaleBy };
group.translateX(-center.x / 2 + 75);
group.translateY(-center.y / 2 + 0);
return group;
}
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.
