在three.js中使用正交相机,同时拖动对象鼠标指针到达中心

时间:2015-06-17 06:38:28

标签: javascript 3d three.js

我正在尝试在正交相机视图中拖动对象。当我开始拖动对象跳转并且鼠标指针到达对象的中心时,它开始正常拖动,但鼠标点仍然在中心。我希望鼠标指针应该放在我放置的位置并拖动对象。

所以我想在使用光标在正交视图中移动模型时,此时对象的中心会移动到光标。

我希望能够选择模型上的任何位置,而不会让中心跳到光标。这是我的代码

 /* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


/*
 * Running this will allow you to drag three.js around the screen.
 * 
 * feature requests:
 *  1. add rotation?
 *  2. axis lock
 *  3. inertia dragging
 *  4. activate/deactivate? prevent propagation?
 *
 * @author zz85 from 
 * follow on http://twitter.com/blurspline
 */
THREE.DragControls = function(_camera, _objects, _domElement, objects) {

    if (_objects instanceof THREE.Scene) {
        _objects = _objects.children;
    }

    _objects = objects;

    var objectstodrag = new Array();

    var _projector = new THREE.Projector();

    var _selected;

    var me = this;
    _offset=new THREE.Vector3();

    this.onDocumentMouseMove = function(event) {

        var elem = _domElement;
        var rect = elem.getBoundingClientRect();

        x = (event.clientX - rect.left) / rect.width;
        y = (event.clientY - rect.top) / rect.height;

        var vector = new THREE.Vector3((x) * 2 - 1, -(y) * 2 + 1, 0.5);

        var raycaster = _projector.pickingRay(vector, _camera);

        if (_selected) {
            var targetPos = raycaster.ray.direction.clone().multiplyScalar(_selected.distance).add(raycaster.ray.origin);
          // targetPos.sub(_offset);
          var deltax = targetPos.x - _selected.object.position.x;
          var deltay = (-targetPos.z) - _selected.object.position.y;
            var deltaz = targetPos.y - _selected.object.position.z;

            var xenable = true;
            var yenable = true;
            var zenable = true;

            if (selViewMode == "front" || selViewMode == "back") {
                yenable = false;
            } else if (selViewMode == "right" || selViewMode == "left") {
                xenable = false;
            } else if (selViewMode == "top" || selViewMode == "bottom") {
                zenable = false;
            } else {
                return;
            }

            for (var i = 0; i < objectstodrag.length; i++) {
                if (xenable == true) {
                    objectstodrag[i].position.x += deltax;
                     console.log('xaxis')
                   // objectstodrag[i].position.x = targetPos.x;
                  //  objectstodrag[i].position.x =objectstodrag[i].position.x /4;
                }
                if (yenable == true) {
                     objectstodrag[i].position.y += deltay;
                       console.log('yaxis')
                   // objectstodrag[i].position.y = targetPos.z;
                 //   objectstodrag[i].position.y=objectstodrag[i].position.y/4
                }
                if (zenable == true) {
                     objectstodrag[i].position.z +=deltaz;
                       console.log('zaxis')
                   // objectstodrag[i].position.z = targetPos.y;
                  //  objectstodrag[i].position.z=objectstodrag[i].position.z/4;
                }
            }

            thingiview.updateObjectPostion(_selected.object.geometry);

            return 1;

        }

        var intersects = raycaster.intersectObjects(_objects);

        if (intersects.length > 0) {

            _domElement.style.cursor = 'pointer';

        } else {

            _domElement.style.cursor = 'auto';

        }
        return intersects.length;
    }

    this.onDocumentMouseDown = function(event) {

//        // Do not show cursor move for autonesting in orthogonal views
//        if (document.getElementById('autonesting').value == "true" && selViewMode != "iso")
//            return;

        var elem = _domElement;
        var rect = elem.getBoundingClientRect();

        x = (event.clientX - rect.left) / rect.width;
        y = (event.clientY - rect.top) / rect.height;

        var vector = new THREE.Vector3((x) * 2 - 1, -(y) * 2 + 1, 0.5);

        var ray = _projector.pickingRay(vector, _camera);
        var intersects = ray.intersectObjects(_objects);

        if (intersects.length > 0) {

            if (intersects[0].object.material.materials[0].color.getHex() == selectedObjectColor)
            {
                _selected = intersects[0];
                 _offset.copy(_selected.point).sub(_selected.object.position);
                _domElement.style.cursor = 'move';

                objectstodrag.splice(0, objectstodrag.length);
                objectstodrag = [];

                for (var i = 0; i < _objects.length; i++) {
                    if (_objects[i].geometry.enabled && _objects[i].material.materials[0].color.getHex() == selectedObjectColor) {
                        objectstodrag.push(_objects[i]);
                    }
                }
            } else {
                objectstodrag.splice(0, objectstodrag.length);
                objectstodrag = [];
            }
        }

        if (me.onHit)
            me.onHit(intersects.length > 0);

        if (intersects != undefined) {
            if (intersects[0] != undefined) {
                if (intersects[0].object.material.materials[0].color.getHex() == selectedObjectColor) {
                    return intersects.length;
                }
            }
        }
        return 0;
    };

    this.onDocumentMouseUp = function(event) {

        if (_selected) {

            if (document.getElementById("autonesting").value == "false") {
                setPositionOnRotationInManualNest(true);
            }

            if (me.onDragged)
                me.onDragged();

            _selected = null;
        }

        _domElement.style.cursor = 'auto';

    };


};

0 个答案:

没有答案