Hope everyone is having a good day. I recently built a filter with a camera effect over it but i’d also like to add a plane tracker on top of it (a company slogan texture image). I added in my Facetracker > Plane > add Material and it shows up on my preview screen (the development grid) but it doesn’t appear on a preview of the filter (mockup screen with my face). I am not sure why this is happening and I don’t know how to fix it.
If anyone has any has any solutions it would be very helpful. I am open all suggestions.
Thanks so much!
Face Tracker shows up on my grid but not my actual effect/filter
Use this: Facetracker > Canvas> Rectangle > add Material
Click on Rectangle and on the right panel, click on the 100% on the Width and select Fill Width & the same on height but Fill Height
It isn't appearing as planes are for 3D materials for positioning these 3D materials anywhere in the scene
A rectangle provides a space to apply 2D materials and must be a child of a Canvas
Also, You can't have a plane tracker under a face tracker as the plane is an infinite horizontal tool
Related
I have an A-Frame scene that contains, among others, a <canvas> element that is the material source for a 3D scene object. I can paint on the canvas programmatically, and it shows up as texture. So far, so good.
However, I'd now also like to enable the user to paint something on the canvas using the controllers. I have added two raycasters/controls:
<a-entity laser-controls="hand: left" raycaster="objects: table2"></a-entity>
<a-entity laser-controls="hand: right" raycaster="objects: table2"></a-entity>
And on the table2 object, I have added a raycaster-listen mixin as described in https://aframe.io/docs/1.3.0/components/raycaster.html#listening-for-raycaster-intersection-data-change.
This works in so far as I get the console log entries with the world coordinates of the intersection point, but I'm absolutely stuck at how to get from the world coordinates back to the canvas coordinates I need to actually paint in the right spot.
In addition, it seems no canvas draw commands I issue in the raycaster-listen tick callback actually have any visible effect (regardless of coordinates).
Any hints appreciated!
As usual, I figured it out the next day 😉
[...] I'm absolutely stuck at how to get from the world coordinates back to the canvas coordinates I need to actually paint in the right spot.
Solution found at https://discourse.threejs.org/t/convert-camera-frustrum-to-uv-coordinate-on-texture/16791/2 - just use intersection.uv which actually contains the normalized texture coordinates of the intersection point. Scale by canvas width/height and you're done.
[...] it seems no canvas draw commands I issue in the raycaster-listen tick callback actually have any visible effect.
Solution found at aframe not rendering lottie json texture mapped to canvas but works in three.js - set texture.needsUpdate = true; in the tick callback after drawing on the canvas.
Is it possible to know what area of the material is rendered on the display? I think Three.js already doing this right?
I trying to make Zoom level. When someone zooming it will become a good resolution.
I making CUBE using 6 planes and I’m trying to know the coordinate of the material and which areas are rendered on display.
The below example shows on the display only some areas of TOP, some areas of RIGHT and FRONT.
If I know which coordinate of material is rendered on the display, I’ll draw a good resolution of the image on the canvas.
Thank you,
First of all, sorry for my english
I have two 3d viewport, the first one for editing and the other for live render. The problem is i need to orbit again so they have same viewing angle. So is there any other way to do it more easily?
If you have both 3D viewports showing the camera view numpad 0 you can enable Lock Camera to View and both viewports will show the same movement. You can find the lock to view option in the View panel in the properties region N. You only need to lock the one viewport that you will be using to move around in.
As this will actually move the location of the camera, you may want to have a second camera to use for this and switch the active camera between your viewport and rendering camera in the scene properties.
I am using the version THREE.js57. I want to hide selected face at run time. Is this possible in three.js
Thanks & Regards
Indeed this is possible, you'll want to look into the Raycaster library, here's the high level steps
unproject your mouse click coordinates into the 3D scene.
cast rays into your scene and return an intersected array of collided objects
this intersected object will have the affected face and faceIndex as parameters
on collision turn the face # faceIndex transparency to 0
Have a look at these doc pages:
http://threejs.org/docs/#Reference/Core/Projector
http://threejs.org/docs/#Reference/Core/Raycaster
And this example for a start:
https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes.html
Edit:
Alright, well to then hide the face you can have a peak at this other SO post:
Can I hide faces of a mesh in three.js?
The gist is you have a multimaterial object, the first material is your default, and a second material that's fully opaque. Then when you intersect you set the face to use the second materialIndex. Anyway, the above link should do the job. Off to up vote that response. :)
I have created a jsfiddle [ http://jsfiddle.net/georgeneil/cfrsj/5/ ] to demo the issue.
The scene have a red cube and a number of particle inside that cube. Here the steps to reproduce the issue.
1) Set the cube as invisible by unchecking the visible checkbox in the control pannel.
2) Rotate the cube
3) Increase the opacity via the opacity control in the pannel
4) Set the cube as visible.
Now the cube would have become completely opaque. I have observed that the issue is not consistent but used to occur most of the time for me.
Is this a bug in the API or is there any issue in my code ?
Transparency is hit-and-miss in webGL. In your case, your transparent objects are competing with each other. One solution is to set the transparency of your particles to false in your shaderMaterial, so there is only the single transparent cube. Everything works in that case.
Fiddle: http://jsfiddle.net/cfrsj/6/