@valvkvc The example above used DeviceOrientationControls so not technically VR, the API has since been updated and these controls removed from three r134
import {
Euler,
EventDispatcher,
MathUtils,
Quaternion,
Vector3
} from '../../../build/three.module.js';
const _zee = new Vector3( 0, 0, 1 );
const _euler = new Euler();
const _q0 = new Quaternion();
const _q1 = new Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis
const _changeEvent = { type: 'change' };
class DeviceOrientationControls extends EventDispatcher {
constructor( object ) {
super();
show original
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - controls - deviceorientation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="overlay">
<button id="startButton">Start Demo</button>
</div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.<br/>
photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
show original
Afaik it was not possible to do this using VRButton at the time of this thread as @felixmariotto and @awonnink outlined above, there were however some other libraries that were in progress at the time to try to achieve this too Ion 3D Engine showcase - VR User Interface (UI)