From 178d031572325c0649e729e2ff5d34e1d9acc011 Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Mon, 23 Jan 2023 18:17:00 +0100 Subject: [PATCH] pulling example SVG to walkable shape --- index.html | 52 ++++++++++++++++++---------------------------------- 1 file changed, 18 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index d5c884d..e258339 100644 --- a/index.html +++ b/index.html @@ -2191,29 +2191,22 @@ function changeColorNextPinch(){ }, 50) // relatively cheap check, filtering on small array } -/* - -generalize selector to pick last Nth rather than very last - adapt getIdFromPick() with .slice() after filter then map on length-N instead of length-1 - -selector pickers : pickClass and pickId - display result in 3D HUD with rotating objects and selector value - ideally themselves also selectable/usable, e.g clone from HUD to bring back "out" - requires extra work as becoming a child will not work, own positionning - should fix that - could compare to world coordinates instead of "just" position attribute - add a clear selector function to avoid making the HUD unusable - -could also pick via volume, e.g wireframe box - start with https://threejs.org/docs/#api/en/math/Box3.containsPoint - can iterate with https://threejs.org/docs/#api/en/math/Box3.containsBox - consider also https://threejs.org/docs/#api/en/math/Box3.intersectsBox - -consider pick then apply, i.e changeColorLastId() but for next Id - should be cancealable - -*/ - +function loadSVG(samplingValue = 100, scaling = 1/1000 ){ + let url = "https://fabien.benetou.fr/pub/home/future_of_text_demo/content/remarkable_import_example_for_outline.svg"; + fetch(url).then( r => r.text() ).then( r => { + let pointsAsString = r.split("\n").filter( l => l.indexOf("polyline")>-1 )[1].split('"').filter( l => l.length>100)[0] + // very specific, could load instead as document as done in SVG player + let points = pointsAsString.split(" ").filter( (p,i) => (i%samplingValue==0) ).map( i => i.split(",").map( a => Number(a))) + // consider the reMarkable reference to SVG, i.e 0 to ...1872 x 1404 + const offset = {x:-1,y:0,z:-1} + points.map( p => { + let el = addPrimitive("cylinder", "" + (p[0]*scaling+offset.x) + " 0 " + (p[1]*scaling+offset.z) ); + // should consider instancing + el.setAttribute("scale", ".01 4 .01"); + el.className = "linefromsvgextrusion" + } ) + } ) +}
@@ -2260,18 +2253,9 @@ consider pick then apply, i.e changeColorLastId() but for next Id - - - - - - - - - - - + +