Tips for integrating three-dimensional JSON models from ThreeJS into A-frame

Looking to incorporate some low poly models from into a ThreeJS JSON model in A-frame. This method is preferred due to its efficiency and smaller file size, resulting in faster loading times. However, there seems to be a lack of guidance on how to achieve this.

It appears that others (1,2,3,4) have faced similar challenges without any clear solutions provided.

If anyone has a detailed description, step-by-step guide, or helpful tips on this process, it would be greatly appreciated. I attempted using a script mentioned in the official documentation, but encountered issues:

        <a-scene>
        </a-scene>
        <script type="text/javascript">
            var loader = new THREE.ObjectLoader();
                loader.load("globe.json",function ( obj ) {
                     document.getElementsByTagName('a-scene').add( obj );
                });
        </script>

When attempting to utilize the object loader, I encountered a dependency error stating module is not defined. This leaves me somewhat perplexed about the proper approach to implementing models in this manner. Any suggestions or insights on this matter would be highly valuable.

Answer №1

In summary, it appears that JSON models are no longer supported and trying to use them would require creating a new loader from scratch.

It seems the most effective solution is to:

  • Download Blender
  • Get the model in *.blend format
  • Open it in Blender
  • Export as glb
  • Load it as a gltf-model.

In depth:

When attempting to load a json model using THREE.ObjectLoader, it references the deprecated JSONLegacyLoader.
To locate this, you would need to refer back to threejs R110 before it was completely removed (loader here).
Ultimately, it relies on the outdated Geometry.
Upon import, issues arise in the rendering process. It doesn't seem worth the trouble.

This was tested with this specific model.

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

Why is the state object empty in this React Native function?

One React-Native component I have is responsible for rendering an image gallery in a list format. This component is called once for each item on the parent list. It takes two props: "etiqueta," which contains the title of the item, and "galleries," which i ...

Is it possible to access a nested index within another index in an IF statement?

My head is spinning over a small issue that I can't seem to resolve. I am fetching multiple JSON data from an API that I created, combining them into an array which I then decode to return the information in plain text. Within an 'if' stat ...

The request to http://localhost:3000/cartdata has encountered an internal server error (500) in the isAxiosError.js file at line

Error Image I'm currently working on developing a shopping cart feature, and I've encountered an issue when transferring data from the client side to the server side. Despite the cart data being successfully updated in the session, an internal se ...

Could you advise on the best placement for my upcoming JQuery animation?

Here is the code I am currently working with: $(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); $("#box2").a ...

Using Angular and chartJS to generate a circular bar graph

I am looking to enhance my standard bar chart by creating rounded thin bars, similar to the image below: https://i.sstatic.net/uugJV.png While I have come across examples that suggest creating a new chart, I am unsure of how to implement this within the ...

SuiteCRM's specialized duplicate validation feature is experiencing issues with saving or updating data

Hello there! I have implemented a custom validation on my SuiteCRM to check if the First Name, Last Name, and Mobile number already exist. However, I am facing an issue where the data does not save or update after the validation process. Below are the cod ...

Generate a JSON object with dynamic hash keys using Jbuilder

In this section, I aim to generate JSON with a variable group name instead of the static word group @tickets.each do |category, items| json.category { json.array! items do |ticket| json.partial! 'tickets/ticket', ticket: ticket e ...

Is there a way to invoke a C# method upon completion of the callback function in ScriptManager.RegisterStartupScript?

I am currently developing JavaScript methods that will be called from C# code. Once the JS methods are complete, I need to include C# code to send an email. Can anyone provide guidance on how to achieve this? ScriptManager.RegisterStartupScript(this, G ...

Using jQuery, upon the page loading, the script will automatically trigger a

I am attempting to create an HTML file that automatically logs into my bank account. Below is the code I currently have: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> ...

Wordpress is having issues running jQuery

I've developed a function inside js/custom.js. The purpose of this function is to arrange posts in my Wordpress site by applying a class called articleAlign. This class will enhance the spacing between the article title and its excerpt, but only when ...

Timeout feature for image slider in Angular JS

Hey there, I've been trying to get my AngularJS image slider to work like a slideshow where the images transition smoothly from slide to slide. I managed to code the functionality for navigating to the next and previous images, but when I attempted to ...

Javascript Leap Year Determination using nested if-else statements

I am facing an issue with the nested if statement where all conditions have been provided. Some leap years like 2016 and 2020 are not being recognized as Leap years even though they should be. Can someone please assist me in fixing this error? var y = p ...

Navigating Assets within NodeJS Module

I'm facing a challenge with my NodeJS module that is designed to translate XML to HTML using an XSL file. The issue arises when I try to package the XSL file along with the rest of the module. Currently, the XSL file is located inside the source fold ...

Having trouble getting unique input values to pass through ajax

For the past couple of weeks, I've been searching for a solution to my issue. The problem arises in my PHP foreach loop where I have div tags representing rows of data fetched from the database. Each div row contains HTML input elements and a button t ...

Decoding Multiple JSON Links

I'm currently working on parsing multiple JSON URLs in my application and displaying them in a single list view. However, I'm only able to display one URL at a time and I want to show multiple URLs with the same array names and attributes in one ...

Is there a way to load JSON data into charts through an AJAX request?

Is there a way to pass JSON data to a JSP file and populate it into the charts data directly without setting each value using a model attribute? In my EmployeeController, I have a lineBarChart method that currently sets data values individually. Here' ...

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...

Error while converting JSON data

I wrote a script to extract information from this JSON file. The classes were generated using JSON2C#: public class Link { public string self { get; set; } public string soccerseason { get; set; } } public class Self { public string href { g ...

Is there a way I can modify the display setting to show 4 slides per view?

var swiper = new Swiper(".new-arrival", { slidesPerView: 4, centeredSlides: false, spaceBetween: 30, autoplay: { delay: 5500, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: &qu ...

What is the best way to implement an Angular application within the child routes of another Angular application?

Is it possible to load an Angular app using lazy-loading (when a specific route is hit by users) into another Angular app without compiling the first one for use in the second? This is the Routing-Module of the app to nest into an Angular app: const upgr ...