Issues rendering ThreeJS geometry data imported from Json file

Having been a dedicated user of this website for some time now, I must admit that this is the first instance where I find myself in need of posting a question. The issue at hand revolves around a Json file from which I extract data and manipulate it with my code to prepare it for rendering using ThreeJS. Kudos to mrdoob, westLangley, and the rest of the ThreeJS team for their outstanding work and support.

After successfully rendering a mesh with orbit controls, I proceeded to create a simple exporter similar to ThreeJS.org/editor. However, when I utilized JSON.stringify on various objects, such as "geo," and saved the data to a new Json file (json2), I encountered a problem. My intention was to load json2 into a new program and automatically populate "geo" with its data, bypassing the usual processing steps.

The issue arises when attempting to color a face within the code using the following snippet:

for ( var i = 0; i < sD.geo.faces.length; i ++ ) {
            var face = sD.geo.faces[ i ];
            face.color.setStyle("#0066FF");
        }

An error indicating that "face.color does not have a function called setStyle" (a rough quote) is displayed. Strangely, this code works perfectly in the initial program.

In further investigation, I noticed that while examining the "face" variable via firebug, it lacked a constructor or prototype in its dropdown menu, unlike in the original program. Unfortunately, I am unable to provide screenshots due to insufficient reputation. This discrepancy suggests that the extracted data may lack necessary properties. I even attempted directly assigning the vertices from json2 to sD.geo.vertices, but to no avail.

Could it be that the data assigned to sD.geo is causing the issue? Any suggestions on how to resolve this dilemma would be greatly appreciated, especially if it involves adding methods to json2. I have searched extensively for examples but haven't found a suitable solution yet. Apologies for any confusion in my explanation, and I am open to answering any clarifying questions.

Thank you!

Answer №1

Upon further experimentation, I managed to discover a workaround for integrating the json2's geometry data into the new program's geo.

function loadGeometry(json) {

        var loader = new THREE.ObjectLoader();
        var object = loader.parse( json );

        var added = false;

        object.traverse(function(child) {

            if (child.geometry !== undefined && added !== true) {

                addGeoData(child.geometry);

                $.each(child.material.materials, function(cm, cMat) {

                    sD.geo.materials.push(cMat);

                });

                added = true;

            }

        });

    }

While this solution is functional, it still has its flaws. For instance, in the object traversal, I implemented a restriction to only include the first geometry and material encountered while disregarding the others. This limitation exists because I am solely incorporating a single geometry and have not explored traverse extensively to identify a proper exit strategy. Additionally, within the JSON file, the materials (approximately 24 for the solitary geometry) are deeply nested within the object tree, which although manageable, may not be optimal.

An issue that significantly impacts this approach pertains to the improper assignment of materialIndexes to the faces within the geometry. Upon inspection, all material indexes appear as 0 (out of roughly 11,000 faces observed). This peculiar problem prompts me to amend my response should a resolution surface or if other individuals propose solutions.

To unravel this complication, I sought guidance from the three.org/editor to understand how their importer functions. Subsequently, I endeavored to create a simplified version utilizing threejs loaders without being heavily dependent on the Editor, streamlining it to cater to my specific needs exclusively. Nevertheless, I wonder whether there exists a ThreeJS importer leveraging loaders capable of straightforwardly populating variables akin to my current methodology.

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

Material-UI rating component outputs a string instead of a numerical value

I'm encountering an issue with the Material UI rating component. Despite providing it with a number as the initial value (this.props.data.feelings_rating), it returns a string whenever I change it within my app. Below is the relevant code: Rating co ...

Seeking assistance to prevent data duplication when transferring information from list1 to list2 in React.js

As I work on developing two lists in React.js, I encountered an issue with avoiding repetitions when transferring items from list-1 to list-2. I need assistance creating a function that prevents duplicate items in list-2 while also ensuring that the items ...

I am experiencing issues with editing the text field in React Tab as it keeps getting out of focus

https://i.sstatic.net/AUxlN.png Whenever I try to type, the text box loses focus and only allows me to type one letter at a time. Below is the code snippet that I am using: <TabPanel value={value} index={0}> {[...Array(commentCount)].map((item, in ...

Ajax is unable to reach a file located in the directory UP from the application's main folder

Here is the ajax call I am using: <script> jQuery(document).ready(function(){ jQuery('#compare_btn').click(function(event){ event.preventDefault(); var id=jQuery('#compare_btn').attr('name'); alert(id); ...

What is the process for converting a file to base64 encoding, and then uploading it as a multipart file to a backend API using JavaScript

I am working on a project to create a micro-service that can receive base64 encoded data. However, when attempting to send more than 6 MB of data, I encountered the following error message: The multi-part request contains parameterized data (excluding ...

Include a selection of images within a popover box

I am currently working on a component that contains various experiences, each with its own popover. My goal is to display an array of images within each popover. Specifically, I have different arrays of images named gastronomiaExperience, deportesExperien ...

What is causing an empty box to appear due to padding? Is there a way to conceal it

There seems to be an issue with adding padding to the results id div box. The padding is causing a blank yellow box to appear at the bottom before any results are submitted. I've tried to hide this box without success by adding a displayResult() funct ...

React is having trouble resolving the path required

Having an issue with the tracking-js library in my project. I'm using React and despite checking my package.json and confirming that the module is installed, I keep receiving errors indicating that the module cannot be found. This is how I am attempti ...

Ajax is unintentionally duplicating the request

When the "async" parameter is set to "true", ajax sends two requests at the same time. But, when it is set to "false", there are no issues. To prevent the page from reloading, I am using the following code: $(document).ready(function() { $(document).on(& ...

Implementing a way to output a JavaScript script using PHP via AJAX

I need help with a JavaScript script that should be echoed when a certain condition is met. The issue arises when the file containing this script is called through Ajax by another page, as it fails to echo the <script>...</script> part. It seem ...

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

Can you customize the buttons in the operation panel of an antd image preview window?

https://i.sstatic.net/hZLOn.png I am looking to add a button that allows users to download or share the image being previewed. Is there a way to achieve this functionality? I have researched and read through the documentation but have not found a solutio ...

Calculate the mean value of each array, and then determine which average is higher

After running the code snippet provided, I noticed that it outputs "first" instead of "second". Can you help me verify my logic here? I first calculate both averages and then compare them to return the greater one. Do you see any issues with this approac ...

"Although all error messages are functional in Postman, they are not appearing correctly on the frontend client

I am currently developing a website using React and Node. While testing my register and login functionality in Postman, I encountered an issue where the error message for login (e.g., user doesn't exist, username or password incorrect) is not displayi ...

The AngularJS framework is not effectively generating the desired table structure

EDIT 1 - Here is a Plnkr example that demonstrates the issue - http://plnkr.co/edit/qQn2K3JtSNoPXs9vI7CK?p=preview ---------------- ORIGINAL CODE AND PROBLEM ---------------- I've been using the angular datatable library (angular-datatables) to g ...

Retrieve the origin of the copied text

While working on a Vue application, I'm curious to know if it's possible to access the source of pasted text. For example, whether the pasted text originated from your own application, Word, or Notepad? I attempted the code below but was unable ...

Having trouble transforming a JSONArray into a Kotlin list?

Here is the string I am working with: {"array":[{"message":"test1","name":"test2","creation":"test3"},{"message":"test1","name":"test2","creation":"test3"}]} My goal is to extract this array of objects in a Kotlin app for Android. I attempted to achieve ...

What is the best way to send a query in a jQuery AJAX call?

I am a beginner in working with AJAX requests and server programming. This project is part of my school assignment. I need to include the SID that was generated as a parameter for this request. Additionally, I am trying to pass in an object of colors, a st ...

Show an xeditable form that can be edited within a popup window

Looking for a way to enclose the editable form within a bootstrap uib-popover-template. Tried the editable ui-bootstrap popover method, but encountering unexpected issues. Check out Plunker 1 --> https://plnkr.co/edit/vXeVoFYVU2IU08CF Issue with angul ...

The JavaScript string in question is: "accepted === accepted && 50 > 100". I need to determine whether this string is valid or not by returning a boolean answer

I am developing a dynamic condition builder that generates a JavaScript string such as, tpc_1 === accepted && tpc_6 > 100 After the replace function, the new string becomes, accepted === accepted && 50 > 100 Now my challenge is to va ...