I need to create a 3D box (transparent) and put inside of it another 3D shapes, such as cylinders and boxes. All of them need to be rendered dynamically based on data fetched from a Data Base. The 3D shapes inside need to respect the edges of the main box and their positions will be determinate by de data which cames from the DB. Any collision must be avoided and the 3D box must be allowed a rotation interaction to allow a visualization from different point of views. When rotated, all the 3D shapes inside must obay the perspective of the main box and their initial positions.
In this perspective, I need help to identify: What is the best and light way to do this for a React application?
I tried CSS 3D Transforms. However, it is not easy to put all the 3D geometric shapes together without any collision or did not see problems when all the set of shapes are rotated. This is the link that I am following: https://3dtransforms.desandro.com/box, to give one idea of what I am searching.
Thanks in advance!
UPDATE: This is some of pictures of what I am trying to do with CSS 3D transform. However, the geometric coordinates is not organized to allow the identification of a pattern to generate the shapes automatically. Besides,the position of inner shapes is not good for all the points of view, as it possible to see in bottom point of view.
Related
building a static website with React.
Description
I want to add a visual effect to the pages of the website, as shown below.
visual effect
I am trying to build a rectangular background. Some triangles will be cut from this rectangle (at least two vertices of the triangle must be on the edge before cutting), as shown in the shaded area in the figure.
Then I want the cut out triangles to float randomly in the page.
And I want the background of the content part in the middle (also a rectangle) not to be cut (ie only the outermost padding part is cut).
Some Attempts
I have tried to randomly generate the vertex coordinates of the polygons after cutting and the vertex coordinates of the cut triangles and display them using css clip-path and animation. But I haven't come up with a usable vertex generation algorithm.
Definitely you would have tried clip-path generator but might find that not working as expected on different screens. There's no efficient vertex generation algorithm for this. The alternate is to do so some random math by yourself. If you feel that your polygons are nice on one screen but scrambles on other, try using media queries.
So I've been able to generate a 3d material for a sphere object in Blender. The material is based on the video found here which uses a combination of nodes with the cycles renderer to generate a dynamic material. Although the finished product looks wonderful, I can't find a way to take this material and convert it to a png image. I'm not trying to render the image; I've already rendered an image of the object. I just want to take this generated planet and create a 2D map in the same way you might look at an image of the Earth that includes all surface area in one image.
Can someone help me create a png/jpeg of the 2D map or point me in the right direction?
I am trying to implement a tool into my application. the tool would allow the user to plot a triangle meshes using the mouse. I have looked everywhere for a way to do this, tutorials, examples, etc and have not been successful. I have seen the FXyz library but that does not really simulate What I am trying to accomplish. The goal of the program looks as follows:
Use Case Sequence:
The user adds a png image to the 3D scene or drags it into the 3D scene using the mouse.
Once the image is being displayed the user would then be able to plot a mesh around the image.
Once the user has finished plotting the mesh. There would have to be a way to add the image being overlayed by the mesh as a texture to the mesh. The image should look the same after being added as a texture. Is this too hard or beyond the scope of what can be achieve in JavaFX?
Theoretically It would then be possible to drag the vertices of the mesh at draggable points and successfully applying transformations to the texture. Would this be possible?
Images showing what I am trying to achieve
As you can see maybe after plotting the mesh the points connecting the vertices can be dragged in order to manipulate or transform the shape of the mesh. If the mesh has a texture over it. would the image then also transform ?
Would this be possible with the TriangleMesh class that JavaFX has which by the way there is very little out there which explains how to use it and how the points, face points and texture points work. Very confusing =(.
Target End Result
My question is would the type of manipulation shown in the image above be possible in JavaFX? Can this sort of functionality be achieved using the TriangleMesh class or other similar class in JavaFX ? As you can see what I am trying to achieve is really image manipulation I would appreciate knowing if there is another better way to do this.
I unfortunately do not have any code I can share. I just cant seem to produce any regarding this task. I am not asking to be given code or for someone to solve the problem for me. I just want to see examples be guided into the right direction on how to do this and to know if it is even possible or should I just give up on it!
If you have read this far Thank you so much for your time I really appreciate it.
I have read your question till the end :-) In contrast to many people here you are at least providing a clear description of what you want to achieve. According to my own experience I would say that what you want to do is easily possible with JavaFX and the MeshView is the way to go here.
You can use your image as the texture for this mesh and you can distort the image by manipulating the vertices of this mesh. I have implemented part of your functionality myself for a project so I know that it works.
I don't know how to explain this but the objects I make in ELEMENT 3D aren't 3D but more like 2.5D.
I made a video so you can see the problem.
https://sendvid.com/s1hv1ay3
My recording software didn't record the Element interface at 0:24, but I was trying to show in that interface that you could rotate it without problems.
You're not understanding how Element3D (and aspects of the AE interface) work. Think of the layer you apply it to as being its own window "into a 3D world". You don't rotate the layer itself, you rotate the objects within the Element3D world by changing the parameters in the timeline or Effects controls pane. You were using the rotate tool in the video with the Element3D-effected layer selected. Don't do that. Use the individual parameters within Element. Another way to rotate around the 3D object(s) is to use the camera. I suspect this is what you were attempting after seeing a tutorial or something. What you do is make a two-node camera and use the camera tool by cycling through the tool with the "c" key until you get camera rotate, which looks a bit similar to the rotate layer tool. With a two-node camera, rotating the camera allows you to rotate around the point of interest of the camera so it rotates around the object in 3D space. I suggest you get a more familiar with how 3D works in AE (which is not "true 3D", not 2.5D, but is "Planar 3D"; the Element3D plugin is one of the best 3D-integrated plugins working within this model).
don't ever move the layer the element 3d model is on.
Use the element effects controls (f3). usually found in group 1
I want to develop an image editing application in Flex 4. My initial requirement is to draw various shapes like Line, Rectablge, Triangle, Circle, Star etc in appication. I want to facilitate user to draw shapes using rubber banding like professional applications do.
All shapes would be vector and should look smooth in an size. So, can't use bitmap and scale them.
What are better methods to achieve this?
if you don't want to start from scratch with the basic shapes, there is this framework called degrafa: http://www.degrafa.org/
they have plenty of parametric shapes & curves and advanced features to organize them together.
Make shape editor with some control points. Control points are draggable sprites (circles or squares as you like). When control point is moved, editor must be updated - it may be resize or move action. On resize, draw your vector shape according to new size. The easiest way to make sprite draggable is startDrag() function - you can also set limits there (to stay in editor area or to disable negative sizes).
I have done such editors based on Sprites, added into Flex application with rawChildren.addChild, but you can try to use Canvases instead of Sprites if you wish.