Javascript 三个js:Transparent对象为画布下方的DOM添加颜色

我正在做一个项目，我想让物体漂浮在网页上， 你可以看到进展。 我现在使用一个二维平面来浮动对象，它的大小与它后面的div相同，并且我已经将平面的不透明度设置为0

这会产生所需的效果，但有一个问题正在发生。对象在div周围浮动，当在平面后面时变得不可见，这很好。渲染器是透明的renderer=new THREE.WebGLRenderer{alpha:true}；所以我可以看到下面的DOM，这很好。但是隐藏浮动对象的透明平面为DOM添加了白色。这只发生在平面后面的DOM元素上。当画布后面的dom不在平面后面时，将显示正确的颜色

以下是创建平面的代码：

var plane = new THREE.Mesh(new THREE.PlaneGeometry(160, 400), new THREE.MeshNormalMaterial());
plane.overdraw = true;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = -100;
plane.material.opacity = 0;

编辑： 问题是由材料类型引起的。通过使用THREE.MeshBasicMaterial而不是THREE.MeshNormalMaterial，并向材质平面添加颜色。material.color='0xffffff'，问题得到了解决！创建平面的最终代码如下所示：

var plane = new THREE.Mesh(new THREE.PlaneGeometry(160, 400), new THREE.MeshBasicMaterial());
plane.overdraw = true;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = -100;
plane.material.color = '0xffffff';
plane.material.opacity = 0; 

---

希望这能帮助人们面对同样的问题。

你的飞机是不透明的。必须将material.transparent设置为true。此外，透支不是网格的属性。嗨，韦斯特，谢谢你的回复。通过设置material.transparent=true。漂浮在飞机后面的物体也将可见。理想的效果应该是在画布后面的DOM后面浮动的对象。通过将材质从“普通”更改为“基本”，并为材质添加颜色，问题得以解决！