0

我正在为 Google Maps API https://github.com/ubilabs/google-maps-api-threejs-layer使用 Three.js 层来在 google 地图上创建 WebGL 层。

我已将相机设置从

this.camera = new THREE.OrthographicCamera(0, 1, 0, 1, -3000, 3000);

至

this.camera = new THREE.OrthographicCamera(0, 1, 1, 0, 1, 3000);

因为使用此设置，我在单击哪个多边形时遇到了问题。 创建可点击的多边形three.js 使用旧的相机设置，相机看起来像倒置，谷歌地图缩放和拖动的方向与WebGL层相同，但新设置的方向相反。如何让相机像谷歌地图一样向同一个方向移动而不返回旧的构造函数设置？

绘制和调整大小方法：

ThreejsLayer.prototype.draw = function () {

if (!this.map) { return; }

var bounds = this.map.getBounds();

var topLeft = new google.maps.LatLng(
  bounds.getNorthEast().lat(),
  bounds.getSouthWest().lng()
);

var projection = this.getProjection();
var point = projection.fromLatLngToDivPixel(topLeft);

this.canvas.style[ThreejsLayer.CSS_TRANSFORM] = 'translate(' +
    Math.round(point.x) + 'px,' +
    Math.round(point.y) + 'px)';

if (this.firstRun) {
    this.firstRun = false;

    if (this.callback) {
        this.callback(this);
    }
}

this.update();

};

ThreejsLayer.prototype.resize = function () {

if (!this.map) { return; }

var div = this.map.getDiv(),
  width = div.clientWidth,
  height = div.clientHeight;

if (width == this.width && height == this.height) { return; }

this.width = width;
this.height = height;

this.renderer.setSize(width, height);
this.update();

};

ThreejsLayer.prototype.update = function () {

var projection = this.map.getProjection(),
  zoom, scale, offset, bounds, topLeft;

if (!projection) { return; }

bounds = this.map.getBounds();

topLeft = new google.maps.LatLng(
  bounds.getNorthEast().lat(),
  bounds.getSouthWest().lng()
);

zoom = this.map.getZoom();
scale = Math.pow(2, zoom);
offset = projection.fromLatLngToPoint(topLeft);

this.resize();

this.camera.position.x = offset.x / 256;
this.camera.position.y = offset.y / 256;

this.camera.scale.x = this.width / 256 / scale;
this.camera.scale.y = this.height / 256 / scale;

this.render();

};

源代码http://www.tempfiles.net/download/201309/320084/examples.html

4

0 回答 0