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).
Related
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
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.
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.
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'm about to jump into some simple game development with Javascript. I would like to one day transition to 3D development but for now am only going to be doing 2D "top down" objects.
I know that this isn't ideal but I feel like it will help me get familiar with the 3D "environment".
I am using Three.js as it appears to be very well developed and I like that it can do Canvas, WebGL and SVG. However, my very first problem I've come across is, I don't know how to "move" an object. Using just Canvas I can easily take an object I have rendered and modify it's .x or .y property to "move" it. However, for Three.js objects so far all I've found is object.rotation.x, etc. I can move the camera, but this doesn't work because I need objects to move individually.
So I guess what I'm looking for is any resources into Three.js for 2D development, or developing a 2D top-down game in a 3D environment.
The Getting Started article is pretty good.
LearningThree.js got a series on "let's make a 3D Game".
There is a nice searchable reference available too.
Note that the project moves super fast so the API might change
here and there, so keep an eye out on github and when you
update always read the change log to see if you need to update your code.
Gooduck!.