I have an animated fire "burning" on a round plane on Blender. It's very similar to the one found in this tutorial link. I want the render the model on three.js.
I tried the Blend4Web HTML format and only the texture of the fire didn't appear.
I also, exported it to .json and collada with the three.js exporter. No results.
Do I use UV mapping?
Related
I've made a text animation using nurbspath. now I want it to export as gltf to three.js
when I'm exporting as gltf there is no animation to play. also when I'm converting it into mesh it is losing the animation please help me on this.
screen shot of image
Thanks in advance!
I bought a tshirt 3d model in the format .fbx. I'm using this tutorial to get started with three.js: https://tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/
I exported the .fbx model in blender to a .glb file. This .glb file is used in my three.js website. On the website parts of the tshirt are blurred, some parts look like they should. Here is a comparison image with the blender model (dark) and the blurred three.js model (light): https://imgur.com/a/0EhczQg
What can I do? Do I have to change something in blender prior to the export or do I have to change the three.js code from the tutorial?
As Mugen87 stated, the solution was to set receiveShadow and castShadow to false.
We have an issue with exporting our 3D Assets and animations correctly so that three.js can correctly display them.
All our 3D artists work with Cinema4D so we need to go through blender to export a three.js compatible JSON. They export the scene as FBX and then import it to blender. This seems to work fine. The model looks good there (with Material View set in Preview Window) and the simpler models we exported even worked with textures and animations.
But we now have a scene where, when we load the resulting JSON, some of the meshes are flipped 180° (but only some - the trees) and one of the models (Santa model) is not textured. They all look fine in blender.
When loading the JSON in https://threejs.org/editor/ you will immediately see the issues:
Is this an export problem? Can we fix it by tweaking the export params? Will we need to adjust the model in blender?
I would advise a couple things here:
File a bug on three.js including the .blend file
Try freezing transforms in Blender or C4D before export
Perhaps try a different three.js-compatible blender exporter, like glTF-Blender-Exporter.
Is there any way to export the whole scene from Maya to Three.js.
Exported elements should be:
all mesh, textures, cameras, including the lights, shadows etc.
So that I can get the proper rendered effect that is been in the maya.
If you read the doc for the Maya exporter, it currently doesn't support exporting lights. You'll have to create the manually in your three.js code.
I don't know the current status of three.js loaders as I havn't used for a while now but back then Collada and FBX exporters were shaky. And still seem to be. You can try exporting from Maya to FBX and convert it (FBX file format supports lights).
OBJ file format doesn't support support lights of animation but this is the easiest way to go.
Long story short, export your models with the correct materials and create and place your lights manually.
PS: You can't export shadows.
In Three.js, How do I create transparent hole inside a plane so that only objects below the hole are visible. Something like clearRect of canvas.
I'm doing this with Blender and PSP.
So my scenario is the following:
Create a trensparent image with a hole in PS or PSP.
Open Blender and create your plane. Use the transparent texture you just created on it.
Export the Blender scene into a collada file.
Use on of the sample .html-s to display the collada file.
This is my working solution. If you wish I can give you working codes.
Or if you are not familiar with Blender and this collada related things then you should use that example files they using transparent images (for example: webgl_particles_billboards.html).
Take a look at "textures/sprites/disc.png" It's a transparent image as well. You can replace it with your transparent image with the hole.