I create webvr by three.js and I use DeviceOrientationControls to controls on the mobile device and create recenter button but I don't know how to do it, I can create this function with orbitControls on the desktop by config controls.position to default position but it doesn't work on mobile.
Recenter desktop code:
button.onclick = () =>{
controls.object.position.set(
1.2246467992175396e-20,
1.6,
0.00010000000002024652
);
};
Related
I am building an A-Frame application and when in VR mode I can use the keyboard WASD to navigate and look up or down with movement to change camera height. The camera is facing forward except when I rotate my head in Oculus rift which works fine. In some Oculus apps such as home when you teleport you can rotate the thumbstick so that the direction you face changes after you teleport. Is there a way to change camera rotation with the keyboard in A-frame? I am using A-frame extras and my camera rig code is below. Thanks!
<a-entity id="rig" movement-controls="fly: true; speed: 0.1" wasd-controls position="11 1.5 2" >
<a-entity camera look-controls></a-entity>
</a-entity>
Add a rotation component to the id='rig' entity. Then you can make a new custom component ('overrotate'), and also add that to the id='rig' entity. Program overrotate to listen for keyboard input (whatever keys you like), and within that listener function, call the rotation component with a setAttribute(). Because you are now rotating the parent of the camera (the rig), you will still get your look-controls rotation of the camera, and also the override rotation for the rig, driven by keyboard input.
I am trying to create a First person view in A-frame using the .obj model of a car.
The camera has been positioned close to the driver's seat, and there is a timed interval in javascript that moves the camera position by doing trignometric calculations and moves the camera accordingly.
Here are two problems I am facing
1) How do you make this smoother? Is there a hook for the render loop in A-frame which can be accessed in javascript? I cant seem to find the documentation for it.
2) When I view the above page in VR mode on the phone ( Android 9), the animation created stops abruptly, which works well in fullscreen mode.
The code for the html is here https://raw.githubusercontent.com/CuriosityGym/VRWithAframe/master/templates/class3-models.html
The example can be accessed here http://cgaframe.herokuapp.com/class3
Thank You!
You have a setInterval that fires every 100ms, animating the car at 10fps. That’s why it’s not smooth. Create a component and use the tick method to animate
In addition, you should not animate the camera directy because its position will be overriden by the headset pose in VR mode. Setup and animate a camera rig
Is it possible to add a Google Cardboard view camera, as shown in the image below, to Google VR View, using Three.js? If so, how can I do it?
More specifically, how can I add Three.js to the Google VR View code below?
function onLoad() {
// Load VR View.
vrView = new VRView.Player('#vrview', {
width: window.innerWidth,
height: window.innerHeight,
video: 'crusher-final.mp4',
is_stereo: true,
loop: false,
});
}
This is not possible using the VRView-library as it runs within an iframe and doesn't provide any interface for you to add content to the 3d-views. However, it is fully open-source and implemented using three.js, see here for the source-code: https://github.com/googlevr/vrview
So you could use that code and add your stuff to it or implement it yourself.
The easiest way to do it is to use the WebVR-polyfill that does most of the work automatically. This will allow you to use the WebVR-API even if it is not yet supported by the browser.
Three.js has support for the WebVR-API built in, so there is not much more to do than to enable it using renderer.vr.enabled = true and setting the VR display to use via navigator.getVRDisplays().then(displays => renderer.vr.setDevice(displays[0]));.
See the webvr-examples and the WebVR-specification for further reference.
I am developing a web application that uses 3d buildings as models. I want to create a button that places the camera so that the model is in a suitable position, however when I rotate the camera manually the mouse control resets it again.
Sample here:Link
If I enable //controls.update() the rotation doesn't work. With //controls.update() disabled the camera rotate fine but when I use the mouse, the camera is reset.
¿What can I do? Thanks!
You shouldn't directly change the rotation of the camera, instead you should change the position+target.
When you call controls.update() the rotation of the camera will be calculated based on the position of the camera (the location of the camera) and the target of the controls (the location of focus).
For example you can do:
controls.target.set(0,0,1);
camera.position.set(-0.041, 1.9, -1.21);
controls.update();
i want to disable the camera rotation, while being on mobile.
I though making look-controls="hmdEnabled:false" would disable moving the camera along with the mobile device, yet it didn't work.
I tried to find which controls should i disable, but i only found some intel stating, that WebVr drivers rotate the scene #HMD orientation, not directly from the gyroscopes.
Nonetheless, I have no idea how to lock the camera, so it can be only moved by dragging Your finger.
Thanks in advance
I packaged up a component that does this at https://github.com/AVGP/a-touch-controls:
<a-scene>
<a-entity camera touch-controls></a-entity>
</a-scene>
These controls are using mouse (click and drag) or finger (swipe) movements to move around the camera, but does not use the gyroscope on mobile, except when explicitely entering VR mode, which still permits Cardboard usage etc.
If you want your own control scheme, you'll need to make your own controls. You can copy and paste some code from the look-controls and customize it: https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js