Mysterious Black Plane on CHROME

Questions
1

I have a code that worked fine for the entire year. I makes 360 degrees panorama scenes and adds objects to it.

Today when i was coding i noticed that when i look at a certain angle, a black plane show up on the view. A black plane that i didnt put there.

At first i thought it was my code. So i tried to reduce last changes of my code, and the black plane kept there. Then I got an old GIT version and black plane was there. Then i got a old version from one year ago, and the black plane was there.

So I tried to see where on scene was the black object. I removed all objects children from the scene and the camera and left only a green sphere to be rendered…and still…the black plane was there. Here is an image of the black plane over the green sphere. And notice: Only the sphere is present inside the scene on this.

image
image2101Ă—1733 46.1 KB

After almost getting crazy on this issue…i opened my code on microsoft edge and surprise!!! No black plane. So i start to think it may be a update on chrome that screwed with my entire code.

2

Yes. maybe update chrome. Check at old chrome. Also you can set wireframe:true to see what is black plane

3

Thing is i cant set the wireframe of this object to true because i didnt put it on scene. Is there a way to put all i am seeing with wireframe true?

4

Here is the web link of the game with the bug
https://liveplanet.app.br/gamephoto.html?room=1735491572646
I would like to know if others users can see the black plane on their browsers as well.

image
image1920Ă—1499 78.7 KB

You can also try it on edge. On my edge the black plane dont come.

Also…its a blinking black plane unless iff you have the mouse clicked.

5

yes all wireframe

6

How do i configure that?
Wireframe is a material choice. I dont have the object to define the material to be wireframe. Had I the object i would get it deleted.

More information…i discovered the plane is in a position close to 0,0,0
If i move my camera far from the origin i wont see the plane.
I have this as a workaround but not a solution.

7

In my new chrome there is no black plane. And i havent got vr

image
image745Ă—537 63.3 KB

8

I will try to update chrome and see if its an issue only with me.

9

No…I removed chrome and reinstalled it. Problem continues.
Tested it on VR and the black plane disapears.
It is good to know it works on vr and it may be a problem with my computer. But it is really curious bug.
will test it on cellphone and on another computer.

10

After scene you can add it to global var like:

let scene=new THREE.Scene();
window.scene=scene;

Then when you will see black plane. open browser console, tape “scene” and press Enter.
Into scene.children you will see all scene objects and can hide them.

11

Thats the thing. On my chrome browser when i see the black plane and I open the debug and get the scene.children I noticed there is no black plane there.
I did it by removing all objects unless for the green sphere. Even if i have nothing on scene but a green sphere, this black plane was showing up.
Also curiously on my pc it stay blinking. It must be a bug of my computer and my chrome. On cellphone this bug this dont happen.

12

Try browser extension Spector.js may be it help

13

I pinpointed the problem on my code.

    this._threeRenderer2 = new THREE.CSS3DRenderer();
	this._threeRenderer2.setSize( window.innerWidth, window.innerHeight );
	this._threeRenderer2.domElement.style.position = 'absolute';
	this._threeRenderer2.domElement.style.top = 0;

I had on my code two renderers…one of them was CSS3DRenderer i use to embed youtube videos. This guy for some reason was causing the problem. It was rendering a black screen over the game. By removing it the black screen disapeared.

Now that i found the problem i can try solve it to make css3drenderer work as it was working before.

Thank you for trying to help.

2 Likes
14

Mark your answer as solved! :smiley: