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!
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.
Related
this might be a stupid question and I know it is hard to tell without a look at the code... However I have an issue and maybe somebody can point me toward the right direction.
I am developing a javascript mxGraph application integrated with Angular7. I'm using a modified version of the ports.html example.
If I add two nodes and connect them, then I export it in XML with this code:
var enc = new mx.mxCodec(mx.mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
xml = mx.mxUtils.getPrettyXml(node);
I am able to save it correctly and then reload it.
However if I move the connection as shown in the image here:
the connection is not redrawn in the graph, although it is present in the model as cell:
Here a screenshot of the model, as you can see, both connections are present but just the one that I didn't move is drawn:
I found the solution... It is somehow related to this past issue that I had: MxCodec decode function not working with XML
As when an edge is moved it creates an Array of mxPoints, which are not decoded properly because of missing ctor in window. The solution was adding to the window:
window['mxPoint'] = mx.mxPoint;
I have a Highmap that's populated with data fetched using getJSON. What I want to achieve is have a button (or dropdown) that allows me to switch between two or more data sets.
I've seen this question asked a few times in different ways (such as this one), and reading the answers I think have a general idea of what I need to do, but I remain stuck. FWIW I'm a complete novice just trying to make something work for my colleagues, so my mistake might be fundamental or could just be a matter of syntax.
For now to prove to myself that I can make it work I've tried to implement a button that, once clicked, simply switches to a second data set using setData. While the map is displaying correctly, and I know that both JSON files are being loaded, I can't get the switch to work.
Here is my attempt in full: http://jsfiddle.net/osc9m3e7/4/
And the part that I'm sure is incorrect somehow:
$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});
I'd appreciate any tips to get me on the right track.
You have probably noticed how borders of countries are getting thicker every time you set new data. It happens because the data object is not copied but used directly, so it is modified. To copy specific object you can use for example slice() function. Below you can find an example where switching between sets of data works as it should.
API Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Example:
http://jsfiddle.net/4ub0z408/
Answered by ewolden in the comments. My issue was that I wasn't naming the chart, and therefore not able to manipulate it using setData. The working example is now here: http://jsfiddle.net/osc9m3e7/7/
var AccessMap = Highcharts.mapChart('container', {
...
$('#setdata').click(function() {
AccessMap.series[0].setData(data2);
});
I want to create an image slider in Javascript (not in jquery) and fail to think about an algorithm to do this.
On the internet I found writing code examples but I do this job to help me understand how to think programs.
I thought a few steps that I think should be displayed.
1.make an array where we store all the images in a folder.
It is important that this be done dynamically,
For example, the code below images are added manually ... but what if we have 1,000 images? We can not add to all manual
var images = [
'/images/img1.jpg',
'/images/img2.jpg'
];
2.We use a "FOR" to browse all vector(images).
for(var i=0;i<images.length;i++)
{
//Here not figure out what should be written
}
3.It is important for each image to display two things.
Image name and date on which it was created.
This step I realize it should do.
4.You should also arrows left and right. I thought each arrow to make such a function where to write code
functions left()
{
//some code for running images
}
So much I think I managed to ... I hope to help me understand how to design a script.
Certainly not something complicated and many people here know to do it but I want to understand how to think such scripts.
I want to understand why we need to create objects and so on ... everything.
Thanks in advance!
I wrote a game with Phaser engine but sadly i didn't get any good performance even with cocoonjs. I tried to optimize it but i don't think i can optimize enough.
So i'm trying to switch to cocos2d-js. I tried some examples with cocos2d and it works well. I think i will get the performance i'm looking for. I just need to achieve two things. I tried to use methods in DrawNode class but i couldn't do it. I'm new to computer graphics.
Drawing a slice, Just like the drawSlice method from this gist
Writing text along an arc with the given radius and angle
Update: I'll need the expensive calculations done by native code. I have around 18 of this shape independently animating the radius by 75-200 pixels in 100ms with user input. The problem i faced in Phaser was this expensive calculations.
Update2: Right now i'm able to draw this with #Sebastian's help. It's still incomplete.
Update3: I got good performance with Phaser with a few hacks. Maybe i won't need this, though others might need it.
Slice:
Text:
that functionality isn't done yet in cocos2d-html5. The best solution I can offer you is this function I submitted a while ago. It's not ideal, but it should do the trick. I'll wrap this function in the neccesary boilerplate code later if you don't know what to do with it (I'm a few hours away from my home PC and I don't have the time to make a full example right now):
var drawSolidArc= function(center, radius, degreesFrom, degreesTo, segments){
if(degreesTo<degreesFrom){
var temp = degreesTo;
degreesTo = degreesFrom;
degreesFrom = temp;
}
var i;
for(i=degreesFrom; i<=degreesTo;i++){
cc.drawingUtil.drawCircle(center, radius, cc.DEGREES_TO_RADIANS(-i+90), segments, true);
}
};
Also, this code is for v2.2.2, and it should be migrated to use v2.2.3's (or v3) DrawNode. Sorry for the incomplete answer, but I hope it'll send you in the right direction for the moment.
As for writing curved text, I think this is the closest thing I know exists: https://github.com/supersuraccoon/CircleLabelTTFDemo-HTML5
I previously asked this question a few days ago, but I do not think anyone besides paxRoman actually figured out what I was asking, as it was hard to describe without an example.
We did however manage to figure out what might be my problem, and I managed to put the code up on bl.ocks.org so you can see an example of what I mean!
Here is the example: http://bl.ocks.org/3020018
Each time the data is refreshed (in this example, just read from a json file), all the nodes are re-created and re-added to the drawing.
What I want to happen
I want the nodes to update without moving at all.
If a new node exists in the new array, it should just appear like they all do now, if something exists in the previous array but not in the new, it should simply disappear.
As you see in the example, that is not what is happening and I have not been able to figure out why for the past week.
So my question is:
What am I actually doing wrong? Is it my lack of links? What is the problem? The two of us spent over an hour looking at this yesterday and could not make sense of it, I have spent a good week on it now without much progress :/
My old question/post is still up, but it's badly formulated and I had no example to show.
Thanks for helping me :)
So, I am pretty sure I have solved most of my problems!
It came down to how I was adding/modifying the nodes when updating the data. I completely forgot about x/y and similar attributes since I did not set them myself, so I was adding "new" objects every time I updated the data, even if they weren't actually new.
With some jQuery magic using $.extend() I have sort of gotten it working, but it's still slightly moving/pulsing whenever I update the data.
I updated the gist to show the changes. http://bl.ocks.org/3020018
I would still like to remove that little pulsation too, so let me know if you have any ideas :)
Have you tried setting the friction parameter (where you have the linkDistance and charge set)? Setting it to 0.9 will speed up finding the final position as I think it defaults to 1 if not set. Its simply a case of adding
.friction(0.9) // or any suitable value closer to 0 - have a play!
Hope that helps