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?
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.
Is it possible to "convert" a Three.js written script that uses a Three.js CanvasRenderer to a WebGLRenderer one and if so how?
The short answer is: yes.
And in general you'll get better performance, though you might have a different-looking result.
A very important difference is that you can't use the renderer .domElement as a Canvas-2D because the WebGL renderer is 3D. So if you've been using canvas commands to, say, draw text, you might have some work ahead to adapt them.
Although I'm yet to touch Three.js, I know that it simply abstracts away many of the boiler-plate that comes with WebGL.
As a result of this, and a learn-by-example style documentation, what utility of Three.js should I use for displaying 4 million points which will be mostly static, but animate to a new position on an uncommon click event?
I'm assuming the use of VBO or FbO would be needed, but how are these functionalities encapsulated into Three.js, if at all?
Thank you.
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).