I am working with two types of geometries: a line-based square 2D geometry and an icon image. My goal is to center and place the icons inside the designated region of the 2D rectangle. Here is the code snippet I have written:
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 square = new THREE.Line(squareGeometry, new THREE.LineBasicMaterial({
color: color
}));
var iconGeometry = new THREE.PlaneGeometry(objSize.width, objSize.height);
var iconMaterial = new THREE.MeshBasicMaterial({ map:THREE.ImageUtils.loadTexture('images/plantIcon.png')
});
var icon = new THREE.Mesh(iconGeometry,iconMaterial);
icon.position.x = objPosition.x;
icon.position.y = objPosition.z;
combined.merge(square.geometry, square.matrix);
combined.merge(icon.geometry, icon.matrix);
var display = new THREE.Line(combined, new THREE.MeshBasicMaterial({
color: color,
}));
scene.add(display);