Mogens Fiebrandt
Ich bin nicht sicher, ob ich gerade zu blöd zum verstehen oder erläutern bin, was mein Problem ist. 😅
Ich habe einen Contentblock, der die Files aus einem Ordner ausliest.
Dieser Ordner dient dazu pro Ordner ein Three.js-Objekt/Experience "anzuliefern", mit der immer ein Canvas bedient werden kann.
<f:for each="{data.folder}" as="item">
<f:if condition="{item.properties.extension} == 'js'">
<canvas id="canvasId{data.uid}" class="webgl" data-canvas-id="canvasId{data.uid}"></canvas>
<script type="module" src="/fileadmin{item.identifier}"></script>
</f:if>
</f:for>
Möchte man mehr als eine Experience auf der Seite darstellen, muss man ein weiteres oder mehrere weitere Contentblocks als Contentelement einfügen.
Jetzt läuft das Experience.js an und bereitet alles vor, lädt u.a. Texturen nach und bearbeitet seinen eigenen Canvas dessen ID sich aus dem Script-Tag oben ergibt, z.B.
<canvas id="canvasId123" class="webgl"></canvas>
Das JS, welches die Experience nun zusammenbaut richtet u.a. die Größe des Canvas ein, den es nutzt. In meinem Fall ziehe ich mir die Größe des Div mit der innerFrame-Class im Div innerhalb dessen der Canvas liegt.
/**
* Sizes
*/
const typo3ContentElementDiv = document.getElementById("c123") // Das mache ich noch galanter, geht besser
const canvasDiv = typo3ContentElementDiv.querySelector(".frame-inner") // galanter lösen, s.o.
const sizes = {
width: canvasDiv.clientWidth,
height: canvasDiv.clientWidth * 0.56 // = 16:9
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = canvasDiv.clientWidth
sizes.height = canvasDiv.clientWidth * 0.56
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
In jedem Fall muss das JS die spezifische uid bekommen.
Auch wenn ich die Attribute in ein speziell dafür erzeugtes Div packe, muss ich doch im Experience-JS die ID kennen, um darauf zugreifen zu können, oder?
Hoffe das war nicht zu wirr, habe mir mit dem Erklären Mühe gegeben 🙈😅