Being unable to adjust the camera position while using VRControls

Here is the code snippet I am currently using:

...
camera = new THREE.PerspectiveCamera(75, screenRatio, 1, 10000 );
camera.position.z = -10; // position.set(0, 0, -10) also not working.
controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
...

While VRControls are functioning correctly with the accelerometer, I am facing an issue where I am unable to alter the camera's position. It appears to be stuck at the origin point (0,0,0). This problem only arose after implementing VRControls and VREffect.

javascriptthree.jsvirtual-reality

Answer №1

Discovered a solution within the Sechelt demo featured on Mozilla VR Team's demos. Below is a code snippet that can serve as a helpful reference for newcomers to VR technology.

Instead of directly updating the camera position, the key is to add the camera to a group in order to move it smoothly.

var scene, renderer, cameraRatio, camera, controls, effect, dolly;

function initialize() {
    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    cameraRatio = window.innerWidth / window.innerHeight;
    camera = new THREE.PerspectiveCamera( 75, cameraRatio, 1, 1000 );       

    controls = new THREE.VRControls( camera );
    effect = new THREE.VREffect( renderer );
    effect.setSize( window.innerWidth, window.innerHeight );

     // Grouping the camera for smooth movement
    dolly = new THREE.Group();
    dolly.position.set( 0, 0, 0 );
    scene.add( dolly );
    dolly.add( camera );

    ...
    // Don't forget to include lights, objects, etc.
}

function animateMovement() {
    dolly.position.x += 0.1;
    controls.update();
    effect.render( scene, camera );
}

initialize();
animateMovement();

Answer №2

It seems that the camera has become the main focus. Perhaps you could experiment with using object.position.set() instead.

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

Error thrown by custom draggable directive in AngularJS due to range issue

I am having trouble with a custom draggable directive in AngularJS. I keep getting a RangeError. Can someone please help me diagnose the issue in this code? (function (window, angular, undefined) { var app = angular.module('ngDraggableModule&a ...

javascriptangularjs

Can you restrict the selection of text to only the current element?

<div class="container"> <div class="item1">text text text in div element 1</div> <div class="item2">text text text in div element 2</div> </div> Is there a way using HTML nodes, CSS, or JavaScript to restrict the select ...

javascripthtmlcss

Exploring the Depths of Angular: Uncovering Nested Objects

I'm having trouble locating a nested array within my Angular application. Specifically, I need to access the package.name property. Any assistance would be greatly appreciated. JSON [{ "id": 1, "name": "Yeah", "package_id": 1, "price ...

javascriptarraysangularangular-reactive-formsangular-forms

Using Angular to implement a decimal pipe on an input field

I am looking for a way to display comma-separated numbers as the user types in an input field by applying the decimal pipe. I have experimented with ngx-mask, but it seems to only function when the user physically enters the numbers. However, when I manu ...

javascriptangularngx-mask

How come I am unable to track the total number of uploaded images while fetching them?

Within my vuejs2 app, I am facing an issue with uploading images selected in a modal form. The goal is to close the modal form only after all images have been successfully saved, triggering the self.hidePhotosUploadingModal() method. To keep track of the ...

javascriptvue.js

The pointerlockcontrols allow you to control the rotation of the

Incorporating mrdoob's PointerLockControls.js example was seamless in this project. However, a peculiar issue arose when altering the camera position from camera.position.set(2, 2, 3 ); to camera.position.set(1100, 150, -50 );. Instead of adjusting th ...

javascriptcamerathree.js

Organizing seating arrangements for a concert hall performance

My goal is to develop a custom concert seat booking system using HTML, CSS, and JavaScript. For example, if the concert venue has 10 rows with 20 seats in each row, I could organize them like this: const rows = [ { name: 'A', seats: [1, 2, 3, ...

javascriptmongodbdata-structuresdatabase

Tips for determining the duration between the Monday of last week and the Sunday of last week

Can anyone help me figure out how to retrieve the dates from last week's Monday to last week's Sunday using JavaScript? I've searched through various sources with no luck. Hoping someone here can provide some guidance. ...

javascriptvue.jsdateelement-plus

transferring a document to the server with the help of angular

It's quite surprising how challenging this task is. When using nodejs and standard html, the process of transferring a file can be achieved by following these steps: index.html: <form id = "uploadForm" enctype = "multipart/form-dat ...

javascriptangularjsnode.js

Exploring the values of a JavaScript promise while iterating through a for loop

I find myself wandering in the land of possibilities and would greatly appreciate some direction. After spending 2-3 hours scouring through countless SO questions and documentation related to my current predicament, I still seem to be missing the mark. Ove ...

javascriptecmascript-6promisejavascript-objectses6-promise

How can we avoid multiple taps on Ext.Button in Sencha Touch?

Currently working on a Sencha Touch game, but struggling with users tapping buttons multiple times. Looking for a simple solution to prevent multiple tap events in the app.js file so that only one tap event is executed even if a user taps or presses for an ...

javascriptextjsextjs4sencha-touch-2

Angular 6 - Patience is key when waiting for an element to load within *ngIf after toggling ngIf to true

I have recently upgraded to angular 6. My HTML code is as follows: <div class="catalog-menus-subnav-wrapper" *ngIf="showMenus"> <div class="hidden-elem"> </div> </div> In this code snippet, the showMenus va ...

javascripthtmlangular

Guide on defining Component displayName using arrow function Higher Order Component

Currently, I am attempting to include a displayname in my HOC and eliminate the comment eslint-disable-next-line react/display-name from the code provided below: const withMyHOC = () => <P extends MyProps>(WrappedComponent: React.ComponentType< ...

javascriptreactjstypescripteslint

The 'id' key is causing issues in React when used for mapping

While working on my simple messaging app, I encountered an issue where updating the same div with a new message was successful, but adding a new div for each message was not. Initially, I tried using index while mapping the messages to display, but it did ...

javascriptreactjsmappingreact-context

Show the initial three divs first before implementing a toggle for the rest

My dashboard consists of multiple panels, each containing various items. Some panels have a large number of items. I am looking to display only the first three items in each panel and provide a toggle option to show/hide the rest. <div class="dashboa ...

javascriptjquerytoggle

Troubles with setting up node modules in a Windows 10 environment

I'm encountering difficulties when trying to install modules on my Windows 10 laptop after setting up Node.js from scratch. Since it's my personal computer, I have complete control over the system. Despite searching through various online forum ...

javascriptnode.jsnpmnpm-install

jQuery setInterval is not functioning as expected

I need help comparing two password fields and displaying a Popover message if they do not match. HTML <div class="form-group col-lg-6"> <label>Password</label> <input type="password" class="form-control" name="password" id="p ...

javascriptjquery

My goal is to construct a pyramid of stars. The first row will have one star, the second row will have two stars with equal spacing, and this pattern will continue for the third and fourth rows as well

[insert image description here][1] List item let x = 4; let text = ""; for(let i = 1; i <= x; i++) { for(let j = 1; j <= x - i; j++) { text += " "; } for(let k = 0; k < 2 * i - 1; k++) { ...

javascriptfor-loopnested-loops

What is the best way to retrieve distinct objects based on LocId across all locations?

Encountering an issue while working on Angular 7: unable to return distinct or unique objects based on LocId. The goal is to retrieve unique objects from an array of objects containing all Locations. allLocations:any[]=[]; ngOnInit() { this.locationsServ ...

javascripttypescriptangular7angular-directiveangular-components

Is it possible to display all the outcomes of a JavaScript loop?

Feeling a bit confused here. As a newcomer to JavaScript/jQuery, I decided to create a loop that would cycle through some JSON data: <script type="text/javascript"> var geturl = "http://couponsforweed.com/?json=get_recent_posts"; $ ...

javascriptjsonwordpressloops