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!!
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!!
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.
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
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).
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
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);
}
};
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);
}
};
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.
OK,I’m using HMD now!
I’m trying to change it to deviceorientation
Using deviceorientation
, in your demo, you should set enablevr=false