How to bring .obj models above .html elements

[sah]

I’ll start by saying that I’m new to programming and that I’m getting a lot of help from ChatGPT.

I am struggling with the index of elements in three.js and .html. I’d like to bring the .obj model above the homepage text and the behind box in .html (like the site in the screenshot).

I’m also trying to make the page scroll down when the model is zoomed out, but the code doesn’t work.

const models = [
    { 
        lowPoly: 'model1.obj', 
        highPoly: 'model1.obj', 
        mtl: 'model1.mtl',
        maxDistance: 7,  
        initialDistance: 7, 
        verticalOffset: -0.5, 
        initialRotation: { x: 0, y: 4.2, z: 0 } 
    },
    { 
        highPoly: 'model2.obj', 
        mtl: 'model2.mtl', 
        isDefault: true,
        maxDistance: 23,  
        initialDistance: 23, 
        verticalOffset: -3.5, 
        initialRotation: { x: 0, y: 3.2, z: 0 }
    }
];

let currentModelIndex = 0;
let currentObject;
let currentControls = null;
let isModelSwitching = false; 

// SCENE; CAMERA AND RENDER
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf8f3f2);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5); 
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(0x000000, 0); 
document.querySelector('.homepage').appendChild(renderer.domElement);

...

let isInteractingWithModel = false;

function handleWheel(event) {
    if (!currentControls) return true;
    
    const currentDistance = camera.position.distanceTo(currentControls.target);
    const maxDistance = currentControls.maxDistance;
    const threshold = maxDistance * 0.95; 
    
    if (currentDistance >= threshold) {
        console.log("here");

        isInteractingWithModel = false;
        return true;
    } else {
        
        isInteractingWithModel = true;
        event.preventDefault();
        event.stopPropagation();
        return false;
    }
}

[Chaser_Code]

Maybe for canvas tag add style position:absolute;z-index:100;pointer-events:none;

[immament]

From Three.js manual:

Making the Canvas Transparent

By default THREE.js makes the canvas opaque. If you want the canvas to be transparent pass in alpha:true when you create the WebGLRenderer

Link to manual with more transparent tips:

https://threejs.org/manual/#en/tips#transparent-canvas

[sah]

@sah

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

Thanks for replying; I think I already did it here.

[sah]

I think you managed to find where the problem is; if I invert the z-index of the writing with that of the canvas, the writing is no longer visible.
For the pointer-events if I put none, it no longer allows me to rotate the 3D object.
It’s probably better to make a screenshot of the page with different z-indeces to show it to you.

[manthrax]

renderer.setClearAlpha( 0 );