Verwendung des externen JS-Modules three.js

ExMatador

Hallo,
ich verwende des öfteren ein basic-HTML-Widget mit genau einem DP, in dem im Grunde ein html-Dokument als Sourcecode inkl. Javascript-Teile abgelegt ist (Client-seitige Verarbeitung).
Funktioniert auch ziemlich gut.
Jetzt möchte ich die 3D Bibliothek three.js verwenden. Bei dieser gibt es jedoch immer den Fehler

ReferenceError: THREE is not defined

Eingebunden im Head

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js" ></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/OrbitControls-2.js" ></script>

Mache ich das in einem separaten html-Dokument, klappt alles - im ioBroker nicht.
Was mache ich hier falsch? Jemand eine Idee?

Vielen Dank
Gruß ExMatador

ExMatador

@OliverIO
Hallo, ich wende mich mal direkt an Dich.
Ich habe diesen Sourcecode-Ausschnitt jetzt im body eingebunden

<body>
    <audio id="song" src="" style="display:none;"></audio>
    <div class="container">
        <div class="play-btn">PLAY</div>
    </div>
    <div id="three-container"></div>

    <script type="module">
     
    import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js";
    import { OrbitControls } from "https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/OrbitControls-2.js";

Kommt natürlich noch viel mehr.
Ist das so in Ordnung?
Vermutlich nicht, denn es kommen merkwürdige vis-Fehler.
Als HTML-Dokument im Browser läuft es aber.

Ich habe das Thema "module" eher noch nicht richtig verstanden, sorry.
Danke
Gruß ExMatador

OliverIO

@exmatador

das problem bei vis ist, das die html oberfläche von vis mit seinen widgets dynamisch erstellt wird.
wenn du in einem vis html widget ein script tag einfügst, dann wird dies erst der dom (document object model) hinzugefügt, wenn das eigentliche rahmen html schon geladen ist. leider haben wir keine möglichkeit dem vis solche bibliotheken schon so mitzugeben, das sie, wenn alles fertig geladen ist schon verfügbar sind.

wenn du nun in einem vis widget so eine bibliohtek ladest, da ist sie nach einer gewissen Zeit (das kann von millisekunden bis zu sekunden dauern) verfügbar. wenn du aber schon vor abschluss des ladevorgangs auf die variablen bspw THREE oder OrbitControls zugreifen willst, dann kommen fehler. das musst du code technisch abfangen und solange mit deinem code warten bist das abgeschlossen.

also so ungefähr so wie das folgende. ich schreib das nur mal so grob zusammen, ohne das es getestet ist, aber die idee sollte rüberkommen.

// Funktion, um zu überprüfen, ob THREE und OrbitControls geladen sind
function checkDependencies() {
    if (window.THREE && window.THREE.OrbitControls) {
        clearInterval(dependencyCheckInterval);  // Stoppt das Intervall, wenn die Abhängigkeiten geladen sind
        initializeScene();  // Hier rufst du deine Funktion auf, die die Szene initialisiert
    }
}

// Funktion, die die Szene initialisiert
function initializeScene() {
    // Dein nachfolgender Code, der auf THREE und OrbitControls angewiesen ist
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    document.body.appendChild(renderer.domElement);

    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    // Weitere Logik...
}

// Intervall starten, um nach den Abhängigkeiten zu suchen
const dependencyCheckInterval = setInterval(checkDependencies, 100);  // Alle 100ms prüfen

ExMatador

@oliverio
Hi,
vielen Dank für deine Unterstützung, hab’s so eingebaut - was soll ich sagen: die Ladefehler sind weg 🙏
Jetzt hab ich vermutlich noch ein weiteres zeitliches Problem, denn manchmal kommt die Animation, aber häufig auch nicht.
Das liegt irgendwie am Audio-Element, das ja über createMediaStreamSource(stream) gebunden wird.
Ich ändere das Audio-Objekt an anderer Stelle, damit gibts noch Probleme.

Aber dank deiner Hilfe bin ich ein großes Stück weitergekommen.
VG
ExMatador

ExMatador

@OliverIO

Hi,
So sieht jetzt das Ergebnis des THREE.js visualizer aus, der einen mp3-Radio-Stream verarbeitet.
War echt mühevoll, die 3D Engine im iobroker anzusprechen, kleinere Fehler sind beim Wechsel von Vis-Views immer noch vorhanden..
Danke dir für die Unterstützung.

Gruß ExMatador
Screen_Recording_20250429_195500_Chrome_001_001~2.mp4

OliverIO

@exmatador

Sieht gut aus.
Fehler beim View Wechsel entstehen wahrscheinlich dadurch, das das javascript weiterläuft, aber die html Elemente wo reingemalt wird, dann nicht mehr ansprechbar sind (weil hidden).
Man müsste das pausieren und bei Reaktivierung der View dann wieder einschalten.
Hängt aber auch von der genauen Fehlermeldung ab.

Community Forum

NEWS

Verwendung des externen JS-Modules three.js

Support us

636

32.6k

82.1k

1.3m