2

我正在使用出色的 Three.js CSS3D 渲染器在手机和平​​板电脑以及台式机上获得出色的性能。

我添加了一个谷歌地图概览作为一个 CSS3D 对象，它随着相机的方向旋转，效果很好

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

，但我希望地图具有圆形剪裁以适合需要地图为圆形的设计。我有一张很好的照片显示它，但是对于stackoverflow我是新手，我还不能发布图片，所以我希望我的描述足够精确，让你弄清楚；）

经过调查，我发现 CSS 方法可以使用 PNG 掩码或 SVG 路径来执行此操作，如CSS 2.1 中的 Clipping 中所示，但它似乎有点矫枉过正，即使可以剪裁放大器，仍然会产生方形容器的问题。此外，快速测试表明它适用于图像，但我无法使其适用于交互式谷歌地图，请参阅 jsfiddle http://jsfiddle.net/3FCcc/

我想做的是将地图 CSS3D 对象（如一种纹理）投影到一个圆形对象上，该对象就像我的谷歌地图上的蒙版。

 circle = createMesh(new THREE.CircleGeometry(...

有人做过这个或任何建议吗？

提前致谢 ！

4

1 回答 1

0

根据那篇文章......我想它应该是这样的？

var element = document.createElement( 'div' );
element.style.width = '300px';
element.style.height = '300px';
element.style.clipPath = 'polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...)';
于 2013-11-16T14:00:10.393 回答