path = d3.geoPath().projection(d3.geoMercator().fitExtent([[10, 10], [width - 10, height - 10]], geojson) )
hull = {
// Start by adding a baselayer by using Turf.JS to create a convex hull of our geometry
var hull = turf.convex( geojson );
hull.properties[object.label] = object.convex
let svg = d3.create("svg").attr("viewBox", [0, 0, width, height])
// Draw the hull path
svg.append("path")
.datum(hull)
.attr("d", path)
.attr("stroke", "#000")
.attr("stroke-width", 1)
.attr("fill", "#ccc");
return svg.node()
}
hull2 = {
// Start by adding a baselayer by using Turf.JS to create a convex hull of our geometry
var hull = turf.convex( geojson );
hull.properties[object.label] = object.convex
let svg = d3.create("svg").attr("viewBox", [0, 0, width, height])
// Draw the hull path
svg.append("path")
.datum(hull)
.attr("d", path)
.attr("stroke", "#000")
.attr("stroke-width", 1)
.attr("fill", "#ccc");
return svg.node()
}
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 depth = 40; // Z value --off the sheet
// Shapes: Extrtrude Geometry
if( ['geoms'].includes(type) ){
shapes.forEach(shape => {
const geometry = new THREE.ExtrudeBufferGeometry(shape, { depth: depth, bevelEnabled: false });
material.color = new THREE.Color().setStyle( 'blue' )
const mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
});
}
group.rotateX(Math.PI);
group.scale.multiplyScalar(scaleBy);
center = { x: width * scaleBy, y: h * scaleBy };
group.translateX(-center.x / 2 + 0);
group.translateY(-center.y / 2 + 0);
return group;
}
meshHullRes = {
let meshA = hull3D.children[0]
let meshB = hull3DSmall.children[0]
meshB.scale.set(.9, .9, .9);
//meshA.position.set(0, -30, 0);
let i = 0;
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()
mesh.geometry.computeBoundingBox();
let boundingBox = mesh.geometry.boundingBox;
boundingBox.getCenter( new THREE.Vector3() );
let center = new THREE.Vector3();
mesh.position.sub(center);
return mesh
const material = new THREE.MeshNormalMaterial();
material.color = new THREE.Color().setStyle( 'orange' )
var bufferGeometry = new THREE.BufferGeometry().fromGeometry( mesh.geometry );
mesh = new THREE.Mesh( bufferGeometry, material )
mesh.material = material
mesh.scale.setScalar( 30 );
// mesh.rotateY(Math.PI)
mesh.rotateZ(Math.PI)
var centerr = { x: width/2, y: 600/2 };
mesh.translateY( - center.y /2 + 130);
mesh.translateX( - center.x /2 + 230 );
return mesh
}
{
hull3DSmall.translateZ( .75 )
for ( let i = 0; i < hull3DSmall.children.length; i ++ ) {
hull3DSmall.children[i].material.color.setHex(0xff00ff);
}
}
{
// 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(width, 600);
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.
