I am currently trying to write a program using three.js that will generate novel 3D blocks such as this. As you can see, the model is made from relatively very simple geometric figures. I've considered everything from randomly appending primitives to each other to using machine learning data (just a thought). What are your thoughts on this? So far, I am leaning towards the former.
On another note, do you think it would be more wise to use geometries from three.js's stock, or to generate points and connect them with lines?
Related
Im trying to experiment with product design using javascript, in which the user can select a shirt, mug, box, book for example, and insert a text and/or an image and move it or rotate it or scale it, then they can apply the changes, and a 3D mockup will be generated.
Is this possible using a Javascript library such as Three.js and/or jQuery, or will i need to actually use another technology other than JS, for example WebGL directly ?
I have not dabbled with javascript before as im usually a backend PHP developer, but this idea has caught my attention and i couldnt find enough resources online about it.
Yes this should definitely be doable with three.js
Worst case you can just manipulate a plane with a texture around the product, however I suspect a better way would be manipulating a texture. This would be quite easy if you don't want to manipulate the image in real-time on the 3d mockup, but likely also simple enough to do in real-time.
I'm working on an application for generating a path for custom-made CNC machine. It is based on a PLC controller which does not support G-code, therefore I need to define the whole path as a list of commands.
I'm having a trouble with defining the toolpath for pocket milling. As an input, I use DXF files with different kind of shapes in it. Each shape is located on different layer and built of simple elements such as LINE, ARC etc. What I need is to analyze these simple elements as a closed contour and generate toolpath for milling the whole material inside this contour. Do you know of any library or simple algorithm where I can define the shape (in this case, based on the DXF data) and the lib/algorithm would generate the whole toolpath, taking the tool diameter into consideration?
For simple shapes like circles or rectangles, I'm able to generate such toolpath manually but when the shape is more complex (e.g. like below) I'm running out of ideas how to do so.
There is a lot of freeware CAM software in the internet and each of them generates the toolpath in form of G-Code, so I assume such kind of algorithm is implemented there somehow. I thought about using such CAM software but the G-code output is not usable for me, besides I do not need any GUI. Most of them is also written in higher-level languages whilst I'm writing my app in JavaScript running under node.js.
Do you mean you know how to process each entity individually and don't know how to combine them together? Since they touch you just need to find the next entity according to its starting/ending point (1), from the current entity's ending point. And if the point (1) was an ending point of that entity, you will need to process the found entity in reverse, or process it in normal order and reverse the resulting line. Of course taking care to offset it in the correct direction.
For faster neighbor search sort them first by either X or Y coordinate of both their starting and ending points.
I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.
What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.
So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).
My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?
Any help here is greatly appreciated!
To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.
If you are interested in doing the same, I've put together a simple demo, which is also available on Github.
Hi I'm working on learning 3d game development and I'm starting with JavaScript and the html5 canvas and I was wondering if I were to have a 3d model do I draw the entire model(front, back, etc) and let the web browser decide what to render or should I try to just draw the sides that are in view of the camera? I ask this because I can see how it would be faster to do the latter of the 2 but that can get very complex and I'll need to do quite a bit more research to find how to do that.
Thanks!!
It's up to you, but it depends at least in part whether it's more expensive to spend the time clipping the model or just to render the entire thing dumbly.
Modern GPUs are pretty fast at drawing tons of geometry, so you often won't optimize the geometry sent to the card. However, it sounds like you're using the 2D canvas and writing your own rasterizer, so it may well be faster for you to do some quick optimization. Profiling and experimenting will turn up the right answer for your particular project.
If you're just learning I wouldn't worry overly about performance at this point but instead making sure you get the fundamental ideas and math down.
I've a set of real life coordinates (x,y,z) and I should be able to create a multidimensional plane out of that. I've tried to use different kind of elements, but haven't found the proper one. I'd love to find some pointers for proper approach.
As an animation framework I've used ThreeJS, which seems to be quite convenient for task.
-Heikki