ThreeJS geometry data from Json not rendering

Jicaar

Firstly, I'm a big fan of the site and have used it countless time to help me when stuck on a problem, but this is the first time I have come across something that has required me to write a question because I simply cannot find a situation like this.

I have a Json file which I am loading a bunch of data from that I then run through with my code to put the right data in the right places so it can be rendered by ThreeJS (quick side note, big thanks to mrdoob, westLangley and the rest of the ThreeJS team for what they've done and their continued engagement with helping people here).

So at that point the mesh is able to be rendered and have orbit controls and so on. Then I made just a simple exporter in a similar style to that of ThreeJS.org/editor. The big difference being that I simple use JSON.stringify on a number of objects (the one I will focus on here is called "geo") and write their data to a new Json (json2). The goal being that now I can simply load json2 into the new program which will populate "geo" with the data of the json2's geo thus circumventing all of the processing that goes into putting the data in the right places.

Now here is the issue. All the data seems to be the same between the two "geo"s, but when going to color a face in the code by using:

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

the error that "face.color does not have a function called setStyle" (rough quote from memory) appears. And again, this works perfectly fine in the first program.

So I looked into it further and it seems that when digging into the "face" variable in the code above via firebug, it doesn't have a constructor or prototype in its drop down menu, as it does have the first program. I'll upload screenshots of the two dropdowns to show more visually in a little while. )Update: Nevermind, I don't have enough rep to post them. Forgot about that haha)

So the data I have doesn't have the constructor/methods, so could it be that the data I'm setting the sD.geo equal to? (even did it so that it just sets the vertices from the json2 to the sD.geo.vertices so as to avoid that but didn't work, obviously). Any other ideas as to what my issue could be? Should I add the methods to the json2 and how because I looked into that a lot and couldn't find any good examples on it.

I apologize if I jumped all over the place throughout this, I tried to keep it as linear as possible as to cause as little confusion as possible.

Any and all help is appreciated, and I am more than willing to answer any questions anyone has that I am able to.

Thanks!

Jicaar

After tinkering with this more, I found a solution for adding the json2's geometry data to the new program's geo.

function loadGeo(json) {

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

        var pushed = false;

        object.traverse(function(child) {

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

                addGeometry(child.geometry);

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

                    sD.geo.materials.push(cMat);

                });

                pushed = true;

            }

        });

    }

Now this works, but it is far from flawless. For example, in object.traverse I put in a check to only add the first geometry and material it finds and ignore the rest. Both because I am only adding a single geometry and I haven't used/looked into traverse enough to know of any proper exit. Also in the json, the materials (there are ~24 for the single geometry) are very deep in the object tree, which is okay but probably not optimal.

The one big issue that I have come across with this is that for some reason, the materialIndexes I assigned to the faces in the geometry aren't assigned properly; they all are just set to 0(from the ones I looked at, there are ~11,000 faces so couldn't look through them all). An odd issue, and will edit my answer if and when I find solutions to this or others give solutions on here.

I figured this out by going back to the three.org/editor and seeing how their importer worked and making a rough attempt at something that uses the threejs loaders in the same way, but really make it less tied into the actual Editor and make it very "bare-bones" so that it serves my purposes alone. That being said, I'm curious if there is any ThreeJS importer which uses the loaders that can just populate variables in the way like I am doing here.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

STL rendering with threejs

분류에서Dev

Scaling a geometry in one direction with top as reference in threejs

분류에서Dev

JSON Data from api

분류에서Dev

Rendering blank screen when trying to play animation in threejs

분류에서Dev

Extending data from json in customDimensions

분류에서Dev

retrieve data json from inlocalstorage

분류에서Dev

Not getting complete data from Json

분류에서Dev

Print data from json file

분류에서Dev

Ejs - templating data is not rendering

분류에서Dev

Angularjs not rendering $rootscope data

분류에서Dev

$.each not rendering JSON in given Order

분류에서Dev

Showing path on google map from json data

분류에서Dev

How to return rows of data from a table with json?

분류에서Dev

JQuery Autocomplete, populate with data from pHp json

분류에서Dev

Using jQuery to grab data from JSON

분류에서Dev

Set ToggleButton status from incoming JSON data

분류에서Dev

Problems displaying data from nested JSON structure

분류에서Dev

Get nested data from local JSON file

분류에서Dev

Accessing data from Wikidata JSON file

분류에서Dev

How to get data from JSON file?

분류에서Dev

cannot receive json data post from app

분류에서Dev

Get Data from JSON file into jQuery

분류에서Dev

accessing json data passed from php (json_encode(databaseresults))

분류에서Dev

React not Rendering correctly after update of Data

분류에서Dev

Data is not rendering using Flatlist in react native

분류에서Dev

simple rendering angularjs scope data in the view

분류에서Dev

Rendering a google chart using datastore data

분류에서Dev

Get Data from Stripe Webhook JSON using PHP

분류에서Dev

Data Transfer from Nested JSON to TempView in Spark with Scala