Can orbitCamera get the mouse movement of the parent page?

I placed a model in the iframe of a parent page. This iframe has a set size, not full screen coverage.If I slide the mouse in the area outside the iframe, the model will not move, only in the area of the iframe. I want to move the mouse in the window of the parent page(anywhere in the parent page) to move the model in the iframe. What should I do?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://playcanv.as/b/4892f333" style="position: absolute; width: 50%; height: 50%; top: 0; left: 0; border: 0;"></iframe>

</body>
</html>

MouseInput.prototype.initialize = function() {
    this.orbitCamera = this.entity.script.orbitCamera;
        
    if (this.orbitCamera) {
        var self = this;
        
        var onMouseOut = function (e) {
           self.onMouseOut(e);
        };
        
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
        this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
        this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
        this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);


        // Listen to when the mouse travels out of the window
        window.addEventListener('mouseout', onMouseOut, false);
        
        // Remove the listeners so if this entity is destroyed
        this.on('destroy', function() {
            this.app.mouse.off(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
            this.app.mouse.off(pc.EVENT_MOUSEUP, this.onMouseUp, this);
            this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
            this.app.mouse.off(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);


            window.removeEventListener('mouseout', onMouseOut, false);
        });
    }
    
    // Disabling the context menu stops the browser displaying a menu when
    // you right-click the page
    this.app.mouse.disableContextMenu();
  
    this.lookButtonDown = false;
    this.panButtonDown = false;
    this.lastPoint = new pc.Vec2();
};

pc.EVENT_ MOUSEDOWN can be the mouse event of the top-level window?

The events are tied to the browser events on the Window of the app. I don’t know enough about web if it’s possible to also listen to browser input events from the parent

If it is possible, then you could change the orbit camera input to listen to the browser raw events instead.

Another alternative is to have the app as a canvas and the ‘parent’ page all on one page instead of an iframe.

See Embedding PlayCanvas into a webpage without iframe - #28 by Cheburashka for ways to do that.

I did a simple verification. I reduced the canvas size by half, but the mouse events from the part of the parent page that does not have a canvas still did not pass into the canvas. :disappointed: * Maybe I should try listening for mouse events from the parent page