I am new to Three.js. I have found this library in my search for an Open Source project upon which to build a very simple virtual construction environment. I have in mind something like buildwithchrome which would allow one to create an object from a set of about a dozen parts (which I would be exporting from SolidWorks).
Do you know of such a Three.js project that, just like buildwithchrome, shows a list of parts and allows the user to select, drag, drop, translate, rotate, remove, snap / unsnap parts and move the camera around?
That would be great, since I could use it as a starting point and concentrate my efforts on changing the list of parts and the way the snap together, instead of having work on handling user interactions.
I have found this which comes closest to what I was looking for: Mecabricks. It's not an open source project, but, functionally, it's pretty much exactly what I had in mind and it's built with Three.js.
Related
I'm investigating the possibility to be able to render 3D objects in a web application. Imagine I have a 3D cube looking something like the left in the figure below.
I then want a slider that sets a threshold value of what to be rendered. Let's say the value was to be set to 1.2. Then I would want only the red parts of the cube to be visible, like to the right in the figure. I also (of course) want to be able to rotate the object freely.
In the figure the cube consists of points in a grid, but I would like a nice looking model out of it instead, like an isosurface.
Is this possible to achieve in an online application via React or something alike? I've read a bit about Three.js but I have only seen usages of pre-made models.
So in short, what I'm asking is if it is possible to go from points -> model -> view, ideally without having to reload the page.
Take a look at this project, it's made with Three.js, on its site you will find more detailed information, but I would recommend creating the model in a 3D program like Blender and then playing with the textures and geometries to achieve the desired effect.
Also check out OrbitControls, a very simple tool to explore your 3D scene
I did this project that responds to the microphone, it's a bit messy but you can play with it and find other projects on my github
I'm planning on creating an interactive 3d application in js. My question is whether or not babylon.js or three.js supports interactivity? Can't seem to find any information on this, and the documentation doesn't help much either.
Note; by interactivity, I mean for the user to be able to draw elements on a given 3d scene.
I can't speak for babylon.js as I've never used it, but I do have some experience with three.js.
If by "draw elements" you mean creating or manipulating shapes/geometries on the fly based on user-input, then the following examples should prove that its definitely possible.
For instance, on the three.js docs page, there is a control-panel used for manipulating a CylinderGeometry() object in the top-right corner of the live-example.
An example of "drawing" from cursor-input using raycasting can be found on thee.js's examples page as well as another example where objects within the scene are draggable.
To be honest, the interactivity of your app is only limited by you.
Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.
I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).
I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code