mapboxとthree.jsを使用して非アクティブマップを作成しました。 そしてマップをドラッグすると、マップボックス上のレイヤーであるthree.jsシーンにオブジェクトをドラッグアンドドロップすることもできます。 http://test3.stdmed.ru 私は問題があります:私がドラッグを開始すると、three.jsシーンのオブジェクトは自動的にカーソル位置に置かれますが、これは正確ではありません。この効果はジオポジションを破壊するためです。オブジェクトがドラッグ中にカーソルを移動する(EventsControls + three.js)
この例では、次のような単純な効果があります。http://alexan0308.github.io/threejs/examples/#controls_events_example カーソルを中央に置くと、カーソルが中央に配置されます。しかし、私はそれをこの効果なしでドラッグする必要があります。ここで
は私のコードは、マップ上で使用されます。EventsControls2 = new EventsControls(camera, renderer.domElement);
EventsControls2.attach(plane);
EventsControls2.attachEvent('mouseOver', function() {
controls.enabled = false;
controls.target0.copy(controls.target);
});
EventsControls2.attachEvent('mouseOut', function() {
controls.reset();
controls.target.copy(controls.target0);
controls.object.position.copy(controls.position0);
controls.update();
controls.enabled = true;
});
EventsControls = new EventsControls(camera, renderer.domElement);
EventsControls.map = plane;
EventsControls.attachEvent('mouseOver', function() {
this.container.style.cursor = 'pointer';
});
EventsControls.attachEvent('mouseOut', function() {
this.container.style.cursor = 'auto';
});
EventsControls.attachEvent('dragAndDrop', function() {
this.container.style.cursor = 'move';
//this.focused.position.y = this.previous.y;
//this.focused.position.x = this.previous.x;
});
EventsControls.attachEvent('onclick', function() {
controls.enabled = false;
});
EventsControls.attachEvent('mouseUp', function() {
this.container.style.cursor = 'auto';
});