// group.position.x = - 120; group.position.y = 60;
// group.scale.x *= scaleX;
// let center = { x: width*scaleBy, y: width*scaleBy };
// group.translateX( center.x /2 );
// group.translateY( center.y /2 );
// group.rotateZ(rotateZBy);
// group.rotateY(rotateYBy);
// group.position.set(0,0,0);
// .center()
/*
// _try_ to 'normalise' the icon size.
iconGeometry.computeBoundingSphere();
iconGeometry.scale(
ICON_SIZE / iconGeometry.boundingSphere.radius,
ICON_SIZE / iconGeometry.boundingSphere.radius,
1
);
*/
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();
// Prepare Extrude Settings
// opacity: path.userData.style.fillOpacity, // transparent: path.userData.style.fillOpacity < 1,
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().setHex( Math.random() * 0xffffff );
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) ){
// var combined = new THREE.Geometry(); // THREE.Geometry();
// 3D Splines
let x = 20 // 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 ) ) } )
const spline = new THREE.CatmullRomCurve3( threeVectorArray )
spline.curveType = 'catmullrom';
spline.closed = false;
var step = spline.points.length;
var geometry = new THREE.ExtrudeBufferGeometry(squareShape, { // ExtrudeGeometry ExtrudeBufferGeometry
extrudePath: spline,
// curveSegments: 12,
steps: 200,
bevelEnabled: false
});
material.color = new THREE.Color().setHex( Math.random() * 0xffffff ); // .setStyle( 'orange' )
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 );
return group
}
lines3Dd = {
var scaleBy = 0.01*10
var obj = await create3dFromSvgV8( svg, 'extrude', scaleBy)
var mesh = obj.children[0]
mesh.translateY( 15 );
mesh.translateX( 25 )
mesh.translateZ( -15 )
mesh.scale.setScalar( 19 / 20 );
mesh.scale.setZ(2)
//mesh.translateX( -4350 );
//mesh.translateY( -3500 );
return obj
}
lines3D = {
var scaleBy = 0.01*10
var obj = await create3dFromSvgV8( svg, 'extrude', scaleBy)
var mesh = obj.children[0]
// mesh.scale.setScalar( 96 / 100 * 10 );
// mesh.rotateY(Math.PI)
// mesh.rotateZ(Math.PI)
// mesh.scale.setZ(20)
// mesh.position.set(200,-50,-116)
// mesh.position.set(200,-50,-850)
return obj
}
// ${exportScene(meshRes2, 'meshRes2')}
// ${exportScene(meshRes3, 'meshRes3')}
// ${exportScene(scene, 'meshRes3')}
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.
