I'm trying to figure out how to upload a 3D model using Aframejs. It's working perfectly in threejs right now

After successfully creating a 3D animated model and running it in Three.js, I am now looking to use it in A-Frame for an AR app.

var loader = new THREE.FBXLoader();
loader.load( 'model.fbx', function ( object ) {              
     object.mixer = new THREE.AnimationMixer( object );
     mixers.push( object.mixer );
     console.log(object.animations.length);
     var action = object.mixer.clipAction( object.animations[ 0 ] );
     action.play();
     object.traverse( function ( child ) { 
       if ( child.isMesh ) { 
          child.castShadow = true;
          child.receiveShadow = true; 
       } 
     });
     scene.add( object );
});

While the model works flawlessly in Three.js, I'm having trouble implementing it in A-Frame for my AR project. The documentation is lacking, and even though I can display obj models on markers in A-Frame, aframe-extras doesn't seem to be working as expected. However, the Three.js FBX loader functions correctly. I am seeking assistance in showcasing the Three.js scene on marker scans within A-Frame.

Answer №1

My experience using FBX2glTF to convert a model to glTF was successful. If you're interested, you can find more information about FBX2glTF here.

Answer №2

Discussing the use of 3D models in a-frame

To incorporate 3D models into your a-frame project, consider using the popular three.js formats such as JSON or glTF. These file types are recommended by the a-frame team and can be found in the documentation here.

Don McCurdy has highlighted the complexity of fbx models and their difficulty in interpretation, which led to the adoption of JSON formats for webGL.

In my experience with ar.js, I have successfully used Three.js JSON models with various animations, as well as glTF models with static or single animations.

You can easily convert your model to glTF using resources like khronos' exporter or kupomans' tool. Similarly, for converting to three.js JSON format, you can refer to this guide.

Additionally, glTF models seamlessly integrate with the core features of a-frame without requiring any extra components!


While I haven't personally had success with fbx models in a-frame projects, considering the compatibility and ease of use of JSON and glTF formats designed specifically for webGL is definitely worth exploring.

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

An in-depth overview of the express module export, its internal composition, and the distinct characteristics distinguishing the app object from the express object

Currently, I am delving into learning expressjs, but somehow ended up perplexing myself. It would be greatly appreciated if someone could provide some clarification. My main confusion lies in how the exported express module can function as both a function ...

Tips for utilizing the glTF loader feature?

Hello, I am trying to use a gltf file for animation but facing some issues. Here is the code snippet I am working with: function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); composer.render(); const rx = ...

Ways to retrieve the innerHTML of a Script Tag

After spending what feels like an eternity searching, I still can't figure out how to get the innerHTML of a script tag. Here's where I'm at... <script type="text/javascript" src="http://www.google.com" id="externalScript"></script ...

Filtering out blank elements in an array using regular expressions in Javascript

Below is a snippet of code from my current project: for(i = 0; i < inputArr.length; i++) { if(accountsBool) { inputArr[i] = inputArr[i].split(/\s+/); if (inputArr[i] == "" || !inputArr[i].match(/[^\s]/)) { inp ...

What is the most efficient way to switch perspectives?

I'm currently utilizing storybook to simulate various pages of my application. My concept involves encapsulating storybook within one context for mock data, and then during live application execution, switching to a different context where data is fet ...

What is the best way to omit a field from my query if the associated variable is empty?

I need help creating a dynamic MongoDB query function that can handle multiple field values, including cases where some fields may be empty strings. In these instances, I want MongoDB to disregard those parts of the query. Here is my current query functio ...

Redux Persist causes the redux state to become undefined

I recently added redux-persist to my project and now I am facing an issue where all of my Redux states are returning undefined. Previously, all the Redux states were functioning properly. However, after incorporating redux-persist, they are no longer work ...

How can one overcome CORS policies to retrieve the title of a webpage using JavaScript?

As I work on a plugin for Obsidian that expands shortened urls like bit.ly or t.co to their full-length versions in Markdown, I encounter a problem. I need to fetch the page title in order to properly create a Markdown link [title](web link). Unfortunatel ...

Need help with checking for the presence of a value in a multidimensional array using Node.js/Javascript?

Imagine you have an array structured like this: $game = Array ( ['round'] => Array ( ['match'] => Array ( ['player_2'] => Array ( ...

Ways to implement two functions within a single onclick event

Is it possible to call two functions with onclick event? <input id = "test" onclick="func1()"> Can I add another function as well? How would I go about doing that? ...

Managing ajax requests, failing to retrieve information

I am struggling to configure my client-side ajax calls to send data to a node express server. I want the ajax request to be triggered "onclick" of an href link. My goal is to pass the ID of the link as a variable to the server, but unfortunately, the serv ...

JavaScript does incapable of identifying HTML arrays

Is there a way to successfully pass HTML input values as an array in JavaScript? <input type="checkbox" id="collection[]" value="0"> <input type="checkbox" id="collection[]" value="1"> <input type="checkbox" id="collection[]" value="2">] ...

The date-picker element cannot be selected by html2canvas

I'm encountering an issue with Html2canvas while trying to capture a screenshot of my page. Specifically, the date shown in the date-picker on the page is not appearing in the screenshot. Do you have any insights into why this might be happening and h ...

Does the PHP include function act as an HTTP request?

After coming across an article highlighting the negative impact of using excessive HTTP requests on server speed, I started wondering about the performance implications of PHP includes. Specifically, I'm curious if sending 4 AJAX requests compared to ...

location on an item within THREE.JS

After successfully loading an .obj file, I am looking to anchor a point on the brain within the image. This point should remain stationary regardless of camera movement, always staying in the same position as depicted in the image below: https://i.sstatic ...

Unable to reach controller action with Ajax request

I've been encountering issues trying to make a Get request to hit the specified URL. Initially, I attempted inputting the URL parameter manually in a separate JS file, then transitioning all my JS to cshtml to test out Razor. However, I am still facin ...

Avoiding model updates when cancelling in angular-xeditable

I am utilizing angular-xeditable. When changing the value of "editable-text" and pressing the Cancel button, the "editable-text" value should revert back to its previous one. In other words, "editable-text" keeps updating the model even if the Cancel butto ...

Some PDF files appear as blank when shown using a Base64 encoded string

I am attempting to display a PDF file on a web page using its base64 encoding. Below is the ReactJS code I am using: <object style={{ width: '100%', height:'842pt' }} type="application/pdf" data={`data:application/pdf;base ...

Is there a way to retrieve a specific item from an array using a different method than just its position with jsRender?

I am currently working on rendering JSON data using jsRender. Take a look at the sample JSON data below: "PageContentList": [ { "ContentId": 51, "Title": "60 seconds with Rick", "ContentMediaTypeList": [ { ...

Angular 10 does not fulfill promises as expected

In the Angular 10 project I'm working on, I encountered an issue while trying to call an API request asynchronously using promises. The code I wrote didn't seem to execute the API call as expected and kept exiting at the first line without progre ...