Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[ExMatador]

Hallo,
ich möchte in diesem VIS-Reiter ein globales Skript anlegen. Dabei benötige ich THREE.JS.
Das Einbinden via Import klappt nicht (Fehler: outside module).
Aber das Einbinden via require klappt auch nicht:
const THREE = require („THREE“)
Three habe ich im JavaScript Adapter hinzugefügt.
Vielleicht hat einer der Entwickler eine Idee.

Vielen Dank
Gruß ExMatador

[MCU]

@exmatador Geht nur bis V1.6.0

<div id="threejs" style="width:600px; height: 400px"></div>

Skripte-Reiter

(function loadThree(url, onload){
  var s = document.createElement('script');
  s.src = url;
  s.onload = onload;
  s.onerror = e => console.error('THREE laden fehlgeschlagen:', e);
  document.head.appendChild(s);
})(
  'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js', // UMD-Build
  function init(){
    console.log('THREE geladen:', typeof THREE); // sollte "object" loggen
    setTimeout(function(){
    const container = document.getElementById('threejs');
    if (!container) {
      console.error('Container #threejs fehlt!');
      return;
    }
    const w = container.clientWidth, h = container.clientHeight;

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias:true });
    renderer.setSize(w, h);
    container.appendChild(renderer.domElement);

    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(),
      new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    );
    scene.add(cube);
    camera.position.z = 5;

    (function animate(){
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    })();
    },300)
  }
);

Hinweis: In neueren Three-Versionen liefern CDNs oft nur ESM (three.module.js), was in VIS nicht läuft (Unexpected token export).