i have a problem with Three.js and its fog. The fog itself is implemented in the Render function to increase the fog with the time. The problem is that the fires are set as meshes like in volumetricFire and dont disapear when the fog increases. is there a possibily to get this fixed?
i was reading the same problem in this
ShaderMaterial fog parameter does not work , but dont know how to work on that.
Related
I'm trying to render texture to material but it rendered is not correctly, maybe my texture is wrong, but when i add the texture in blender it renders correctly. I don't know why.
Sorry I just learned threejs, but the current project needs to render in 3d. So I came here to ask if anyone has a solution, please help me.
Here is my Codesanbox:
https://codesandbox.io/s/hero-kdhox?file=/src/App.js
The texture I have added in Blender something like this:
https://imgur.com/dYkD5u8
You must flip your textures vertically, threejs will by default flip them when you import them using 'useLoader' there is a property flipY for textures but it hasn't been working reliably
Your best bet is to flip them vertically manually before importing
Alternatively, pack the textures in your GLB on blender itself
After simplifying glb successfully with the answer in this post.
The textures in are not being applied to the model any more (it appears completely black and unreflective(no material)
How would I programmatically get the textures to work with this new simplified geometry?
I think its something to do with the uv's but im not to sure how to have it work according to simplified geometry, if even possible.
THREE.SimplifyModifier currently does not preserve UVs in the geometry, which you'll need for textures to work. See: https://github.com/mrdoob/three.js/issues/14058. There is a workaround suggested in that issue (via changes to SimplifyModifier) but as discussed there, some artifacts will likely be visible in the result. If you can do the simplification in Blender or another modeling tool, you may have more control over the process and can get better results.
I have a photo-realistic scene already created in 3ds max. I want to render the scene on the web using WebGl and three.js. TO get the realistic effects created in 3ds max using mental ray renderer, I tried to bake the light maps from 3ds max to JPEG files and then map objects in three.js to the texture(exported JPEG) files. But the efeects in three.js seem to be stretched out and not positioned properly. Is my approach correct in the first place? If yes, could it be a problem with the UV mapping from the 3ds Max? Please provide some links if possible to map UVs properly in 3ds max while baking if that's the issue.
Also, do I need to use any custom shaders to get such effects? (I honestly know nothing about shaders if this question seems silly)
Thanks in advance.
I would highly recommend using the THREEjs exporter:
https://github.com/mrdoob/three.js/tree/dev/utils/exporters/max
I have had a lot of trouble with Maya and other programs using any of the built in export options. Face winding, UVs and other stuff seems pretty iffy.The exporter helps.
Once you've done that, there's something else to keep in mind - THREEjs allows two sets of UVs only per piece of geometry. One for the map, bumpmap, displacementmap, etc, and another for the lightmap. So if those two UV sets end up different from one another, you might need to swap which you assign as map and which as lightmap.
Link a fiddle with what results you have so far and we might be able to help more. The only thing i can recommend is to use the THREEjs exporter without seeing what code you're using.
Exporter for 3ds Max has been dropped from the official Three.js repos, you should use glTF format instead. See this official page for the list of glTF-compatible Max exporters:
https://github.com/KhronosGroup/glTF
I've always found lighting and shading to be the most difficult part of WebGL / Three.js to get right – I feel like I'm making it up.
What combination of lighting and shading do you think I would need to achieve a similar look and feel to the following image? It's so soft and yet well-defined, whereas my attempts always come out harsh and haphazard.
http://threejs.org/examples/#webgl_shadowmap
http://threejs.org/examples/#webgl_morphtargets_horse
This examples use the same lightning effect, check out the Code.
I'm struggling with a visualization I'm working on that involves a stream of repeated images. I have it working with a single sprite with a ParticleSystem, but I can only apply a single material to the system. Since I want to choose between textures I tried creating a pool of Particle objects so that I could choose the materials individually, but I can't get an individual Particle to show up with the WebGL renderer.
This is my first foray into WebGL/Three.js, so I'm probably doing something bone-headed, but I thought it would be worth asking what the proper way to go about this is. I'm seeing three possibilities:
I'm using Particle wrong (initializing with a mapped material, adding to the scene, setting position) and I need to fix what I'm doing.
I need a ParticleSystem for each sprite I want to display.
What I'm doing doesn't fit into particles at all and I really should be using another object type.
All the examples I see using the canvas renderer use Particle directly, but I can't find an example using the WebGL renderer that doesn't use ParticleSystem. Any hints?
Ok, I am going from what I have read elsewhere on this github issues page. You should start by reading it. It seems that the Particle is simply for the Canvas Renderer, and it will become Sprite in a further edition of Three.JS. ParticleSystem, however is not going to fulfill your needs either it seems. I don't think these classes are going to help you accomplish this in WebGL in 3D. Depending on what you are doing you might be better off with the CanvasRenderer anyway. ParticleSystem will only allow you to apply a single material which will serve as the material for each particle in the system as you suggested.
Short answer:
You can render THREE.Particle using THREE.CanvasRenderer only.