path = d3.geoPath().projection(d3.geoMercator().fitExtent([[0, 0], [width, height]], geojson) )
async function create3dFromSvgV8(svg, type, color=false) {
const loader = new THREE.SVGLoader(); // Load the svg using three to use it's tooling
let paths = loader.parse(svg.outerHTML).paths; // Parse the SVG file and retrieve all the paths
let style = paths[0].userData.style; // Store the style of the first path in a variable
const shapes = [];
// THREE.JS FN Retrieves the shapes for each path, converts it to a threejs 'shape' and add the the 'shapes' array
paths.forEach((path, i) => {
paths[i].toShapes(true, false).forEach((shape, i) => shapes.push(shape) )
});
// Create Group
const group = new THREE.Group();
// Prepare Extrude Settings
const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
material.color = new THREE.Color().setStyle( color||'blue' )
let extrudeSettings = { depth: 40, bevelEnabled: false }
// Shapes: Extrtrude Geometry
if( ['geoms'].includes(type) ){
shapes.forEach(shape => {
const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, material);
position(mesh)
group.add(mesh);
});
}
// This does not impact children mesh properties
/*
group.rotateZ(Math.PI);
group.scale.multiplyScalar(scaleBy);
*/
return group;
}
function position(mesh){
mesh.rotateZ(Math.PI);
mesh.translateX(-center.x + 0);
mesh.translateY(-center.y + 0);
}
function getBoundingBoxCenter(mesh) {
// Calculate the bounding box of the mesh
let boundingBox = new THREE.Box3().setFromObject(mesh);
// Return the center of the bounding box
return boundingBox.getCenter(new THREE.Vector3());
}
meshHullRes = {
let meshA = hull3D.children[0]
let meshB = hull3DSmall.children[0]
meshB.scale.set(.95, .95, .95);
let c1 = getBoundingBoxCenter(meshA)
let c2 = getBoundingBoxCenter(meshB)
// Compute the translation vector
let translation = new THREE.Vector3().subVectors(c1, c2);
// Update meshB's position
// meshB.position.add(translation);
console.log({c1, c2, translation})
//meshB.position.set(0, 0, 0); // left, up, offpage(blue arrow)
meshB.position.x += translation.x;
meshB.position.y += translation.y;
meshB.position.z = c1.z;
meshA.updateMatrix();
meshB.updateMatrix()
// Create a CSG object from each mesh
let bspA = CSG.fromMesh( meshA );
let bspB = CSG.fromMesh( meshB );
// Perform the CSG subtraction
let bspResult = bspA.subtract(bspB);
var mesh = CSG.toMesh( bspResult, meshA.matrix, meshA.material );
mesh.geometry.computeVertexNormals();
const material = new THREE.MeshNormalMaterial();
new THREE.MeshBasicMaterial( { side: THREE.DoubleSide } );
material.color = new THREE.Color().setStyle( 'orange' )
var bufferGeometry = new THREE.BufferGeometry().fromGeometry( mesh.geometry );
mesh = new THREE.Mesh( bufferGeometry, material )
// Doesn't show in STL
position(mesh)
return mesh
}
{
// Equirectangular Background
const renderer = new THREE.WebGLRenderer({ antialias: true });
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
renderer.setSize(600, 950);
renderer.setPixelRatio(devicePixelRatio);
controls.addEventListener("change", () => renderer.render(scene, camera));
renderer.render(scene, camera);
return renderer.domElement;
}
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.
