Utilizing the incredible Three.js CSS3D renderer has allowed me to achieve exceptional performance across various devices, including phones, tablets, and desktops.
I successfully integrated an overview Google map as a CSS3D object that dynamically rotates with the camera's heading, functioning smoothly.
// add the mini map to CSS3D scene
var element = document.createElement('div');
element.style.width = '300px';
element.style.height = '300px';
element.setAttribute("id", "miniMap");
document.getElementById('containerMiniMap').appendChild(element);
var gMapObject = new THREE.CSS3DObject(element);
However, I aspire for the map to be circularly clipped to align with the design preferences necessitating a circular map. Unfortunately, due to my limitations as a newcomer on StackOverflow, I can't share images yet; hence, I trust my description is adequate for you to understand ;)
Upon research, I came across CSS techniques involving PNG masks or SVG paths exemplified in Clipping in CSS 2.1. However, it appears somewhat extensive and still poses the dilemma of a square container even after clipping the map. Furthermore, initial testing revealed successful implementation with an image but struggled with integrating an interactive Google map, visible on jsfiddle http://jsfiddle.net/3FCcc/.
My desired approach involves projecting the map CSS3D object (similar to a texture) onto a circular object serving as a mask for my Google map.
circle = createMesh(new THREE.CircleGeometry(...
Has anyone attempted this before or have any recommendations?
Thank you in advance!