Css3d with webgl

Questions
1

After fusion, only div will be displayed and translucent, so what should I do to hide plane

QQ图片20200424090456
QQ图片202004240904561315×706 46.1 KB

2

When do you want to hide the plane? If you want to hide it when it’s facing away from the camera you can use the CSS rule: backface-visibility: hidden; https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

You can also hide it with

  • opacity: 0; or
  • display: none; or
  • transform: scale(0);…

I mean, there are tons of ways of hiding things.

3

I mean hide the plane, but I can adjust the div translucent effect through css style

4

Can you see the four white corners of the plane.

QQ截图20200424102905
QQ截图202004241029051683×808 121 KB

mesh code is

var boardGeometry = new THREE.PlaneGeometry(120, 50);
		var boardMaterial = new THREE.MeshBasicMaterial({
			color: 0x000000,
			opacity: 0.0,
			transparent:true,
			blending:THREE.NoBlending,
			side: THREE.DoubleSide
		});
		var board = new THREE.Mesh(boardGeometry, boardMaterial);
		board.name = "信息提示框"
		board.position.x = position.x;
		board.position.y = position.y;
		board.position.z = position.z;

		board.rotation.x = rotation.x;
		board.rotation.y = rotation.y;
		board.rotation.z = rotation.z;
		board.uuid = device_data["wdId"]
		board.castShadow = true;
		board.receiveShadow = true;