三个js：透明对象为画布下方的DOM添加颜色

Question

我正在开展一个项目，我想在网页上放置对象， 你可以看到进展here。 我现在使用2d平面来浮动物体，它与它后面的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()并为材料plane.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; 

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