Put an object over another Object

Questions
1

Hi there,
I’m trying to load an obj image over another one but when I move the first object over another one, It’s covering the first object.

Here’s the image:

photo_2020-06-16_20-36-02
photo_2020-06-16_20-36-021158×539 91.3 KB

Also, my code is based on https://threejs.org/examples/#webgl_multiple_elements with a little change to load obj images, And I changed the OrbitControls to TrackballControls.

2

You’ll need to enable alpha on the renderer to see one canvas through another. https://threejs.org/docs/#api/en/renderers/WebGLRenderer.

Note that if you want objects to be shown overlapping and arranged in 3D space, the example you link to is not the right way to do that – you should render everything in a single scene and canvas instead.

3

Sorry for late response, I have the alpha in WebGLRenderer as you can see below:

this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true,
alpha: true,
});
this.renderer.setClearColor(0xffffff, 0);

So it might not the problem.

Capture
Capture1366×667 342 KB

As you can see the div that I made occupy the space, I only want the object not the div.

Also, I have to mention that I don’t need a 3D space, I just want these 3D objects over each other. e.x. We have a desk and have a vase of it.

Thanks for your help.

4

I think I should remove the div elements, but where should I place the 3D images?