A geometry that should be displayed behind is displayed in front

Questions
, , , ,
1

We are creating a 3d screen for stacking boxes.

In previous versions of Chrome, a white floor was shown behind, On the latest versions of Chrome (111.0.5563.66) and Edge (111.0.1661.44) or later browsers, the bottom white area is displayed in front as shown below.

before:
image

after:
image

In EdgeIE mode, it works as before.

Is this a Chrome bug?

The actual code is below.

//box
let boxGeometry = new THREE.BoxGeometry(param.Width, param.Height, param.Depth);
let boxMaterial = new THREE.MeshLambertMaterial({ color: param.Color });

box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(param.Position.x, param.Position.y, param.Position.z);

let geometry = new THREE.BoxGeometry(param.Width, param.Height, param.Depth);
let edges = new THREE.EdgesGeometry(geometry);
let line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x000000 }));
box.add(line);

scene.add(box);


// floor
let floorWidth = model.Width - (model.BaseCutLL + model.BaseCutRL);
var floorGeometry = new THREE.BoxGeometry(floorWidth, 0.1, model.Depth);
var floorMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
var floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
scene.add(floorMesh)

Thanks.

2

Do you mind reproducing the issue with a live example? three.js dev template - module - JSFiddle - Code Playground

3

Sorry, I could not reproduce it.

https://jsfiddle.net/2xhgp8yv/

I thought the difference was due to the version of three.js,
Does the following switch change the version of three.js?

image
image1868×899 84 KB

I am using version 0.121.1 of three.js in my environment.

Thanks.

4

No, the version of three.js is defined in your import map. Currently, the fiddle uses the latest version r151.

5

thanks.So,I can switch versions by writing importmap as shown below,right?

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.121.1/examples/jsm/"
		}
	}
</script>

Thanks.

6

The core and the addons have to be from the same release. Try it like so:

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.121.1/build/three.module.js",
			"three/addons/": "https://unpkg.com/three@0.121.1/examples/jsm/"
		}
	}
</script>
7

I set Renderer.depth=false.
Thanks for your help!

8

Such a property does not exist. On what are you referring to?

9

When creating WebGLRender constructor,
I meant to notice that you had set the depth to false.
I referring to here.
https://threejs.org/docs/#api/en/renderers/WebGLRenderer

I don’t know why it was displayed as normal in previous versions of chrome.