The adjustment of the Three.js Orbit Controls target based on camera movement is not functioning effectively

Currently, I am working on a demo for a "First Person Controller" where the camera moves forward in response to a TOUCH event being pressed. To achieve this movement, I am using setInterval and addScaledVector for the camera's motion.

In addition to the basic functionality, I decided to incorporate Orbit Controls to allow the user to rotate the camera and look around, without any zooming capability. While most aspects are functioning correctly, I have encountered an issue with the rotation of the target when using Orbit Controls. In the target setting, I have specified camera.position.x + 1 as the value because just using camera.position.x without a value does not work. Furthermore, I have applied this setting to the camera quaternion.

var vector = new THREE.Vector3();
var speed = 8;
var timer;
var iterations = 0;

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 1.0;
controls.panSpeed = 0.8;
controls.target.set(camera.position.x + 1, camera.position.y, 
                   camera.position.z);

function process_touchstart(evt) {
   evt.preventDefault();
   evt.stopImmediatePropagation();
   iterations = 0;        

        timer=setInterval(function(){
            iterations++;
            vector.applyQuaternion( camera.quaternion );
            camera.getWorldDirection( vector );
            camera.position.addScaledVector( vector, speed );
            
            controls.target.set(camera.position.x + 1,
            camera.position.y,
            camera.position.z);

        }, 70); 
 }

I welcome any feedback or information from those experienced with three.js as I am relatively new to it. Any details or suggestions would be greatly appreciated. Thank you!

Answer №1

Did you ever think about utilizing PointerLockControls instead? It functions similarly to OrbitControls, but it is specifically designed for your needs. According to the documentation: The PointerLockControls class is built on the Pointer Lock API and is ideal for creating first-person 3D games.

You can check out a Codepen example that demonstrates what you're looking for here: https://codepen.io/adelriosantiago/pen/OJbWBep?editors=1010

https://i.sstatic.net/62QXf.png

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

Learn how to successfully upload an image using React and Node without having to rely on

I am currently exploring file uploading in react/node. Instead of passing files directly into the API request, I am passing them within the body of the request. Here is a snippet of my react code: import React, { Component } from 'react'; import ...

How can I alter "diffuseMap" and "roughnessMap" in Three.js to become "cubeMap"?

I have a specific code snippet that I am trying to work with: var container; var camera, scene, renderer; let exrCubeRenderTarget, exrBackground; let newEnvMap; let torusMesh, planeMesh; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWi ...

PHP server cannot retrieve items using jQuery json/jsonp

My PHP-written web service is functioning properly, but I am facing difficulties fetching data using jQuery's getJSON() method. <?php include 'config.php'; $sql = "select s.id, s.title, s.content, s.date, s.confirm " . "fro ...

Calculate the number of characters in the input and increase a variable by one every x characters

Currently, I am incorporating AngularJS into a new project and faced with the task of counting the length of a textarea. Adding up the total number of "pages" in the messaging app every 160 characters while decreasing if text is removed. Obtaining the len ...

Searching for page components that begin with a specific string

Within my ASP.NET page, I have a multitude of TextBoxes with IDs that begin with a specific string such as "xyz" (e.g: "xyz1", "xyz11", "xyz999"). While I am familiar with the FindControl method, it only locates controls based on their complete ID. Is the ...

Encountering a CastError in Mongoose validation where the value fails to cast to undefined

I encountered a forbidden message while attempting to save data into the database. CastError: Cast to undefined failed for value [ {"product":{"supplierId":{"undefined":"rfytr"}}}, {"product":{"supplierId":{"$empty":"rfytr"}}} ] at path "condition" ...

The functionality of TabIndex is not compatible with input elements when used within RadWindow

I am utilizing Telerik Rad Window to display certain content. Within the RadWindow, I am dynamically inserting 4 input elements using a jQuery script. $.each(inputs, function(i, input) { $('#table').append('<tr id="' + input.id ...

Receiving a reply but failing to give a response

My code is causing an ERR_HTTP_HEADERS_SENT error. Can you help me identify what's wrong with it? .then((userDetails: any) => { userDetails.role.forEach((singleRole) => { if (singleRole.name === 'admin&apos ...

Tumblr jQuery Like (utilizing rel attribute for selection)

I developed a custom HTML5 theme using masonry and infinite-scroll, which has been functioning well. I am now trying to add reblog and like buttons to each post but I'm facing an issue with the like button not working. Here is the URL to the theme: ...

Invoke a JavaScript file within the MongoDB shell

Running a JS file directly from the Mongo shell using the query mongo localhost:27017/west createSumCollection.js has resulted in an error: "uncaught exception: SyntaxError: unexpected token: identifier : @(shell):1:6" The content of CreateSu ...

Ordering BufferGeometries in Three.js for Accurate Rendering

After consulting the discussion on the previous inquiry, I have been working on constructing models in BufferGeometry and have come to understand that the transparent flag plays a role in the rendering order: objects with transparent materials will be rend ...

Determining the elapsed time using Momentjs

I need assistance with a NodeJS project where I am trying to determine if a specific amount of time (like 1 hour) has passed since creating an object. My project involves the use of MomentJS. For example, if moment(book.createdAt).fromNow() shows 2 hours ...

Executing the command "node <app name>" does not result in any action

I am experiencing an issue with my bot app called "vgen.js". When I run the command "node vgen", the prompt/directory disappears and the cursor just blinks on the far left of the screen. I have been following instructions from a tutorial found here: https ...

Ordering request parameters in OAuth2 URL with npm passport can be achieved by following a specific method

I have successfully utilized Oauth2 strategies like Github and Twitter to log in to a web application using npm passport. Now, I am interested in logging in using the new global id authentication. You can explore it here ; it's really amazing. Whil ...

Unexpected invocation of cleanup function in React useEffect

Currently, I am in the process of developing a custom hook that will handle API fetching upon form submission. To achieve this, I have incorporated an useEffect hook to make the API call and implemented a reducer to manage the states within the hook. Withi ...

Choosing sub-elements in CSS

I am working with HTML code that dynamically creates div elements inside a main div using JavaScript. To easily change the styles of these inner divs after they are created, I have created a new class called "main-light" and utilize jQuery's addClass ...

Issues with Angular Routes handling JSON array routes

Encountering an Issue with Angular Routing I'm relatively new to Angular and making good progress. I want Angular's routing functions to be dynamic so I created a small api for Angular to fetch from, returning an array. However, when I iterate o ...

Monitoring changes in session storage with AngularJS

In the sessionStorga, I have stored data from various controllers using a library called https://github.com/fredricrylander/angular-webstorage. The data is being successfully stored and is accessible within the current session. However, I am encountering a ...

Error in Prestashop 1.7: jQuery is not found in product details

Whenever I access the product detail page, a console error pops up. "Uncaught ReferenceError: jQuery is not defined" This issue only occurs on these specific pages. I've attempted to add the necessary dependency through both the head.tpl ...

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...