THREEJS - Bing地图：对象不会保留在初始坐标处

Question

我在google（http://build-failed.blogspot.it/2015/02/displaying-3d-objects-on-bing-maps.html）上创建了此代码，以便将对象放在Bing地图上的某些特定坐标上。但是我不明白为什么当我改变库时这不起作用！

库70工作，而库76不起作用

var MM = Microsoft.Maps;
var map;

var scene;
var camera;
var renderer;

var plane;

var startWidth;

var boxe;

var raycaster = new THREE.Raycaster();

function loadMap() {

    document.getElementById("log").innerHTML += "> Loading map";


    map = new MM.Map(document.getElementById("mapDiv"), {
        center: new MM.Location(45.06, 7.66),
        zoom: 10,
        inertiaIntensity: 0.4,
        mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
        labelOverlay: Microsoft.Maps.LabelOverlay.hidden,
        disableBirdseye: true,
        credentials:"xxx"});

    MM.Events.addHandler(map, 'viewchange', updatePosition);

    loadCanvas(map);

}

function loadCanvas(map) {

    document.getElementById("log").innerHTML += "> Starting webgl";

    var mapDiv = map.getRootElement();

    var width = map.getWidth();
    var height = map.getHeight();

    renderer = new THREE.WebGLRenderer( { alpha: true } );
    renderer.shadowMap.enabled = true;

    renderer.setSize(width, height);
    mapDiv.parentNode.lastChild.appendChild( renderer.domElement );

    renderer.domElement.style.position = "absolute";
    renderer.domElement.style.top = "0px";
    renderer.domElement.style.left = "0px";

    scene = new THREE.Scene();


    camera = new THREE.PerspectiveCamera( 75, width / height, 1, 1000 );
    camera.position.z = 100;

    document.getElementById("log").innerHTML += "> Loading texture";
    document.getElementById("log").innerHTML += "> Creating boxes";

    var geometry = new THREE.BoxGeometry( 5, 5, 10 );
    var material = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
    var cube = new THREE.Mesh( geometry, material );
    cube.position.z = 5;

    var pivot = new THREE.Object3D();
    pivot.lat = 45.06;
    pivot.lon = 7.66;

    cube.position.x = 10;

    pivot.add( cube );
    scene.add( pivot );
    boxe = pivot;

    plane = new THREE.Mesh(new THREE.PlaneBufferGeometry (1000, 1000), new THREE.MeshPhongMaterial({color: 0xFFFF00}));

    plane.visible = false;
    scene.add(plane);

    var axisHelper = new THREE.AxisHelper( 10 );
    scene.add( axisHelper );
    var light = new THREE.AmbientLight( 0x404040 );
    scene.add( light );


    var pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(0, 300, 200);
    scene.add(pointLight);

    startWidth = getCurrentWidth();

    render();

    updatePosition({linear:true});

    document.getElementById("log").innerHTML = "";       

}


function render() {

    renderer.render( scene, camera );
}

function updatePosition(e) {

    if(!e.linear)
    {

            var currentWidth = getCurrentWidth();
            var diff = startWidth / currentWidth;
            boxe.scale.set(diff,diff,diff);
    }

    var mouse = new THREE.Vector2();
    var latitude = boxe.lat;
    var longitude = boxe.lon;

    var pixelCoordinate = map.tryLocationToPixel(new MM.Location(latitude, longitude),MM.PixelReference.control);

    mouse.x = ( pixelCoordinate.x / window.innerWidth ) * 2 - 1;
    mouse.y = - ( pixelCoordinate.y / window.innerHeight ) * 2 + 1;



    raycaster.setFromCamera( mouse, camera);   

    var intersects = raycaster.intersectObject(plane);

    if(intersects.length > 0) {
        boxe.position.x = intersects[0].point.x;
        boxe.position.y = intersects[0].point.y;            
    }

    window.requestAnimationFrame(render);

}


function getCurrentWidth() {

    var bounds = map.getBounds();

    var nw = bounds.getNorthwest();
    var se = map.getBounds().getSoutheast();

    return latLongToPixelXY(se.latitude, se.longitude, 10).x - latLongToPixelXY(nw.latitude, nw.longitude, 10).x;

}

function latLongToPixelXY(latitude, longitude, levelOfDetail) {

    var sinLatitude = Math.sin(latitude * Math.PI / 180);
    var pixelX = ((longitude + 180) / 360) * 256 * (2 << (levelOfDetail - 1));
    var pixelY = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI)) * 256 * (2 << (levelOfDetail - 1));

    return {
        x: pixelX,
        y: pixelY};

}

当我使用鼠标移动地图时，对象不会保留在初始坐标处，而是保持在中心位置。我认为对象与隐形平面和地图断开连接。