The network A-frame with either nav-mesh or collision is malfunctioning; it seems that only one of them is operational at a time,

I have a camera attached to a head template and also added this camera inside a rig. The rig is constrained to a nav-mesh, but I am facing an issue where only one of the controls seems to be working - either the movement control of the rig or the WASD control of the camera, not both.

<a-entity id="player-rig" movement-controls="constrainToNavMesh" >
    <a-entity
      id="player"
      networked="template:#avatar-template;attachTemplateToLocal:false;"
      camera="active:true;"
      wasd-controls="acceleration:12;"
      position="0 3.5 0"
      look-controls>
     </a-entity>
 </a-entity>

If there is any good way to make these both work together seamlessly, please share your insights with me. Thank you!

javascriptthree.jsaframemultiplayer

Answer №1

<a-entity
        id="cameraRig"
        movement-controls="speed:0.45;camera:#head;"
        simple-navmesh-constraint="navmesh:.navmesh;fall:0.5;height:0;exclude:.navmesh-hole;"        
        progressive-controls
        rotation="0 180 0"
        position="0 0 -14"
      >
        <!-- camera -->
        <a-entity
          id="head"
          camera="fov:85"
          look-controls="pointerLockEnabled: false"
          position="-0.179 1.15 0.106"
          spectator="true"
        >
          <a-gltf-model
            position="-0.04303 -1.54967 0.20197"
            rotation="0 180 0"
            src="#avatar"
            material="shader:standard"
          >
          </a-gltf-model>
        </a-entity>
      </a-entity>

the code above was successful for me, make sure to include the correct camera ID ("head" in this instance) in the movement-controls of the camera rig. Assuming you have already added the necessary nav-mesh and gltf files.

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

Storing JSON information within a variable

I'm currently working on an autocomplete form that automatically populates the location field based on the user's zipcode. Below is the code snippet I've written to retrieve a JSON object containing location information using the provided zi ...

javascriptjson

Steps for incorporating monaco-editor into a website without utilizing nodejs and electron

Currently, I am working on building a basic web editor and came across Monaco-editor. I noticed someone using it with Electron, but I am interested in integrating it into plain JavaScript just like on their webpage (link). However, I am struggling to fin ...

javascriptnode.jshtmlmonaco-editor

Is it necessary to always provide a return value from a redux middleware function?

After reviewing the various examples provided in the redux documentation, it seems like there is always a return value from the middlewares. However, in my experience, simply calling next(action) and not returning anything seems to work without any issues. ...

javascriptreactjsreduxreact-redux

Vuejs: Limiting the number of items in an li tag to 5

selectPreviousSearch(index) { this.search = this.searchHistory[index]; this.showSearchHistory = false; }, <input class="form-control bg-light-blue" id="SearchText" type="text" v-model="search" @keydown.enter = 'ent ...

javascriptvue.js

The dreaded Heroku Node.js error H10 strikes again: "Application crashed"

I recently embarked on my journey to learn NodeJS and attempted to deploy it on Heroku. However, when I used 'heroku open,' the following error log appeared: 2020-10-08T14:19:52.778660+00:00 app[web.1]: at Module.load (internal/modules/cjs/loa ...

javascriptnode.jsherokudeploymentcrash

What are some strategies for enhancing the efficiency of asynchronous data retrieval and caching?

I'm using this code to retrieve data asynchronously and store it in a cache for performance optimization: let cache = {} const optimizedFetch = async (url) => { if (url in cache) { // return cached result if available console.lo ...

javascriptnode.jsasynchronouscachingasync-await

Submit function causes mutation in React form state

My current project involves learning React on my own and creating a small single-page React app using an Axios API. I'm facing a persistent issue with a POST request that keeps failing. After extensively using console.log, it appears that the form inp ...

javascriptreactjspostaxiosonsubmit

Ways to determine if a device possesses a specific capability

I am currently in the process of developing a web application and am exploring how to determine the capabilities of an Android device. Is there a central registry or database where I can look up the various capabilities and features of an Android device? ...

javajavascriptandroidcapability

Is it possible for a webgl shader to operate within a three.js environment?

I have created a webgl shader in three.js to process a webgl texture. When I run the code with "use_three" set to false, everything works fine. However, if I set it to true, the result is a black screen. Any suggestions on what might be causing this issu ...

three.jswebgl

Mastering the art of Puppeteer with Javascript

I am currently learning how to make web requests using JavaScript with puppeteer. After some trial and error, I was able to extract the value of a tag from a random website. However, I am struggling to figure out how to retrieve 10 consecutive values of ...

javascriptpuppeteer

The duration spent on a website using AJAX technology

We conducted an online survey and need to accurately calculate the time spent by participants. After using JavaScript and PHP, we found that the calculated time is not completely accurate. The original script was sending server requests every 5 seconds to ...

javascriptajaxtime

Issue in Next.js 13: Byte index exceeds limits when running 'npm run dev' command

When attempting to install Next.js 13.4.12, I utilized the command npx <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385b4a5d594c5d15565d404c1559484878090b160c1609">[email protected]</a>. The installation process ...

javascriptreactjsnext.jsinstallationnext.js13

Learn how to use Cocos2d 2.1.4 to load text, strings, and JSON in HTML

Struggling to upload a large string to my project to use as a matrix, I've run into issues trying to load a text file or json into my HTML5 project. While I've seen it can be done in 3.0 using cocos2d, I'm wondering if there's a way to ...

javascriptjsonloadingcocos2d-js

Inconsistencies with AJAX performance

Hey there, I'm a newbie and absolutely loving this site! Currently diving into the world of JavaScript and have been through numerous tutorials. However, I seem to be struggling with getting Ajax to work. Recently stumbled upon this code snippet on ...

javascriptajax

Hosting files for a URL with dynamic parameters in Node.js can be achieved without relying on any external libraries or frameworks

I'm dealing with a minor issue. I'm trying to serve a static file for the "/user/:id" URL using a simple node server. Can someone guide me on how to achieve this? On the client side, I have the following request: document.location.href = `http:/ ...

javascriptnode.jsserverxmlhttprequest

What is the best way to refresh a page after rotating the web page?

Struggling with a challenge in Next JS - can't seem to figure out how to automatically refresh the page when it rotates const app () => { useEffect(()=>{ window.addEventListener("orientationchange", function() { window.locati ...

javascriptreactjsnext.js

PHP Proxy - Sending Files using cURL

I am in the process of developing an application using AngularJS for the frontend and a Laravel-based API for the backend. To maintain security, I pass data through a PHP proxy before reaching the API. When it comes to POST requests, the proxy decodes the ...

javascriptphpangularjscurllaravel

Pressing on an HTML element using JavaScript via the Selenium driver does not trigger the action

I'm attempting to use Selenium with Python to click on an element using JavaScript. Here's a snippet of my code: driver.execute_script("els=document.getElementsByClassName('buttons');\ for (var i = 0; i < els.length; i++) { ...

javascriptpythonselenium

Is it possible to include choices in the number option for slash commands in discord.js v13?

I am currently working on creating a custom slash command that includes a numerical option. Utilizing the .addNumberOption() method for this purpose. Is there a method to restrict users from inputting numbers outside the range of 0-5 after entering the Di ...

javascriptnode.jsdiscord.js

Encountering a constructor problem while Jest is mocking a class from an NPM module

I'm currently attempting to create a mock for the Discord.JS module. Within this module, there is a Client class that I am extending in my own "Bot" class. My goal is to mock the module in order to simulate certain methods on other classes such as "Me ...

javascriptnode.jsreactjstestingjestjs