<script type="module">
  import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.176.0/build/three.module.js';
  import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/loaders/GLTFLoader.js';
  import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/loaders/RGBELoader.js';
  import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/postprocessing/EffectComposer.js';
  import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/postprocessing/RenderPass.js';
  import { UnrealBloomPass } from 'https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/postprocessing/UnrealBloomPass.js';
  import { FilmPass } from 'https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/postprocessing/FilmPass.js';

  // ── Scene & Camera ──────────────────────────────────────────────
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  // Initialposition definieren
	const initialCamera = { x: 0, y: 0, z: 5 };
	camera.position.set(initialCamera.x, initialCamera.y, initialCamera.z);

  // ── Renderer ────────────────────────────────────────────────────
  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#canvas_3D'),
    antialias: true,
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.toneMapping = THREE.CineonToneMapping;
  renderer.toneMappingExposure = 0.85;
  renderer.outputColorSpace = THREE.SRGBColorSpace;

  // ── Post-Processing ─────────────────────────────────────────────
  const composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));

  const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    0.35,   // Stärke  – anpassen nach Geschmack
    0.5,   // Radius
    0.85   // Schwellenwert (je niedriger, desto mehr leuchtet)
  );
  composer.addPass(bloomPass);

  const filmPass = new FilmPass(
    0.25,  // Grain-Stärke – anpassen nach Geschmack
    false  // Scanlines
  );
  composer.addPass(filmPass);

  // ── Resize ──────────────────────────────────────────────────────
  // Initiale Größe merken
	let canvasWidth = window.innerWidth;
	let canvasHeight = window.innerHeight;

	window.addEventListener('resize', () => {
  // Nur reagieren wenn sich die Breite ändert
  // oder die Höhe sich signifikant ändert (>100px = echtes Resize, nicht Browser-UI)
  	const widthChanged = window.innerWidth !== canvasWidth;
  	const heightChanged = Math.abs(window.innerHeight - canvasHeight) > 100;

  	if (!widthChanged && !heightChanged) return; // Browser-UI Änderung → ignorieren

  	// Neue Werte speichern
  	canvasWidth = window.innerWidth;
  	canvasHeight = window.innerHeight;

  	camera.aspect = canvasWidth / canvasHeight;
  	camera.updateProjectionMatrix();
  	renderer.setSize(canvasWidth, canvasHeight);
  	composer.setSize(canvasWidth, canvasHeight);
	});

  // ── HDRI Environment ────────────────────────────────────────────
  //Scene muss vor RGBELoader existieren
  const rgbeLoader = new RGBELoader();
  rgbeLoader.load(
    '/wp-content/uploads/2026/04/sundowner_overlook_1k.hdr',
    function (hdrTexture) {
      hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
      scene.environment = hdrTexture;
    }
  );

  // ── Hintergrund ─────────────────────────────────────────────────
  const texture = new THREE.TextureLoader().load('/wp-content/uploads/2026/04/0d99a8372539a08ad0b509656ced9fb33590cbd4.png');
  scene.background = texture;

  // ── Licht ───────────────────────────────────────────────────────
  const ambientLight = new THREE.AmbientLight(0xffffff);
  const pointLight = new THREE.PointLight(0xffffff, 2);
  pointLight.position.set(-0.5, 1.5, 3);
  scene.add(ambientLight, pointLight);
	const pointLightHelper = new THREE.PointLightHelper(pointLight, 1); 
	//scene.add(pointLightHelper);
	

  // ── Modell ──────────────────────────────────────────────────────
  let model = null;
  const loader = new GLTFLoader();
  loader.load(
    '/wp-content/uploads/2026/04/LT_logo_glass.glb',
    function (gltf) {
      model = gltf.scene;
      /*
      model.traverse((child) => {
        if (child.isMesh) {
          child.material = new THREE.MeshPhysicalMaterial({
            color: 0xffffff,
            metalness: 0.1,
            roughness: 0.05,
            transmission: 0.95,
            thickness: 2.0,
            ior: 1.5,
            reflectivity: 0.9,
            transparent: true,
            envMapIntensity: 1.5,
          });
        }
      });
      */
      model.scale.set(0.1, 0.1, 0.1);
      model.position.set(-0.1, 1, 0);
      scene.add(model);
    },
    (xhr) => console.log((xhr.loaded / xhr.total * 100) + '% geladen'),
    (error) => console.error('Fehler:', error)
  );

  // ── Animate ─────────────────────────────────────────────────────



let scrollY = 0;
let targetCameraY = initialCamera.y;
let targetCameraZ = initialCamera.z;

window.addEventListener('scroll', () => {
  scrollY = document.body.getBoundingClientRect().top;
  targetCameraZ = initialCamera.z - scrollY * -0.005;
  targetCameraY = initialCamera.y + scrollY * -0.0025;
}, { passive: true });

/*
document.body.onscroll = moveCamera;
moveCamera();
*/
	
	
  const clock = new THREE.Clock(); 

	function animate() {
  	requestAnimationFrame(animate);
    camera.position.z += (targetCameraZ - camera.position.z) * 0.15;
  	camera.position.y += (targetCameraY - camera.position.y) * 0.15;
 
  
  if (model) {
    const t = clock.getElapsedTime(); 
    
      
    model.rotation.y = Math.sin(t * 0.5) * 0.15; // ±0.15 rad (~8°)
    model.rotation.x = Math.sin(t * 0.3) * 0.08; // ±0.08 rad (~4°)

    
  }

  composer.render();
}
animate();
</script>