I'm using x3d scene in a web page. In this page, I have an indexedfaceset which works fine.
I'm adding a <Color color="..."></Color> and it's working fine as well.
Now what I'm trying to do is to change the content of the Color using javascript once the scene is already drawn. Unfortunately the modifications aren't taken into account.
Do I have to force a redraw of the scene or something like that? I saw nothing on the runtime api of x3d.
Thanks
through x3dom?
if so check out my answer here. shows how to set attributes through both tag and id on js mouse events
i know your trying to change index face set color attribute but i think the below should give u a starting point. let me know if you need a more concise example
attaching attribute to x3dom object
Related
I have an image in Pixi.js, and I want to apply a filter to it. This is simple enough, but I want the filter to actually change the image, so that the next frame, what is rendered is a filtered filtered image, and so on. How do I create a Pixi object that renders to itself every frame?
I found this, which seems to be asking a similar question, but I cannot make sense of the code provided or the responses.
Try using the PIXI.RenderTexture class to create an in-memory image and render to it what you want. The render texture will preserve what you've rendered previously.
Here is an example that does that: http://pixijs.io/examples/#/demos/render-texture-demo.js
Here are the docs: http://pixijs.download/release/docs/PIXI.RenderTexture.html
Note: To preserve contents when rendering to a texture you need to tell PIXI to not to clear the texture before rendering to it. The below line is from the linked example and the false value does just that:
...
app.renderer.render(app.stage, renderTexture2, false);
...
I loaded individual STL structures into my 3-D viewer using three.js and I want to be able to click on individual structures in my 3-D viewer and a name tag appears onMouseClick or onMouseOver for that specific structure.
I think it has something to do with a coordinate point of that specific object or maybe just the total surface area of that object and then use a onMouseClick eventHandler to create a window but I'm not sure.
Is there any sample or open source code I can take a look at?
Thanks!!
Check any of the collision detection examples in the examples folder. Probably webgl_interactive_cubes.html is what you're after:
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html
This will show you how to find which element is behind the mouse.
I also wrote a tutorial on picking objects with three.js if you want to know a bit more about how the thing works internally:
http://soledadpenades.com/articles/three-js-tutorials/object-picking/
Then --you already know where the mouse is from the mousemove or mouseclick event-- just create a span or something similar, and place it in that position with css's left and top properties, for example
So I'm toying around with KineticJS and I'm having some problems with a button I'm making. All I want it to do is reset the positions of my objects when I click it.
I've created the button, set up the onclick handler to point to my function that I've created (and included in the HTML, along with my CSS), and I've gone through the KineticJS documentation for changing the position of it's objects, and have tried the following options:
object.setX(200);
object.setY(50);
object.setPosition(200,50);
All with no luck. I've attached a screenshot with all my relevant code (This is my first time playing as a web dev, please don't tear me up too much). The rest of the code in the middle column is just end tags for body/html/etc.
NOTE: I know the values are not what they were originally. I just threw in arbitrary numbers (still within the bounds of my canvas) to see if they'd change at all.
Thank you for any help!
Fullsize: http://i.imgur.com/aKbiI.png
You need to add layer.draw(); at the end of resetXY function
I'm building a graph in d3.js and appending almost 30-60 circles along with 2 lines with each refresh. I find that this is slowing down in the browser, causing significant performance issues.
Would it be better to append html and use images within my css instead of drawing circles?
Also, how would I go about doing this?
I have a few examples of using D3.js with pure HTML here:
http://phrogz.net/js/d3-playground/#StockPrice_HTML
http://phrogz.net/js/d3-playground/#BoxMullerDistribution_HTML
http://phrogz.net/js/d3-playground/#MultiBars_HTML
As you can see from the code, you do this by just…doing it. Create the HTML elements you want by name and set either the attributes or CSS properties on them.
For example, to create an image of a circle you might do:
var imgs = d3.select("body").selectAll("img").data(myData);
imgs.enter().append("img").attr("src", "circle.png");
imgs.exit().remove();
As for whether or not this will be faster than SVG…probably a little faster, but not by much. I suspect that either your computer/browser is slow, or you may be doing something wrong in your code (e.g. accidentally destroying and re-creating certain elements). Without seeing an example of your problem, however, we can only guess.
I have some objects inside of svg that can be clicked by user.
Is there any way to:
- send information about object (id) that was clicked by user to the 'main html document'?
- draw from outside document in the svg file.
Probably, my description is unclear,... I want to implement something like this:
user click on any object inside of svg-image;
main document will receive id of the clicked object and:
display some information about that object;
draw additional object inside of the svg-image.
Questions: how to communication from svg to document and from document to svg?
Thanks a lot, any thoughts are welcome!
P.S. Probably SVG is not the best way do that? What is better then?
EDIT: I saw recommendation regarding use of Raphael,.. but I would like to see 'native' options. (For now I'm analyzing Raphaels implementation to see that, but don't think it is doing exactly what I need).
See this example for how to get the DOM of a referenced svg from the parent document.
And here's an example of how you can call from an svg file to the parent document.
SVG is very well suited for doing what you describe.
I'd suggest using a library like Raphaël to support your SVG building. You can attach events to DOM objects that you can get through the node property of an image component.
Raphaël.js is indeed a good solution if you want to stick to SVG / VML. Now you can use canvas (new HTML 5 functionality) as well. Canvas is a new html tag (that can have id, events, ...) that allows you to draw free shapes a bit like SVG does. IE doesn't support canvas natively, of course, and you will need "excanvas.js" (this one or another, but this one works pretty well...) to make it IE compatible.
Only one restriction I know of regarding canvas: using background images makes IE be very slow. I would use Raphaël.js if it was something you'd consider doing.
Good luck
Nobody suggested, but accidentally I've found that svg is already supported by jQuery!
http://plugins.jquery.com/project/svg
Probably that is not the best approach, but I will try to work with svg using jquery. And actually, that seems like reasonable