Navigating a Mesh in 3D Space using three.js, Camera Movement, and physi.js

I am attempting to manipulate an object in Three.js using Physi.js. The camera is linked to the moving mesh, and I am moving it using .setLinearVelocity();

Additionally, I rotate it using .setAngularVelocity();

However, the issue I am facing is that while I can rotate the mesh in the desired direction, when I move it forward, it does not move towards the destination I am looking at. Any help on this matter would be greatly appreciated.

Below is the code I am using for the movement:

//mover box

var geoMover = new THREE.BoxGeometry(20,20);
var matMover = new Physijs.createMaterial(new THREE.MeshPhongMaterial({color: 0xff00E3, specular: 0xffffff, shininess: 60}),.0,.2);
var mover = new Physijs.CapsuleMesh(geoMover, matMover,1);
mover.position.x =0;
mover.position.y = 30;
mover.position.z = 0;
mover.setAngularFactor(THREE.Vector3(0,0,0));
scene.add(mover);
mover.add(camera);

//render

function render(){

    renderer.clear();


    camera.lookAt(scene.position);

    walk();

    renderer.render(scene, camera);
    requestAnimationFrame(render);
}


render();

//walk

function walk(){

    //Listening for events
    var delta = clock.getDelta();

    var physisMove = 10;

    if(keyboard.pressed('left')){
        mover.setAngularVelocity({z:0,y:1,x:0});
        istMoveLeft = true;
    }

        if(keyboard.pressed('up')){
            mover.setLinearVelocity({z: -physisMove, y:0,x:0});
            isMoveForward = true;
        }

        if(keyboard.pressed('right')){
            mover.setAngularVelocity({z:0,y:-1,x:0});
            isMoveRight = true;
        }

        if(keyboard.pressed('down')){
            mover.setLinearVelocity({z: physisMove, y:0,x:0});
            isMoveBackward = true;
        }

    document.addEventListener("keyup", function(event){
      var code = event.keyCode;
        if(code == 38) mover.setLinearVelocity({z:0, y:0,x:0});
        if(code == 40) mover.setLinearVelocity({z:0, y:0,x:0});
        if(code == 37){
            mover.setLinearVelocity({z:0, y:0,x:0});
            mover.setAngularVelocity({z:0,y:0,x:0});
        }
        if(code == 39){
            mover.setLinearVelocity({z:0, y:0,x:0});
            mover.setAngularVelocity({z:0,y:0,x:0});
        }

    });
    mover.setAngularFactor({z:0,x:0,y:0});

    /*
    document.addEventListener('keyup', function(event){
        var code = event.keyCode;
        if(code == 37) istMoveLeft = false;
        if(code == 38) isMoveForward = false;
        if(code == 39) isMoveRight = false;
        if(code == 40) isMoveBackward = false;

    });
    */
}

Answer №1

If you're looking for a solution, you might find it helpful to check out this link:

You may want to consider giving sampleframework a try, as it appears to have all the necessary components you're looking for (Sample.js + Sample.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

Verify the image aspect ratio using ngModel

Incorporating Angular 5 and Bootstrap, I've crafted a form that enables users to associate an image with a URL. My aim is to constrain this image to adhere to a specific aspect ratio. The smallimagelink input signifies the ngModel I'm utilizing. ...

Is there a way to reset back to the default CSS styles?

I have a div container with a nested span element (simplified). <div class="divDash"> <span>XX</span> </div> The CSS styling for the div makes the span initially hidden and only visible when hovering over the parent div. .div ...

What is the maximum character limit for the JQuery validation plugin?

Currently, I am utilizing the JQuery validation plugin in my project. My goal is to set a maxlength for one of the fields. Here's an example of how it can be done by defining rules externally: rules: { Message: { required: false, maxLe ...

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

Sending data from Django's render() method to React.js

Currently, I'm working on a Django + React Application project where I am faced with the challenge of passing JSON data from Django's render() function to React.js. To achieve this, I initiate the rendering of an HTML page using Django, with the ...

Determining when ng-repeat has completed in Angular JS

Is there a way to determine when ng-repeat has completed populating the values in the markup? Since I have numerous values, it may take some time for the rendering process. NG <ul > <li data-ng-repeat="item in values"> ...

Specify the controller to be used dynamically in an Angular directive

I want to be able to specify the controller that a directive uses by adding an attribute to the element - in other words, dynamically: HTML <div data-mydirective data-ctrl="DynamicController"></div> Angular angular.module('app', [ ...

Having trouble with my router in the express app - the .find and .findByID methods are not working properly. Also,

In my current setup with NextJS/MERN stack, I am using the server.js file in NextJS to import API routes and make API calls. The routes seem to be functioning properly as there is activity when calling them from Postman or the browser. However, it appears ...

Numerous slideshows using identical scripts

I am facing an issue with my code for multiple slideshows. Currently, it works fine for a single slideshow but when I have multiple slideshows and mouse over any of them, all the slideshows start running due to sharing the same class. However, if I try to ...

Developing a dynamic web application using the Django framework along with the Vue.js library and Highcharts for

I am currently working on a data visualization web app using Django, Highcharts, and JQuery. I have recently transitioned from JQuery to Vue JS and I am struggling with fetching JSON data from a specific URL. Below is the code snippet: Template <!doc ...

Achieve compatibility for two different types of route parameters in Vue.js

I am trying to set up nested sets of categories in URLs that lead to specific products, but I'm having trouble with matching the routes correctly. Here are the URLs I want: --- renders a "category.show.vue": /$categorySlug+ app.com/catA/cat ...

The Rsuite Uploader is refusing to transfer the file to the Express server

For my project, I am utilizing an Uploader component from RSuite to upload images to the Express server: <Uploader action={process.env.REACT_APP_API_URL + '/loadMap'} draggable headers={{Authorization: 'Bearer ' + localStorage.getIte ...

How can we cycle through multiple colors using lerp in Three.js?

I am currently engaged in a project using the Three.JS Online Editor. The main goal of my project is to create a Day/Night Cycle that loops through various colors to set the scene background. The cycle should include: Day Sunrise/Sunset Night Sunrise/Suns ...

What methods can be used by the client-side to determine whether a file has been successfully downloaded or received from

When a client-side file download request is initiated, I dynamically create a form element with hidden attributes and submit it to the server via POST. During this process, I need to display a loading spinner that will be hidden once the download is comple ...

Attempting to craft a multi-filter feature using AngularJS that will allow for the precise filtering of JSON data based on both month and year identifiers

I have integrated AngularJS into the RoR framework and am working on creating a multi-filter for the "ng-repeat" function to filter JSON data based on "month_id" and "year_id". Here is the current code: JSON: [ { "date":"October 4, ...

Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

I am working on sending an image (base64) via a POST request and waiting for the response. The POST request should have a Content-Type of multipart/form-data, and the image itself should be of type image/jpg. This is what the POST request should look like ...

Methods for loading a font just once? (TypeScript / Three.JS)

My goal is to generate 20 text blocks, all using the same font. However, I encountered an error with the new TextGeometry if the font isn't loaded yet. Currently, I have been creating each text block like so: new THREE.TextGeometry(this.text, { ...

Importing an array of Vue components to be exported and utilized in the app.js file

I'm currently working on a Laravel 8 project with vue.js v2.6 and I want to clean up my app.js file by moving all of my Vue.component() declarations to a separate file. To achieve this, I created js/vueComponents.js where I placed all the vue componen ...

Validating Input Field with Regular Expression in JavaScript/TypeScript to Avoid Starting with Zero

I need to create a RegEx for a text field in Angular / TypeScript that limits the user to inputting only a 1-3 digit number that does not start with 0. While it's straightforward to restrict input to just digits, I'm struggling to prevent an inpu ...

What is the best way to obtain the true dimensions of an HTML element?

Is there a way to determine the dimensions of a <div> element in order to accurately position it at the center of the browser window? Additionally, which browsers are compatible with this method? ...