Navigating through a 3D world with just the tilt of

I am currently developing an immersive VR web application using three.js. I have integrated the device orientation controls from the Google Cardboard three.js demo for camera navigation.

Now, I am looking to incorporate keyboard controls for additional functionality (e.g., using the Up arrow key to move forward). I have experimented with adjusting the camera's position along the x and z axes in response to key presses:

if (e.keyCode == '38') {
    camera.position.set(0, 10, camera.position.z+4);

    controls.target.set(
        camera.position.x +4,
        camera.position.y,
        camera.position.z
    );
    effect.render(scene, camera);
...

However, my goal is to make the character move based on their viewing direction (e.g., pressing the Up arrow will move the character in the direction they are looking). Essentially creating a first-person view experience.

Has anyone successfully implemented this feature before? I attempted using the first person controls provided by three.js, but that removes the head tracking functionality crucial for a VR game.

Any insights or solutions would be highly valued. (Currently, my source code closely resembles the Google Cardboard three.js demo with added functionality to detect key inputs)

javascriptthree.jsgoogle-cardboardvirtual-reality

Answer №1

My solution took a different approach. I decided to create an object3d that is in motion within the scene. Both the model and camera are attached as children of this object.

The concept involves rotating the 3D object along with the camera, while also simultaneously rotating the model in the opposite direction. This creates the illusion that the object is maintaining its direction even when the camera rotates. To move the object, I simply use translateX in conjunction with the camera and reset the model rotation to 0. This method proved to be effective.

However, I encountered some jerky movements when dealing with long distances (millions of units). The root cause was precision loss.

To resolve this issue, I kept the object's position at 0,0,0 and moved all other elements in the opposite direction. This ensured that the model remained at the correct coordinates with the appropriate rotation, while the world rotated around it.

For a straightforward example:

If you were previously attempting something like

scene.add(character_model);
scene.add(camera);
//camera.rotate ....
character_model.translateX(1);
character_model.rotateX(1);
//etc ...

And now you're struggling to move the camera around the pivot (character_model), which involves complex mathematics.

Try this instead:

var controls_dimension = new THREE.Object3D();
scene.add(controls_dimension);
controls_dimension.add(character_model);
controls_dimension.add(camera);

//rotate using controls_dimension instead of character_model
controls_dimension.rotateX(2);

//simultaneously rotate the model in the opposite direction for the camera illusion
character_model.rotateX(2*-1);

/* 
to move towards the camera direction=controls_dimension=controls_dimension.translateX(1) 
and ensure the model follows by animating its rotation to match controls_dimension.rotation
*/

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

fa icons moving the elements aside

I'm attempting to design a navigation menu with tabs, but I'm facing an issue where the tabs containing "fa icons" are consuming too much space, causing other elements to be shifted to the right or below (if there were more lines). How can I pre ...

javascripthtmlcssfont-awesomebootstrap-4

ng-model assigns the value to the select

Below is the angularjs directive I have created: dicApp.directive('listpanel', function ($resource) { return { restrict: 'E', template: '<select ng-model="selectedDictionary" ng-change="listChange()">&apo ...

javascriptjqueryangularjs

Disrupting methods on a dependency within QUnit can cause tests against that dependency to fail

Currently, in my Google Apps Script project, I am unit-testing an application using QUnit for test-driven development purposes. Code Under Test The function I am currently focusing on testing and developing is the creation of a Sheet from a long string o ...

javascriptunit-testinggoogle-apps-scripttddqunit

Leveraging PHP JSON responses for decision-making in jQuery/JavaScript

Recently, a friend shared the following code snippet with me: json : { result: true } success function(data){ if(data.result) { //do something here } else { //do something here } } I'm curious how I can integrate that ...

phpjavascriptjqueryjson

What is the process for transmitting data in JSON format generated by Python to JavaScript?

Utilizing Python libraries cherrypy and Jinja, my web pages are being served by two Python files: Main.py (responsible for handling web pages) and search.py (containing server-side functions). I have implemented a dynamic dropdown list using JavaScript w ...

javascriptpythonhtmljsoncherrypy

Next.js configuration: Redirecting / to the basePath

Whenever a user accesses the path /, I need it to redirect to the basePath that has been previously set. Below is my configuration in next.config.js: module.exports = { basePath: '/docs', } This means that whenever the path / is visited, it s ...

javascriptnext.js

dynamic jquery checkbox limit

I am working with the following HTML code: <input type="checkbox" id="perlengkapans" data-stok="[1]" onchange="ambil($(this))"> name item 1 <input type="checkbox" id="perlengkapans" data-stok="[4]" onchange="ambil($(this))"> name item 2 &l ...

javascriptphpjquerymysql

All You Need to Know About Jquery's Selector for Nested Elements

Could someone clarify if the Jquery Statement $(selecterA:not(selectorB), elementA) means "return those elements that match selectorA but not selectorB within elementA"? I am confused by a simple case in Fiddle#1, where both output statements using .length ...

javascriptjquery

Adding an image within the body of text in a Django model, where both the text and image coexist

I am currently seeking a method to seamlessly insert an image within the text of my Django-powered blog. My goal is to achieve a layout similar to the one showcased in this example: https://i.stack.imgur.com/cFKgG.png The desired layout consists of two c ...

javascriptpythonhtmlcssdjango

Angular Material Flex is not providing the correct size

There seems to be a problem with certain values for setting the flex property in the Angular Material layout library. The issue is clearly demonstrated in this straightforward example. By clicking through, you can observe that some values display correctl ...

javascriptangularjsmaterial-designflexboxangular-material

What is the process of turning an SVG element into a clickable link?

Is there a way to transform each element within an SVG image embedded in an HTML file into an active link? I want to create an SVG image with clickable elements. Here is a snippet of the SVG image: <svg version="1.1" id="Layer_1" xmlns="http://www.w3 ...

javascriptjqueryhtmlsvg

What is the best way to trigger a function once another one has finished executing?

After opening the modal, I am creating some functions. The RefreshBirths() function requires the motherId and fatherId which are obtained from the getDictionaryMother() and getDictionaryFather() functions (these display my mothers and fathers on the page s ...

javascripthtmljqueryajaxbootstrap-5

Is it possible for me to move props object deconstruction into a separate module?

Here is my scenario: I have two React components that share 90% of the same props data, but display different HTML structures. I would like to avoid duplicating variable declarations in both component files. Is there a way to extract the common props des ...

javascriptreactjsecmascript-6

Display a single specific outcome within a React component's list

import {useState, useEffect } from 'react' import axios from 'axios' const Singlecountry = ({searchedCountries, setWeather, weather}) => { const weatherName = searchedCountries[0].capital console.log(weather) useEffect(() =&g ...

javascriptreactjs

Build a stopwatch that malfunctions and goes haywire

I am currently using a stopwatch that functions well, but I have encountered an issue with the timer. After 60 seconds, I need the timer to reset to zero seconds and advance to one minute. Similarly, for every 60 seconds that pass, the minutes should chang ...

javascripttypescript

What are the implications of AngularJS's filter on performance?

I came across an interesting article on optimizing ng-repeat in AngularJS that discussed the following: An AngularJS filter in your HTML will run multiple times during every digest cycle, even if there have been no changes in the data or conditions. Thi ...

javascriptangularjs

Both IE and Firefox exhibit erratic behavior when updating the location.hash during the scroll event

In my current project, I am experiencing difficulties updating the location.hash based on which div is currently active in a website with long scrolling. Surprisingly, this functionality works perfectly in Chrome, but fails to work in Firefox and IE. I h ...

javascriptjqueryinternet-explorer-9

What is the best way to create a page that moves on release using HTML/CSS?

I'm working on a website where I want to make an interactive feature. When users click on an image on the left side of the page, I want the page to move backward. Similarly, when they click on an image on the right side, I want the page to move forwar ...

javascripthtmlcssmouseover

Guide to refining a JSON array using a pre-established list

I'm in need of assistance figuring out how to accomplish the following task: Below is the code snippet I am working with: public class Data { public string FirstName; public string LastName; public int Age; } var data = new Data { //this objec ...

javascriptc#json

Library for HTML styling in JavaScript

Is there a reliable JavaScript library that can automatically format an HTML code string? I have a string variable containing unformatted HTML and I'm looking for a simple solution to beautify it with just one function call. I checked npmjs.com but co ...

javascripthtmlnpmpackage