I förra veckan visade jag hur det ganska enkelt går att skapa en Potree tjänst som kan visa egna punktmoln som konverterats med QGIS till Entwine. I stort sett en kopia av befintliga exempel där sökvägar till punktmolnsfilerna ändras.
Men hur skall man göra om man vill peta in en 3D modell för att exempelvis visualisera hur det skulle se ut med en ny byggnad i punktmolnet?
Låt oss säga att vi skulle vilja se hur en liten ”kiosk” skulle se ut vid den klosterruin som jag demonstrerade med Potree senast. Direkt i Potree så går det att mäta vilket utrymme som skulle vara rimligt att använda för en liten bod eller ”kiosk”.
I Blender skapas sedan en enkel modell med korrekta mått och en simpel färgsättning. Det går såklart att vara hur avancerad man vill här, men för dessa tester så räcker det här. Notera även var ”origo” för modellen är. Det är denna punkt som senare kommer att refereras till när modellen skall placeras i punktmolnet.
Vid export av modellen så skall man välja ”Wavefront OBJ” och se till att ”Axis Forward” och ”Up” anges till ”Y” och ”Z” enligt bilden ovan. Om man inte gör så, så kommer modellen att vara ”felaktigt” orienterad när man läser in den.
Den resulterande OBJ och MTL filen sparas sedan i en mapp på servern som kan nås av Potree med en url.
Sedan blir det ”lite” krångligare…
Det finns inget exempel i Potree att använda sig av för att få OBJ-filer med rätt färger att visas korrekt. En OBJ utan textur eller med textur i form av godtycklig jpg-fil finns det exempel för, men inte för att läsa in från MTL-fil.
Potree använder sig av three.js så det går att hämta information och exempel från det projektet, men det visade sig vara lite krångligare ändå. En av referensfilerna som man måste läsa in i html-filen pekar nämligen på ännu en fil, fast med fel sökväg…
Det är i filen MTLLoader.js som sökvägen skall ändras så att den ser ut som i bilden ovan, annars fungerar det inte… Åtminstone inte för mig. Om det inte fungerar för dig så använd ”F12” för att granska console, och om det där pekas på fel i dessa filer så kan du också behöva kika på rad 12 i den här filen…
Sedan behöver man lägga till lite kod i html-filen för punktmolnet.
Till att börja med så behöver några javascript filer importeras. Det görs på samma plats som tidigare där ”THREE” importeras. Såväl OBJLoader som MTLLoader behöver importeras.
Själva inläsningen av objekt görs sedan mot slutet i filen, innan ”</script>” taggen stänger blocket med skript-kod.
Jag väljer här att inte skriva in koden som text för dig att kopiera, då den är specifik för mitt exempel och du kommer att behöva göra en hel del ändringar för att passa dina behov.
Det första som sker är att MTL-filen hämtas och laddas i en funktion som ”materials” med ”.preload()”.
Därefter så skapas en OBJLoader som tilldelades detta ”material” och OBJ-filen laddas med ”.load” som ”object”.
Nu skall positionen i modellen sättas med ”object.position.set(…);”. Koordinaterna för detta är enkla att hämta från Potree visaren. Lägg till en ”Point Measurement” från ”Tools” där du vill placera ditt objekt. Det skall vara den punkt som representerar ”origo” från Blender.
Under ”Scene” så hittar man sedan mätpunkten med koordinater och en ”knapp” som gör att dessa koordinater kopieras till urklipp. Det är dessa koordinater som helt enkelt klistras in i funktionen ”object.position.set(…);”.
När det gäller ”object.rotation.set(…);” så anges dessa som rotation runt x-, y- och z-axeln, så det bör framför allt vara den tredje parametern som skall justeras för att rotationen av objektet skall bli korrekt. Vinklarna anges i radianer så det är inga stora tal det är fråga om. Det enklaste är att börja med ”0,0,0” och när modellen visas på rätt plats så kan man skruva på z-värdet tills det passar.
För ”viewer.onGUILoaded(() => …” så är det enda syftet med denna att koppla en rad i ”scene” till objektet, så att det går att ”tända” och ”släcka” objektet i Potree.
Ovanstående bör räcka för att modellen skall visas över huvud taget, men utan ljuskälla så kommer modellen att vara väldigt mörk.
Den här funktionen finns bland exemplen från Potree så det är bara att kopiera därifrån. Det jag justerat är framför allt ”directional.position.set(…);” som flyttar ”solen” i ett x, y, z koordinatsystem och den riktas mot motsvarande koordinater i ”directional.lookAt(…);”. Jag har inte testat speciellt mycket med ljussättning, men jag kan flytta ljuskällan genom att framför allt justera positionen i förhållande till målet.
Färg på ljuset och ljusstyrkan justeras med ”THREE.DirectionalLight( … );”, samt ett övergripande ”grundljus” med ”THREE.AmbientLight( … );”
Om nu alla parenteser och semikolon är på rätt ställen, så bör modellen gå att visa i modellen i Potree.
Potree är nu inte byggt för att hantera stora modeller i ”mesh” format som OBJ, men någorlunda enkla modeller med få noder och ytor är det inga problem att visualisera i kombination med inmätta punktmoln på det här viset. WebODM använder också OBJ formatet för modeller, så det går att visa även stora modeller, men jag tror att WebODM använder lite annorlunda bibliotek för detta än ”ren” Potree.