This question already has answers here:
Three.js - Geometry on top of another
(4 answers)
Closed 6 years ago.
Is there a way in js to set something like layers?
I want some objects in my canvas to no matter what - be rendered on top of everything, and some to be rendered behind everything, regardless of their real position in the scene.
Is it possible?
what is the way to do that?
Thanks
One method is to use multiple scenes. Set renderer.autoClear=false, then to render, something along the lines of:
renderer.clear();
renderer.render(bottomLayer, camera);
renderer.clearDepth();
renderer.render(topLayer, camera);
That wouldn't be suitable in some cases. If not, then you might look into the object renderOrder and material polygonOffset properties.
Related
This question already has an answer here:
Shadows and directional light in phaser 3?
(1 answer)
Closed 10 days ago.
How can I implement Shadows With The phaser.js Webgl lighting system
this.lights.enable();
this.lights.setAmbientColor(0x808080);
Heres what I'm Looking for:
How Do I implement the shadows coming off those trees in phaser
As mentioned in this question/answer, as far as I know you cannot create shadows/shadow effects out of the box with in phaser. Except you want to programm it with raycasting or so(link to an article), but that would be alot of work judt for background feature, that mihht not be seen.
A easy solution could be use several background images, wirh different shadows an switch them out when needed (a possible example is in the aforementioned answer).
This question already has answers here:
Can you tell if one element is touching another using JavaScript?
(2 answers)
Closed 1 year ago.
How can I see if an element is touching another in JavaScript? I am a beginner so I was looking for something simple that doesn't require a lot of coding.
Have a look at Element.getBoundingClientRect() which will give you a bounding box including x, y, width, height, …. If it's rectangular elements, then you can simply check if they intersect.
This question already has answers here:
Can I create multiple canvas elements on same page using p5js
(2 answers)
Closed 2 months ago.
although I have some experience with processing, I am new to p5.js. For an academic work, I want to create a website with multiple interactive experiences. I want this website to be one single page, no links no nothing, just one single scroll.
For this, I would want to have multiple canvases along the long scroll. I would also want that these interactive experiences just start when the user is in the correct position of the scroll. I can think of multiple solutions for my problem, but i am not sure how to implement them, neither what is the best one.
Is it possible to do that with one single page? Is it possible to put the canvas into divs and then display it in order with css?
One other solution that came to my mind is to create multiple pages, but simulate that is just one using some sort of animation to simulate the scroll, this one would guarantee that the user is always viewing the canvas in full screen, but I'm not sure he could control it with the normal scroll bar.
Is there any simple solution? Thanks in advance.
It sounds like you're looking for instance mode.
Instance mode lets you do exactly what you're describing: you can create multiple sketches and add them all to the page.
You can also use the parent() function to put your canvas in a specific div. Shameless self-promotion: here is a tutorial that includes placing a canvas in a specific div.
I would start with getting those pieces working before you worry about the scroll. But once you're ready, I would look into setting up a scroll listener in JavaScript and triggering your instance mode sketches at certain values.
Good luck!
I'm making a drawing tool using Paper JS. Now I want to fill a closed path from two items, say for example two rectangles that intersects.
Looking at the reference there seems to be a function to get the intersections but does not accomplish what I need as it makes another shape out of the intersection.
intersect(item) or subtract(item)
Also in this scenario where it detects if the object is split.
If any of you guys have come across this issue please give some advice.
Thanks and regards.
There is a nice demo of boolean operations in the paper.js examples.
Use Path.unite(), Path.intersect() (and not Path.intersects()), Path.subtract(), Path.exclude() to compute boolean operations.
You can also use Path.getIntersections() or maybe the more appropriate Path.getCrossings() to handle intersections with opened path.
This question already has an answer here:
How do I create image connecting two vertices in mxGraph?
(1 answer)
Closed 9 years ago.
I want to create a specific connection between two nodes. The connection would have an image. Is this possible?
I work with mxGraph, javascript.
http://upload.wikimedia.org/wikipedia/commons/0/08/Simple_stock_and_flow_diagram.gif
Sorry, for my english. Thanks.
You'll need to (and I'm looking at the v2 API here) create your own edge shape, most likely based on mxConnector (in the shape folder). paintEdgeShape defines the rendering of the edge, you use the canvas API to define that drawing (see API specifications for mxAbstractCanvas2D).