I want transparent texture in 'three.js'. but i want it to mask the object behind it

Question

I want transparent texture in 'three.js'. but i want it to mask the object behind it.

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);

I found a one solution. but this is like a hack or bug.

after

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

Which is the official way? and my solution really hack?