Question

我正在使用精彩的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方法可以用Clipping in CSS 2.1中显示的PNG蒙版或SVG路径来做到这一点，但它似乎有点过分，即使可以剪裁放大器，仍会产生方形容器的问题。另外，快速测试显示它适用于图像，但我无法使用交互式谷歌地图，请参阅jsfiddle http://jsfiddle.net/3FCcc/

我想要做的是将地图CSS3D对象（如一种纹理）投影到圆形对象上，它就像我的谷歌地图上的面具一样。

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

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

提前致谢！

Answer 1

根据那篇文章......我想它应该是这个问题吗？

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, ...)';

在Three.js中循环剪切CSS3D对象

1 个答案: