/*
const feature = turf.convex(geojson);
const coordinates = feature.geometry.coordinates[0];
const shape = new THREE.Shape();
coordinates.forEach((coordinate, index) => {
const [x, y] = coordinate;
if (index === 0) {shape.moveTo(x, y);}
else {shape.lineTo(x, y);}
});
const extrudeSettings = { depth: 20, bevelEnabled: false, };
const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
*/
{
hull3DSmall.translateZ( -1.75 )
for ( let i = 0; i < hull3DSmall.children.length; i ++ ) {
hull3DSmall.children[i].material.color.setHex(0xff00ff);
}
}
console.log({'thregeom': THREE.Geometry});
center = {return { 'x': width / 2, 'y': height / 2 } }
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]
let meshC = geomBounds3D.children[0]
let meshD = geomBounds3DSmall.children[0]
meshB.scale.set(.95, .95, .95);
meshC.scale.set(.95, .95, .95);
meshD.scale.set(.95, .95, .95);
let bb1 = getBoundingBoxCenter(meshA)
let bb2 = getBoundingBoxCenter(meshB)
let bb3 = getBoundingBoxCenter(meshC)
let bb4 = getBoundingBoxCenter(meshD)
let translation = new THREE.Vector3().subVectors(bb1, bb2);
meshB.position.x += translation.x;
meshB.position.y += translation.y;
meshB.position.z = bb1.z;
translation = new THREE.Vector3().subVectors(bb1, bb3);
meshC.position.x += translation.x;
meshC.position.y += translation.y;
meshC.position.z = depth - 20
translation = new THREE.Vector3().subVectors(bb1, bb4);
meshD.position.x += translation.x;
meshD.position.y += translation.y;
meshD.position.z = depth + 20;
meshA.updateMatrix();
meshB.updateMatrix();
meshC.updateMatrix();
meshD.updateMatrix();
// Create a CSG object from each mesh
let bspA = CSG.fromMesh( meshA );
let bspB = CSG.fromMesh( meshB );
let bspC = CSG.fromMesh( meshC );
let bspD = CSG.fromMesh( meshD );
// Perform the CSG subtraction
let bspResult = bspA.subtract(bspB);
//bspResult = bspResult.union(bspD);
bspResult = bspResult.subtract(bspC);
var mesh = CSG.toMesh( bspResult, meshA.matrix, meshA.material );
mesh.geometry.computeVertexNormals();
const material = new THREE.MeshNormalMaterial();
var bufferGeometry = new THREE.BufferGeometry().fromGeometry( mesh.geometry );
mesh = new THREE.Mesh( bufferGeometry, material )
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;
}
STLExporter = import("https://cdn.skypack.dev/three@0.136.0/examples/jsm/exporters/STLExporter.js")
{
let exporter = new STLExporter.STLExporter();
let exportScene = (meshThis, name) => {
// console.log('exportScene', meshThis)
let buffer = exporter.parse( meshThis )
let filename = name+'.stl'
let blobby = new Blob( [ buffer ], { type: "text/stl" } )
return DOM.download(blobby, filename, "Download "+name)
}
// ${exportScene(geomBounds3D, 'geomBoundsLines')}
return html`
${exportScene(hull3D, 'hull3D')}
${exportScene(geomBounds3D, 'geomBounds3D')}
${exportScene(meshHullRes, 'meshHullRes')}
`}
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.
