What is the process for running a Threejs VR project with a local server?

I am attempting to test a threejs VR project on my Samsung NOTE 4 device using xampp local server. Surprisingly, the online threejs VR examples (https://threejs.org/examples/?q=vr#webvr_cubes) work perfectly on this phone.

However, when I try to access the same example through our local server link(), it constantly displays "Your browser does not support WebVR".

Does anyone have any suggestions or ideas on how to run this sample project using xampp local server?

Thank you in advance!

Answer №1

Currently, WebVR is in the experimental stage (assuming you are using Chrome).

is not considered a trusted source, therefore experimental features are disabled.
However, and https://threejs.org are permitted to utilize this functionality.

To activate WebVR, navigate to chrome://flags/#enable-webvr and select Enable


If you wish for your users to have access to WebVR now, you must request Origin Trials by completing this form. Google will provide a token for you to add to your website. (Please note that HTTPS setup on your server is necessary).

Alternatively, you can incorporate a polyfill to ensure compatibility with VR across all platforms (not limited to Chrome M59+).
(just make sure to include the polyfill before three.js)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing code written in Javascript using NodeJS

Need assistance executing javascript code with NodeJS. This is what I have so far; txt="<bookstore><book>"; txt=txt+"<title>Everyday Italian</title>"; txt=txt+"<author>Giada De Laurentiis</author>"; txt=txt+"<year> ...

Exploring the world of interconnected meshes in three.js

Currently, I am in the process of working on 3D models for a project using three.js. The model I am creating is a combination of basic geometries that come together to form a defense tower. Specifically, I have 2 Boxes and 3 Cylinders that make up the st ...

Enhancing User Interactions: A Guide to Sorting and Generating Multiple Text Fields using jQuery UI's Droppable

Scenario: I am looking to allow my users to create a shopping list by dragging products into a sortable and droppable list. Depending on the position of the product on the list and its value, the text fields in the form should be automatically filled. Try ...

Using jQuery causes a textarea to post NULL values

I have a form that stores data in a database, and I'm using jQuery to show either success or fail messages before clearing the form. The issue is with my textarea - it posts a NULL value when using jQuery but works fine without it. All other inputs wo ...

"Encountering a 500 internal server error with jQuery and WordPress

I'm having issues implementing ajax into my WordPress project to dynamically load videos based on their post ID. Whenever I click on the video link, a 500 internal server error occurs. I'm sending the post ID through ajax to a PHP script where I ...

Using a forEach loop within an Else statement is ineffective

I've encountered an issue while trying to merge two arrays and create a new one. It seems that my forEach loop inside the else statement is returning undefined. I'm unsure if I made a mistake in my approach or if forEach is not meant to be used w ...

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

Using Vue to iterate through elements

I am struggling to loop through an array in a Vue component without duplicating the element specified in the 'v-for' directive. I have consulted the official Vue.js API documentation, as well as various online articles, but haven't found a s ...

An abundance of polygons managed by react-three-fiber

I'm looking to showcase a large number of 2D polygons with various shapes using react-three-fiber. My approach involves creating instances of the same polygon, each with around 100 vertices. I then aim to manipulate the vertices of each instance in i ...

Is there a way to track and monitor the ngRoute requests that are being made?

I am in the process of transferring a fairly large Angular 1.6 application from an old build system to Yarn/Webpack. Our routing is based on ngRoute with a complex promise chain. While sorting out the imports and dependencies, I keep encountering this err ...

What is the process of assigning data, in JSON format, from an HTML form to a variable?

I have the coding below in my abc.html file, which converts form data to JSON format: <body> <form enctype='application/json' method="POST" name="myForm"> <p><label>Company:</label> <input name=& ...

What is the best method for enabling HTML tags when using the TinyMCE paste plugin?

After spending countless hours searching for a solution, I am still puzzled by this problem. My ultimate goal is to have two modes in my powerful TinyMCE editor: Allowing the pasting of HTML or Word/OpenOffice text with all styles and formatting attribu ...

Utilizing JSON format for processing HTTP requests in JavaScript with Node.js

I'm working with a snippet that retrieves data in JSON format, but I'm interested in manipulating the data instead of just outputting it to the console. var request = require('request'); var headers = { 'Connection': ' ...

NodeJS Exporting Features

A situation is in front of me: var express = require('express'); var router = express.Router(); var articles = require('../model/articles.js'); router.get('/all', function(req, res, next) { res.json(articles.getAll()); ...

What could be causing the malfunction of AngularJS $scope?

I recently started using AngularJS and I'm trying to create an array and send it to the server using the register function. Below is the Controller code snippet: root.controller('mainController', function($scope) { $scope.lineItems = [ ...

Tips for creating row grouping in React JS

Currently, I am working on a React application and I would like to incorporate grouping similar to what is shown in the image. I have looked into row grouping but it doesn't seem to be exactly what I need. How can I go about implementing this feature? ...

Bidirectional data binding in AngularJS custom directive

I have recently started working with Angular.js and I am attempting to create a custom directive with a controller containing functions that is connected to another controller. I want the object in the main controller ($scope.MyObj) to update in sync wit ...

Tips on how to retrieve an Observable Array instead of a subscription?

Is there a way to modify this forkJoin function so that it returns an observable array instead of a subscription? connect(): Observable<any[]> { this.userId = this.authService.userId; this.habits$ = this.habitService.fetchAllById(this.userId); this.s ...

Looking to implement pagination in Vue.js - what steps should I take?

Hi there, I'm currently facing an issue while trying to paginate my data. The error message in my console reads: Property or method "$index" is not defined on the instance but referenced during render. Below is my HTML template where I display the da ...

The lazy-loaded module generates multiple instances of the parent service every time it is loaded

Whenever I switch from MainComponent to TestListComponent, the TestListComponent constructor gets called and a new instance of the ObservableService is instantiated. Clicking the link results in duplicated messages being displayed in the console. Could t ...