我希望在'three.js＆＃39;中有透明的纹理。但我希望它掩盖它背后的对象

Question

我希望在＆＃39; three.js＆＃39;中使用透明纹理。但我希望它掩盖它背后的物体。

before

geometry = new THREE.PlaneGeometry(100, 100);

// blue =====
material = new THREE.MeshBasicMaterial({
    color: 0x0000FF,
    side: THREE.DoubleSide
});

bluePlane = new THREE.Mesh(geometry, material);
bluePlane.position.set(0, 0, 0);
scene.add(bluePlane);

// red =====
material = new THREE.MeshBasicMaterial({
    color: 0xFF0000,
    side: THREE.DoubleSide
});

redPlane = new THREE.Mesh(geometry, material);
redPlane.position.set(-50, 50, 1);
scene.add(redPlane);

我找到了一个解决方案。但这就像一个黑客或错误。

after

// red =====
material = new THREE.MeshBasicMaterial({
    color: 0xFF0000,
    side: THREE.DoubleSide,
    map: new THREE.Texture()
});

哪种官方方式？我的解决方案真的很糟糕吗？