How to implement VR and TOUCH?

[11113]

VR and touch trigger at the same time!

like this：http://lacostewinter.seeourwork.cn/en/experience

Is there an example?

I think it will be useful!!

[yaustar]

There’s not a direct example of this. The closest is the VR Labs: https://developer.playcanvas.com/en/tutorials/webvr-lab/

You will have to change the non-VR input logic to be more traditional touch rather than a ‘fake’ VR controller.

[11113]

https://developer.playcanvas.com/en/tutorials/webvr-lab/
Touch can’t move up and down

---

It’s ‘fake’ VR

I want to use the JS API implementation

like this：https://stackoverflow.com/questions/35283320/three-js-rotate-camera-with-both-touch-and-device-orientation?answertab=votes#tab-top

[yaustar]

Oh, it sounds like you want magic window.

This is the closest example: https://developer.playcanvas.com/en/tutorials/webvr-360-image/ (Edit you will need to fork this as the WebVR implementation in the published build is out of date).

You will have add the logic to allow for touch up/down and also check that it doesn’t go beyond -/+180 degrees on the pitch (x axis).

[11113]

There are two problems with using the magic window

1.The content is not full screen，Mobile phone vertical.

2.Up and down the touch will appear tilt.

LookCamera.prototype.update = function (dt) {
    // Update the camera's orientation
    
    this.ex = pc.math.lerp(this.ex, this.targetEx, dt / 0.2);
    this.ey = pc.math.lerp(this.ey, this.targetEy, dt / 0.2);
        
    if (this.magicWindowEnabled) {
        this.ex = pc.math.clamp(this.ex, -180, 180);
        // If we are using the magic window, then only use the touch x to rotate the view horizontally
        this.magicWindowOffsetEntity.setLocalEulerAngles(this.ex, this.ey, 0);
    }
    else {
        this.entity.setLocalEulerAngles(this.ex, this.ey, 0);
    }   
    
};

But the magic window is a good idea

[11113]

Use your method, the problem is solved, thank you!

https://playcanv.as/p/K8SrXTar/

[11113]

https://playcanvas.com/editor/scene/471545
This Project(webvr-360-image)

https://playcanvas.com/editor/code/434266?tabs=5480046
This Code(magic window)

How can we rotate up and down?(Feeling a bit hard! )

If this is changed, there will be tilt

LookCamera.prototype.update = function (dt) {
    // Update the camera's orientation
    
    this.ex = pc.math.lerp(this.ex, this.targetEx, dt / 0.2);
    this.ey = pc.math.lerp(this.ey, this.targetEy, dt / 0.2);
        
    if (this.magicWindowEnabled) {
        this.ex = pc.math.clamp(this.ex, -180, 180);
        // If we are using the magic window, then only use the touch x to rotate the view horizontally
        this.magicWindowOffsetEntity.setLocalEulerAngles(this.ex, this.ey, 0);
    }
    else {
        this.entity.setLocalEulerAngles(this.ex, this.ey, 0);
    }
};

[yaustar]

Try the following: (note that it doesn’t restrict the user from fully rotating vertically to the point where they are upside down)

LookCamera.prototype.update = function (dt) {
    // Update the camera's orientation
    
    this.ex = pc.math.lerp(this.ex, this.targetEx, 1);
    this.ey = pc.math.lerp(this.ey, this.targetEy, 1);
        
    var q2 = new pc.Quat();

    if (this.magicWindowEnabled) {
        this.magicWindowOffsetEntity.setLocalEulerAngles(0, this.ey, 0);
        var rotation = this.magicWindowOffsetEntity.getRotation();

        q2.setFromAxisAngle(this.entity.right, this.ex);
        q2.mul(rotation);
        
        this.magicWindowOffsetEntity.setRotation(q2);
    }
    else {
        this.entity.setLocalEulerAngles(this.ex, this.ey, 0);
    }
};

[11113]

Thanks very much，It looks really incredible

https://playcanv.as/b/mUTEWKjT/

[yaustar]

If you do just want to use device orientation and not WebVR magic window, I made a start here that uses the same code as three.js: https://playcanvas.com/editor/code/512956?tabs=9674871

It doesn’t handle any touch panning but it should be relatively trivial to add the code shown in the stackoverflow link you posted.

[11113]

OK，I’m using HMD now！

I’m trying to change it to deviceorientation

Using deviceorientation, in your demo, you should set enablevr=false