i have a large scene, and the directionlight is far from the ground, so the objects's shadows are very weak and ugly...
since the CSM is removed from three.js, so what is the alternative solution to improve shadow for a large scene?
More recently, a newer Cascaded Shadow Map implementation: https://github.com/vtHawk/three-csm
Related
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 large terrain scene with many objects that cast shadows on the terrain. It seems I need multiple light sources to achieve good shadow resolution.
I will probably need to edit the source code to make a particular light affect one object in the scene only so that it only casts shadows from that one light.
How do I edit the shadows SRC in THREE.JS to acheive this?
I'm already feeling comfortable enough with this library, but this one made me tired already:
When I'm trying to simply render a mesh without any textures, exported from blender to .obj (triangulating, smoothing groups enabled), the WebGL renderer does that perfectly, but I also need to make it possible with canvas renderer, and here comes the trouble; polygon edges have seams between them and become partially seen through
Just to make it clear, providing screenshots
WebGL Renderer
https://www.monosnap.com/image/OVaQO8yLDU9Wl6ufhADDVCEWg
Canvas renderer
https://www.monosnap.com/image/1AYeyHjWkGx9fQ6vg6xLr0EcV
mesh is quite complex, ~7k triangles
When using CanvasRenderer, you need to set
material.overdraw = 0.5; // or some number between 0 and 1
This will help to alleviate the problem.
Note: overdraw used to be a boolean; it is now a float.
three.js r.63
I have a quick question, may be someone will explain it to me.
The scene setup is show below. I have a sprite tree, a cube and a cubeCamera. Cube material has envMap set to cubeCamera.renderTarget. (CubeCamera is places where the cube is, and also i hide the cube before calling updateCubeMap method).
So, the question is why the sprite appears upside-down in the reflection?
This seems to happen only to sprites, other objects behave as expected.
In the actual project we manually flip sprites before updating cubeCamera, and it seems to work ok. But i want to actually know why is it so? Thanks!
UPD. Demo http://webgears.ru/public/wgdemos/spriteInEnvMap/
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.