We've been dealing with the drawing blueprints with Three.JS. We want convert our 3D object into to the manufacturing bluepritns (TOP Orthogonal view on drawings) .
What we have:
What we want to export:
Does anybody dealt with that ? I cannot find workable solution on internet. We have been struggling with this for a long time :\
You can just rotate your object and then download it from canvas:
How do you save an image from a Three.js canvas?
You can also change object type from full mesh into armature so that it becomes transparent.
Another option if you need some postprocessing is export your 3d object into blender (there are many exporter modules available).
Then in blender, write a script to create image in three projections you need.
I think you can automate this all quite quickly.
PD. If you need stl format exporter. Will this fit your need?
https://threejs.org/examples/misc_exporter_stl.html
Related
I am thinking of this:
I would like to place some text over the bokeh like this:
The question is (a) how hard this is / if it has been done before so I don't have to recreate the wheel, and (b) how to implement it in JavaScript, perhaps in Three.js.
I haven't been able to find any examples of Depth of Field (DoF) or Bokeh for 3D text or just 3D lighting bokeh in Three.js or WebGL, which makes me wonder if it is too hard or not possible. It doesn't need to be highly optimized performant because I just want to generate bokeh images to save to a JPG file. Wondering how to go about this, if you could point me in the right direction.
I haven't been able to find any examples of Depth of Field (DoF) or Bokeh for 3D text or just 3D lighting bokeh in Three.js or WebGL, which makes me wonder if it is too hard or not possible.
three.js provides two DOF examples in the official repository. I recommend the second one since it's a bit more advanced shader. You will also notice that the example focuses the object that is hovered by the mouse.
In any event, implementing DOF is a post-processing task. So the idea is to render the scene and the respective depth information into render targets and then use and additional pass for the actual DOF effect.
https://threejs.org/examples/webgl_postprocessing_dof
https://threejs.org/examples/webgl_postprocessing_dof2
three.js R105
I loaded a Mesh from a JSON File, here is my current result:
my Project
It is an object I exported from blender as JSON and then used its vertices to create a geometry of Points (THREE.Points) (which is important for the looks of it)
I am now looking for a way to "animate" the Points, so that the "surface" looks vivid / living. So basically it should be moving around a bit, something like this (without the rotation):
Link to animated Gif
I have ruled out displacementMap, as this does not work for the PointsMaterial (or does someone know a workaround?)
Does anyone have hints or ideas? I thought of maybe morphing 2-3 Objects .. but I am not sure if this will work for a points mesh.
One approach to achieve your desired effect is to use morph target animation (also called vertex morphing). As you can see at the following example, three.js does support morph target animations with points.
https://threejs.org/examples/webgl_morphtargets_sphere.html
There is a lot of existing literature about vertex morphing, so it should be no problem to get familiar with this technique. I suggest you create your animations in Blender, export the model to glTF and the load the file via GLTFLoader into your app like shown in the example.
Hey im trying to implement shadow mapping in webgl using this example:
tutorial
What im trying to do is
initialize the depth texture and framebuffer.
draw a scene to that framebuffer with a simple shader, then draw a new scene with a box that has the depthtexture as texture so i can see the depth map using an other shader.
I think i look ok with the colortexture but cant get i to work with the depthtexture its all white.
i put the code on dropbox:
source code
most is in the files
index html
webgl_all js
objects js
have some light shaders im not using at the moment.
Really hope somebody can help me.
greetings from denmark
This could have several causes:
For common setups of the near and far planes, normalized depth values will be high enough to appear all white for most of the scene, even though they are not actually identical (remember that a depth texture has an accuracy of at least 16bits, while your screen output has only 8 bits per color channel. So a depth texture may appear all white, even when its values are not all identical.)
On some setups (e.g. desktop OpenGl), a texture may appear all white, when it is incomplete, that is when texture filtering is set to use mipmaps, but not all mipmap levels have been created. This may be the same with WebGl.
You may have hit a browser WebGl implementation bug.
Three.js is commonly used with WebGL, but I am interested in using its CanvasRenderer, because of compatibility issues. However, I require textured models.
I have seen this one demo, and none else, showing that it is possible to have a textured mesh created in a 3D program and rendered with Three.js. This demo even has animations, but I just need as much as textured meshes.
I'd like to know if there is a way to do this without crafting my own solution. Specifically I'm looking for a way to export from something like Blender and be able to import it with Three.js using the Canvas renderer.
Also, I know the speed implications, I need simple low-poly output.
Have you considered using the Blender exporter?
I have some time and I'd like to convert a Maya scene to WebGL or render it to a canvas if possible without WebGL. The model is of a desk lamp consisting of primitives and meshes, I've parented parts to the joints instead of binding them to the skeleton and now I want to use a JS library or WebGL to render, then animate with mouse movement and/or touch event. If I can get the model onto a canvas, or into a WebGL enabled application while conserving the parented relationships, I could then write a few functions to bind joint rotation to mouse movements, I just need a little help with actually exporting and importing my Maya scene while conserving relationships. Thanks in advance.
You can try Three.js WebGL library for that. They have exporters from 3D models to JSON written in python here.
For example you can try to export your model in obj and then convert it using convert_obj_three.py.
Then you can load your model into canvas using THREE.JSONLoader method. There is a lot of examples on internet.
If your scene is already in Maya then www.inka3d.com should be the right thing for you. Inka3d supports joints, also objects parented to joints, and you can easily change the rotate parameters from javascript in your exported scene using the same parameter names as in maya.
If you are no coder, you might try Verge3D for Maya. It supports skeletal animation and you can rotate your joints with mouse/touch by using visual scripting (namely the "when dragged" and "set rotate" puzzles).