Question

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

我从

更改了相机设置

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

到

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

因为这个设置我点击了多边形的定义有问题。 Creating clickable polygons 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

Three.js相机位置改变

0 个答案: