I created a 2D square line diagram followed by another square diagram with a sample image in the center position. However, one of them is visible while the other is hidden. I used two different geometries and materials - one with a line-based material set to a specific color and the second with an image material. I tried to merge them together but encountered some issues. Can anyone provide some insights or identify what mistake might be present in my code?
var combined = new THREE.Geometry();
var squareGeometry = new THREE.Geometry();
squareGeometry.vertices.push(
new THREE.Vector3(startX, startY, 0),
new THREE.Vector3(endX, startY, 0),
new THREE.Vector3(endX, endY, 0),
new THREE.Vector3(startX, endY, 0),
new THREE.Vector3(startX, startY, 0)
);
var squareMaterial = new THREE.LineBasicMaterial({color: color});
var square = new THREE.Line(squareGeometry, squareMaterial);
var iconGeometry = new THREE.PlaneGeometry(objSize.width/2, objSize.height/2);
var iconMaterial = new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('images/plantIcon.png')
});
var icon = new THREE.Mesh(iconGeometry,iconMaterial);
// square.holes.push( icon);
// THREE.GeometryUtils.merge(square, icon);
combined.merge(square.geometry, square.matrix);
combined.merge(icon.geometry, icon.matrix);
var merge = new THREE.Mesh(combined,new THREE.MeshBasicMaterial({
map:THREE.ImageUtils.loadTexture('images/plantIcon.png'),//color: color
}));
merge.position.x = objPosition.x;
merge.position.y = objPosition.z;
scene.add(merge);