What are some techniques for creating a volumetric appearance with THREE.Mesh in WebVR?

Currently, I am in the process of transferring an existing three.js project to WebVR with Oculus Rift compatibility. This application takes an STL file as input, generates a THREE.Mesh based on it, and displays it in a virtual scene. While I was able to successfully run the app in Firefox Nightly using the VREffect plugin for three.js and VRControls, I encountered an issue where the models rendered in VR do not appear truly 3D. When I move the HMD forwards or backwards, the active 3D model does not change its distance from me and I cannot view different sides of the model. It seems as though the model is merely a flat background image stuck in place. Interestingly, when I include a THREE.AxisHelper in the scene, it moves correctly as I adjust the position of the HMD.

Initially, the app utilized THREE.OrbitControls which allowed for proper rotation and movement of the models.

Given the extensive amount of source code involved, I can provide specific snippets upon request.

javascriptthree.jsoculuswebvr

Answer №1

After further examination, it became clear that the issue was not a technical problem but rather an issue with scale discrepancies between my models and Oculus movements. When utilizing VRControls with default settings, it interprets the position of the HMD from Oculus in meters. This resulted in limitations on the range of head movements within my virtual environment, as the sizes of my models were significantly larger in scale compared to the movement range. Consequently, when all elements were combined in the scene, it created an illusion where the viewer appeared tiny compared to the model, similar to an ant viewing a giant object. Adjusting the scale property of VRControls to around 30 resolved this disparity.

Special thanks to @brianpeiris for prompting me to reassess the model and camera coordinates to ensure they were properly aligned, leading to the successful resolution of the issue.

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

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

javascripthtmlcss

The publish-subscribe feature appears to be ineffective

Recently starting with meteor, I learned about the importance of removing autopublish. So, I decided to publish and subscribe to a collection in order to retrieve two different sets of values. Here is the code on my meteor side: Meteor.publish('chann ...

javascriptangularmeteor

Struggling to find a solution to adjust an Angular directive

I am attempting to create a functionality where, upon clicking a button, the user can select one of two images displayed and make the selected image draggable. Currently, my code displays two images with only one being draggable. I am struggling to impleme ...

javascriptjqueryangularjsangularjs-directive

Retrieve information from the NodeJs server pertaining to the previous 10-minute timeframe

While working on a project where I needed to fetch and display data from a website within the past 10 minutes that meets a certain condition, I initially thought of storing it in a global variable. However, I realize that this may not be the best practice. ...

javascriptnode.jsexpresspersistence

Differences Between 'this' and 'self' in Classes

I am currently working with ES6 Classes and I'm struggling to grasp why I am able to access the this variable within one of the methods. //CODE class Form{ constructor(){ var self = this; } assemble(){ log(self); ...

javascriptes6-class

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

At the moment, I am using the Month selector and Year selector for Date of Birth in the react-datepicker component within a guest details form. The current functionality is such that the selected date is highlighted on the calendar, which works fine. How ...

javascriptreactjsecmascript-6react-datepicker

Tips for retrieving all JavaScript source links from a website URL during page download

Is there a way to determine if a website is using a specific online JavaScript source, such as fontawesome? Some sources may only become apparent once they are actually loaded, rather than being visible in the website's source HTML. I attempted to us ...

javascriptnode.jsnpm

Tips for Implementing Error Handling in Angular using Sweetalert2

On this code snippet, I have implemented a delete confirmation popup and now I am looking to incorporate error handling in case the data is not deleted successfully. confirmPopUp(){ Swal.fire({ title: 'Are You Sure?', text: 'Deleti ...

javascriptangularangularjstypescript

Iterating through the sorted list in reverse order, retrieving the text of each list item

Is there a way to navigate through an ordered list, extract and return the text based on a scenario where the user clicks on an li element like Cat 1-2? The goal is to concatenate all parent li's text into either a string or an array. If an array is u ...

javascriptjqueryhtml

How come the error message in AngularJS is appearing as blank during error handling?

When utilizing AngularJS code to send a request to the server, everything works smoothly on success. However, deliberately redirecting the request to a different domain causes the CORS problem where the error handling function is triggered but errorData ...

javascriptangularjserror-handlingpromise

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

My upload.php file saves images into an uploads/ folder within my main directory. I am looking to dynamically add a new li tag to my index file each time an image successfully uploads. Here is a snippet from index.php: <ul> <li><im ...

javascriptphphtmlimagehtml-lists

Steps to activate internet access on the Samsung Gear S2

When I press a toggle on a web application for the gear s2 (javascript), I send out an http request: ( function () { var led001Button = document.getElementById("Led001"), led002Button = document.getElementById("Led002"); function http ...

javascripthttprequesttizentizen-wearable-sdktizen-web-app

Displaying/Concealing specific choices using jQuery

Greetings! I am in need of some assistance with my coding query. I have been working on a piece of code where selecting 'x' should reveal another dropdown, which seems to be functioning correctly. However, if I navigate three dropdowns deep and t ...

javascriptjqueryhtmlcss

The GET request for a "places" endpoint in a node js application is experiencing issues

Today marks my second day working with node js and mongo. I've explored different tutorials and currently, I'm attempting to follow this specific one: https://github.com/amejiarosario/todoAPIjs/commit/d3be6a287e8aff39ab862971da4f050d04e552a ...

javascriptnode.jsmongodbexpress

Using tokens to make consecutive API calls in JavaScript/Node.js

After generating the token, I need to make sequential calls to 5 different APIs. The first API used to generate the token is: POST https://idcs-xxxx.identity.c9dev2.oc9qadev.com/oauth2/v1/token Using the username and password, I will obtain the token from ...

javascriptnode.js

The connection between IE11 and Google is not functioning properly

Currently, I am working on an IE11 extension, which involves using an XMLHttpRequest (GET) to retrieve data from Google's settings page. The code is executed on the extension's background page. Here are the specific details I am including in the ...

javascriptajaxinternet-explorer-11spdyieaddon

Generating a fresh array by filtering out elements with specific properties using the .map() method

Within my React application, there exists an array containing key value pairs where each pair corresponds to a checkbox. Upon checking the checkbox, the value of the corresponding key switches between true and false. The structure of the data retrieved is ...

javascriptreactjs

What could be the reason for the variable not resetting in my event handler?

Check out the code I've written below: $(document).ready(function () { var default_var = 2; var show_var = default_var; var total_var = 8; var increment_var = 2; var start_var = show_var+1; var end_var = show_var+increment_v ...

javascriptjqueryajaxvariables

express has a req.body that is devoid of any content

When making a request to my local server in my React app, the code looks like this: fetch("http://localhost:4000/signup", { method: "POST", mode: "no-cors", body: JSON.stringify({ name: "Joe", lname: "Doe& ...

javascriptreactjsjsonexpressfetch

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

How can I pass a value to an anchor tag on every click using jQuery? I am encountering an issue with my current code where the value is not being retrieved when I click the button. //HTML snippet <button id="a-selectNm" data-a_name="<?php echo $row[ ...

javascriptphpjqueryhtml