Externes Skript richtig formatiert in Mobirise einbauen

Fragen und Diskussionen rund um Internet, Software und PC
tino79
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 45
Registriert: So 13. Dez 2020, 14:55

Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von tino79 »

Folgendes Problem:

Ich möchte folgendes Skript in Mobirise einbauen:

https://modelviewer.dev/

Ahnung habe ich wenig, jedoch ein grobes Verständnis was CSS bewirkt. Wie es dann jedoch in den Tiefen von Mobirise im Zusammenspiel funktioniert, daran scheitere ich aktuell.

Ich möchte dass dieses Modell hier: https://tino.de/3dmodels.html

in der Mobirise Seite auch in voller Größe angezeigt wird und nicht nur in einem kleinen Frame wie hier:
https://tino.de/3dmodelle.html

Kann mir wer dabei helfen was ich im Code Editor bei CSS eintragen muss? Bisher habe ich es nur vom linken Rand in die Mitte gerückt bekommen. Jedoch scheitere ich an der Größenänderung, egal ob ich es absolut in Pixeln oder relativ in Prozenten versuche.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

Hallo Tino,

ich habe das gerade versucht, aber offensichtlich fehlt mir da etwas vom Code oder es ist seitenbezogen und Google zeigt es deswegen nicht an :confused:

Grundsätzlich würde ich zunächst mal versuchen das über einen Iframe einzubinden.

Beispiel (wird nachher wieder gelöscht):

3D-Modell.JPG

oder hier am Smartphone:

Screenshot_20210827-145101_Samsung Internet.jpg

https://www.mobirise-tutorials.com/Test ... page3.html (Seite wieder gelöscht)

Code: Alles auswählen

<iframe src="https://tino.de/3dmodels.html" width="100%" height="500px"></iframe>
... hier habe ich dafür einen einfachen Textblock aus der Rubrik "Article" vom Thema "Mobirise 5" verwendet und einfach den Beispieltext mit dem Iframe ersetzt:


Textblock.JPG


Die Höhe kannst Du einrichten wie Du willst (jetzt 500px), wie man aber eine Dynamik da rein bekommen könnte, weiß ich auch gerade noch nicht, da man ja das Objekt beliebig am Mausrad vergrößern kann.

Du könntest es mal mit einem dynamischen Iframe versuchen, das kann ich hier nicht testen, da das nicht domainübergreifend funktioniert. Glaube aber eher, dass das nicht geht.

Hier Beispiele für dynamische Iframes:

https://www.mobirise-tutorials.com/Nach ... misch.html
tino79
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 45
Registriert: So 13. Dez 2020, 14:55

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von tino79 »

Hallo Tommy,

vielen Dank schonmal. Was meinst Du mit dem fehlenden Code, seitenbezogen oder Google zeigt etwas nicht an?

Aber vielleicht hat es sich ja erledigt wenn ich Dir das hier nochmal schreibe da ich mich ungenau ausgedrückt habe und mit zwei fast gleichnamigen Seiten zusätzlich Verwirrung gestiftet habe. Das ist zumindest meine Vermutung ;)

Ich möchte die HTML-Seite nicht in Mobirise einbauen, sondern möchte mit Mobirise eine Seite erstellen, worin die GLB-Datei angezeigt wird. Da ich es so dann nie hinbekommen habe, dass es bildschirmfüllend angezeigt wird, habe ich einfach mal eine separate HTML-Seite erstellt und geschaut wie das dann mit dem Skript aussieht. Das sieht dann gut aus, s. verlinkte Seite ohne meine mit Mobirise erstellte Website drumherum.

Die Frage bzw. Aufgabenstellung ist jetzt einfach nur, wie bekomme ich die paar Textzeilen aus der 3dmodels.html (Seite ohne Mobirise erstellt) in die 3dmodelle.html (mit Mobirise erstellt) so dass das 3D-Modell immer noch schön groß angezeigt wird.
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

Nimm mal einfach einen normalen HTML Block ohne css und schau ob es dann besser aussieht.
Gruß Volker
tino79
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 45
Registriert: So 13. Dez 2020, 14:55

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von tino79 »

Hallo Volker,

es gibt ja nur den einen Custum-HTML-Block.

Egal was ich da veranstalte, ob ich einfach mal rechts aus CSS alles rauslösche, links alles mit "div" rund um modelviewer lösche, alles mit modelviewer in die class display-1 schiebe, es bleibt dabei dass das 3D-Modell klein abgebildet wird. Nur die Position verschiebt sich.

Hier nochmal ein Screenshot wie es aktuell aussieht (alles was ich ausprobiert habe wieder rückgängig):
Dateianhänge
3dcode.JPG
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

So einfach ist das wohl nicht.

Schau mal den CSS Code an den die auf der Beispielseite haben :eek:
https://modelviewer.dev/styles/examples.css



Die splitten das Fenster, so dass rechts der Astronaut angezeigt wird. Die CSS wie gesagt ist ellenlang.

Mit Iframe auf jeden Fall einfacher ;)
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

Du verendest bei Dir den Block "Code Editor" - den brauch man eigentlich (fast) nie.

Du kannst irgendeinen einfachen Textblock mal aufziehen und dann am Symbol "< / >" (Edit Code) für den "Code Editor" diesen öffnen und dort Deinen Code eintragen:

Edit Code.jpg

Das hatte ich hier auch wie in Deinem Screenshot zu sehen getan, bei mir wird aber gar nichts angezeigt.

Wie kommt man denn zu dieser Datei?

salzmini.glb

Ich habe null Ahnung von dieser Anwendung "Model-Viewer", weiß nicht wo die her kommt und wie man sie erstellt und welche Dateien dann dazu gehören. Die bräuchte ich dann schon alle um das nachzustellen.

... so hatte ich das (oben) gemeint - wird diese Anwendung mit einem Tool von Google erstellt? Weil dort auf eine JavaScript-Datei von Google verwiesen wird.

Vielleicht ist dieses Api ja nur an Deinem Server einsetzbar und nicht an meinem.
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

Das Script kann man auf jedem Webspace einsetzen. Die glb kannst ja runter laden ;)
Hab auch mal probiert das ganze einzubauen und bin genau so gescheitert.

Dynamisches Iframe geht gar nicht. Da wird das glb immer weiter aufgezoomt.
Im normalen Iframe geht es und sieht auch noch passable aus.

https://360p.eu/3d/
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

Moin,

also - ich habe das jetzt mal direkt eingebaut - ich habe mir dazu dann Deine Datei:

salzmini.glb

herunter geladen. Das geht dann ebenso:

https://www.mobirise-tutorials.com/Test ... page3.html (Seite wieder gelöscht)


... aber hilf mir, wie und wo erstellt man diese .glb Datei eigentlich - ich habe mich damit noch nie beschäftigt :eek:



@Volker - da gibt es gar keine CSS-Datei :confused:



@Tino - so habe ich das jetzt (richtig) eingebaut.

... wie schon vermutet, das funktioniert durch dieses Script nur "online", also nicht am PC nach der lokalen Publizierung. Es lädt zwar lokal auch - aber es wird nichts angezeigt.

> Ich habe in diesem Beispiel einen einfachen Textblock aus der Rubrik "Article" aufgezogen und den Beispieltext mit dem Verweis auf die Datei ersetzt (siehe Screenshot vom "Code Editor" unten):

Code: Alles auswählen

<model-viewer class="meinmodell" src="3dmodelle/salzmini.glb" alt="Salz" auto-rotate="" camera-controls=""></model-viewer>
> Ich habe eine class="meinmodell" im Bereich "CSS Editor" erstellt und diese zum Verweis (oben) hinzugefügt, bei der ich die Breite und Höhe eingetragen habe und auch eine zentrierte Position. Am Handy (bis 767px Display-Breite) habe ich die Höhe auf 300px reduziert:

Code: Alles auswählen

.meinmodell {
  width: 100%;
  height: 600px;
  text-align: center;
}
@media (max-width: 767px) {
  .meinmodell {
    height: 300px;
  }
}
Screenshot mit den markierten Einfügungen, links HTML und rechts CSS:

3D-Modell-Code.JPG

> der Verweis zum JavaScript gehört in die Seiteneinstellungen (Zahnrad) in den Bereich "End of <body code:"

Code: Alles auswählen

<model-viewer src="3dmodelle/salzmini.glb" alt="Salz" auto-rotate="" camera-controls=""></model-viewer>
End-of-body-code.JPG
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

Tommy ich meine diese Seite hier : https://modelviewer.dev/
Schau mal selbst ;)

Da gibt es sehr wohl eine CSS und die ist nicht ohne :D
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

ja - die gehört aber zu deren Seite und nicht zu diesem API.

Du kannst ja diese Datei - mit allem drum und dran - auch mal im WINDOWS 3D-Viewer betrachten:

(Datei wider gelöscht)

Öffnen mit 3D-Viewer.JPG

3D-Viewer.JPG
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

Es geht doch darum, dass das glb rechts zu sehen ist. Der Grund dafür ist auch einleuchtend.
Wenn Du nämlich mit der Maus oder dem Finger scrollst, bleibst Du immer im glb hängen. Deswegen haben die den Astronaut nach rechts gelegt.

Nun mach mal eine CSS die das so hin bekommt ;) Ich glaube das meinte Tino. Drunter im Block ist ja möglich wie Du zeigst, egal ob direkt oder mit iframe.
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

... verstehe ich jetzt noch nicht :confused:

Das Teil sitzt doch genau mittig auf meiner Seite - wieso rechts?

Es soll doch auch mittig sitzen, ansonsten macht man eben ein:

text-align: right;

... in die CSS class="meinmodell"
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

Inspiriert durch Tommy hab ich es mal links eingebaut. Ich glaube so kann man es auch ganz gut machen.

https://360p.eu/3d/

Ich hoffe Tino kann damit was anfangen.

So, nun auch im Popup. Jetzt hat Tino die Auswahl :D
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

... jepp :tu:

... und ich rechts :D

Herrlich dieses Beispiel :lachtot:
With no model
There's nothing to show, but also no error.

Ohne Modell

Es ist nichts zu zeigen, aber auch kein Fehler.
NO modal.JPG



@Tino,

wo ist denn dieses Grafik her und wie hast Du diese 3D erstellt? Da muss es doch ein Programm (einen "3D Builder") geben. Ich habe keine Ahnung von dieser Thematik und würde das sehr gerne wissen.
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

3D Modelle kannst Du z.B. mit Blender https://www.blender.org/ erstellen und natürlich mit einer ganzen
Reihe anderer 3D Modeller Software. 3dMaxx z.B. ist ebenso eine Software dafür https://www.autodesk.de/products/3ds-max/overview nicht ganz billig :D aber sehr gut.
Gruß Volker
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Volker »

Ja Tommy das ist ja auch eine Profi Software. Damit wurde z.B. Toy Story und viele andere 3D Filmchen gemacht. ;)

Es gibt auch noch bessere Player um 3D Objekte im Web zu zeigen ;)

https://360p.eu/3d/test2.html

Da kann man einiges einstellen usw.
Gruß Volker
tino79
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 45
Registriert: So 13. Dez 2020, 14:55

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von tino79 »

Hey was geht denn hier ab?

Vielen lieben Dank Ihr beiden.

Also erstmal dazu, wo kommt das her, wieso weshalb und warum ist das da?

Vor ein paar Monaten bin ich zufällig auf diese 3D-Modelle gestoßen und wollte da auch mal ausprobieren. Falls das gut klappt, könnte ich mir vorstellen ggf. 3D-Modelle von großen Objekten zu erstellen, was man nur mit dem Quadrocopter hinbekommt, also z.B. Burgen. Im Herbst soll endlich das SDK vom Quadrokopterhersteller rauskommen, so dass man mit Drittanbietersoftware diese Flüge am PC planen kann und autonom erfolgen lassen kann. Also testen ob ich das überhaupt hinbekomme und in die Website eingebaut bekomme.

Also ewig gegoogled und Youtube-tutorials geschaut.

Der Salzstreuer musste dann einfach mal zum Test herhalten. Also, Salzsteuer auf den Tisch und dann ca. 60 Bilder in mehreren Runden davon gemacht. Dann die Bilder in Meshroom geschmissen und damit ein 3D-Modell erstellen lassen. Das war dann ca. 60MB groß. Puuuh, das auf die Website, da hat ja jeder schon 20x die Seite wieder geschlossen bevor das geladen ist. Also mitteles ca. 1stündigem Videotutorial das 3D-Modell in seine Punkte zerlegt und in eine Oberflächengrafik. Damit (ich glaube es war) eine Normalmap erstellt. Diese dann wieder auf die Punkte des 3D-Modells gelegt. Irgendwo zwischendrin auch nochmal mit Instantmeshes die Punktwolke reduziert und vielleicht auch von Punkten in Quader oder Dreiecke umgewandelt. Ist wie gesagt schon ein paar Monate her, so genau weiß ich es nicht mehr. Falls Du Tommy Dich da weiter mit beschäftigen möchtest, kann ich Dir gerne nochmal die Tutorialvideos raussuchen, die ich dazu geschaut habe. Ich glaube das meiste war wirklich in einem Einstündigen Tutorialvideo erklärt. War aber mega komplex was da mit Blender im Hintergrund abging, hab es nur als Schritt für Schritt Anleitung nachgemacht und konnte nur ganz oberflächlich erahnen, was da im Hintergrund abging. So einer dieser Punkte war das Thema UV-Map.

Sooo, nun hab ich da also diese selbsterstellte GLB-Datei vom Salzstreuer und wollte die auf meiner Homepage zeigen können. Nachdem ich wieder ewig im Netz geschaut habe, bin ich dann letztendlich auf Modelviewer gestoßen. Wie gesagt funktioniert das ja mit fast überhaupt keinem Code wunderbar, dass das 3D-Modell schön groß angezeigt wird. S. https://tino.de/3dmodels.html Da wird ja nur das Skript eingebunden und dann das Modell aufgerufen. Kein CSS und keine sonstigen Anweisungen wo und wie groß es platziert werden soll. Baue ich genau das in Mobirise ein, ist es winzig klein. Da habt ihr es ja schon größer hinbekommen. Das werde ich mir dann nochmal in Ruhe angucken und dann nachbauen wenn ich wieder Muße habe. Erstmal gehts jetzt gleich zu nem Kumpel auf seinen Geburtstag. Der wünscht sich ein Geldgeschenk, das muss er sich aber erstmal erarbeiten: https://www.thingiverse.com/thing:201097
Hab ich dann auch auf der Homepage als 3D-Modell, möchte aber hier nicht öffentlich den Link posten da ne Lizenzdatei dabei ist, die ich dann auch wieder verlinken müsste. Privat darf man es verwenden. Jedenfalls kann ich ihm dann nur Not das 3D-Modell als Hilfestellung geben wenn er all zu frustriert ist :)

Also wie gesagt, das Ziel ist einfach nur 3D-Modelle auf meiner Homepage zeigen zu können. Diese dann vermutlich immer in voller Größe und mittig, da ich denke ich jedes einzelne Modell auf einer extra Seite verlinken werden. Nur möchte ich halt am liebsten alles über Mobirise machen und nicht noch mit externen Seiten arbeiten müssen. Wobei ich das bei den Kugelpanoramen ja auch mache. Vielen Dank jedenfalls für Eure Hilfe. Ich probiere das dann mal aus. Wenn es mir gefällt bleibt es so, wenn nicht bleibt es auf ner externen Seite.

Viele Grüße

Tino
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Externes Skript richtig formatiert in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

Hallo Tino,

vielen Dank - jetzt habe ich eine Vorstellung und weiß genau, dass ich das nicht machen will :D

Das ist mir erheblich zu aufwändig - einbauen lässt es sich aber in Mobirise sehr einfach und wie ich finde auch ziemlich gut.

Viel Erfolg mit Deinem Plan :tu:

Ich habe die Seite mit meinen Versuchen jetzt wider gelöscht.
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Volker und 11 Gäste