0

Here while performing mouse wheel action the object in moving back and forth while moving the mouse wheel in or out. And also I want to know the purpose of the formula

            point.x = point.x * 2 - 1;
            point.y = -point.y * 2 + 1;

Here I have attached the function of the code where you can find the error which I have done in the calculation where zoom in or zoom out are happening in back and forth but not in healthy manner

 private actionMouseWheel = (): Function => {
        const that = this;
        const cameraManager = that._cameraHandler;
        const zoomStart = new Vector2(0, 0); //center of the position
        const zoomEnd = new Vector2(0, 0); //center of the position
        const zoomSpeed = 1.015; //speed of mouse wheel
        const zoomFactor = 2.015;
        let w;
        let xy = new Vector2();
        let dist = 0;
        let detail = {};
        let closestPoint = new Vector3();
        closestPoint = cameraManager.Target;

        const dispatchEvent = () => {
            that._orbitController.trigger('zoom', {
                type: 'zoom',
                detail: detail
            });
        };

        const interval = 15;
        let marker = true,
            counter1 = 0,
            counter2;
        function wheelStart() {
            marker = false;
            that._layerHandler.isFrustumCulled = true;
            dispatchEvent();
            wheelAct();
        }
        function wheelAct() {
            counter2 = counter1;
        }
        function wheelEnd() {
            marker = true,
                counter1 = 0,
                counter2 = 0;
            that._layerHandler.isFrustumCulled = false;
            that.render();
        }
        let pPoint = null;
        const callback = (resp) => {
            objCallback(xy, resp);
        };
        const objCallback = (point, id) => {
            point.x = point.x * 2 - 1;
            point.y = -point.y * 2 + 1;
            pPoint = null;

            const obj = that._pickingHandler.getPickingDataById(id);
            if (obj) {
                pPoint = that.updatePivotOrbitPoint(point, obj);
            }
            update(point);
            console.log("point on mouse wheel");
            console.log(point);
        };
        const update = (point) => {
            const dd = 1000; // 3048 * 0.5; // 3048mm = 10ft
            const ddd = 1000;
            if (pPoint !== null) {
                closestPoint = pPoint;
                dist = cameraManager.Eye.distanceTo(pPoint);
            }
            else {
                dist = cameraManager.Eye.distanceTo(closestPoint) > cameraManager.Dist ? cameraManager.Dist : cameraManager.Eye.distanceTo(closestPoint);
            }

            dist = dist < dd ? dd : dist;
            dist = Math.ceil(dist / (0.1 * 100));
            const _factor = dd + (dist + (zoomEnd.y - zoomStart.y)) * zoomSpeed;
            detail = {
                x: point.x,
                y: point.y,
                d: w.f,
                factor: _factor,
                callback: () => { }
            };
            wheelStart();
        };

        return ((e): void => {
            w = e.detail;
            if (!w) { return; }
            zoomEnd.copy(zoomStart);
            zoomStart.y -= w.f * 0.00025;
            xy = that.getMouseOnScreen(w.x, w.y);
            that.validatePickingIntersection(that.get2dMouseOnScreen(w.x, w.y), callback);
            zoomStart.copy(zoomEnd);
        });
    }
  • I'll be honest, the code is very difficult to read. Please provide at least a reproductible example, with stackblitz for example. – vincent Apr 23 '19 at 14:02
  • About the second question, this is explained on many places like https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z – vincent Apr 23 '19 at 14:02

0 Answers0