How do I anchor the object behind the site?

Question

I managed to add objects to the html site using Three Js.

.js code for enthusiasts

import * as THREE from '../three.js-master/build/three.module.js';
import { GLTFLoader } from "../three.js-master/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "../three.js-master/examples/jsm/controls/OrbitControls.js";

const canvas = document.querySelector('.webgl');
const scene = new THREE.Scene(); // Sahne oluştur
const loader = new GLTFLoader();

const models = []; // Modelleri saklamak için bir dizi oluştur

const modelNames = [
    'ustekmek',
    'domates1',
    'domates2',
    'bacon1',
    'bacon2',
    'marul',
    'et1',
    'cheedar',
    'et2',
    'altekmek'
];

modelNames.forEach((modelName) => {
    loader.load(`../assets/hamburgers/${modelName}.glb`, function(glb){
        const root = glb.scene;
        root.position.set(-2, 0, 0);
        root.scale.set(1, 1, 1);
        root.traverse((child) => {
            if (child.isMesh) {
                child.castShadow = false;
                child.receiveShadow = true;
            }
        });
        scene.add(root);
        models.push(root); // Modeli diziye ekle
        console.log(`${modelName} başarıyla yüklendi.`);
    }, function(xhr){
        console.log(`${modelName}: ${(xhr.loaded/xhr.total * 100)}% yüklendi`);
    }, function(error){
        console.log(`${modelName}: yüklenirken bir hata oluştu`);
    });
});

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 0);
// Işığın yalnızca yukarıya doğru gölge oluşturmasını sağla
light.castShadow = false;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
};

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.set(0, 2, 3);
scene.add(camera);

const renderer = new THREE.WebGLRenderer({
    canvas: canvas
});

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false; // Nesnenin sürüklenebilirliği
controls.maxPolarAngle = Math.PI; // Nesnenin altını görmemek için "Math.PI; / 2"

renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.gammaOutput = true;
renderer.setClearColor(0xffffff); // Sahneyi beyaz yap

function updateLightPosition() {
    light.position.copy(camera.position);
    light.lookAt(scene.position);
}

function animate() {
    requestAnimationFrame(animate);
    // Modelleri döndür
    models.forEach((model) => {
        if (model) {
            model.rotation.y += 0; // Modeli yavaşça döndür
        }
    });
    controls.update(); // Kontrolleri güncelle
    updateLightPosition(); // Işık konumunu güncelle
    controls.enabled = false; // Geçici olarak OrbitControls'ü etkinleştir
    renderer.render(scene, camera); // Sahneyi render et
}
// Window boyutu değiştiğinde kamera oranlarını güncelle
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// Animasyonu başlat
animate();

It's my problems: However, when I scroll down the site, the scene remains at the top. How do I pin the scene to the back of the site? How can I write text on top of the scene? When I add any text to the HTML file, the text goes under the stage. I want the object to be in the background and the text to be above the object.