NEWS
Script im VIS Reiter „Skript“ anlegen
-
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 -
@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).