2

私は素晴らしい Three.js CSS3D レンダラーを使用して、デスクトップだけでなく携帯電話やタブレットでも優れたパフォーマンスを実現しています。

カメラの向きに合わせて回転するCSS3Dオブジェクトとして概観Googleマップを追加しましたが、これは非常にうまく機能します

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

、しかし、マップが円形であることを必要とするデザインに合わせて、マップに円形のクリッピングを持たせたいと思います。私はそれを示す素敵な写真を持っていますが、スタックオーバーフローに慣れていないので、まだ写真を投稿することはできません.

調査の結果、 CSS 2.1 のクリッピングに示されているように、PNG マスクまたは SVG パスのいずれかを使用してこれを行う CSS メソッドを見つけましたが、やり過ぎのようで、アンプをクリップできる場合でも、正方形のコンテナーの問題が発生します。さらに、簡単なテストでは、画像で動作することが示されていますが、インタラクティブな Google マップでは動作しませんでした。jsfiddle http://jsfiddle.net/3FCcc/を参照してください。

私がやりたいことは、マップ CSS3D オブジェクト (テクスチャのようなもの) を、Google マップのマスクのように機能する円オブジェクトに投影することです。

 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 に答える