I want to be able to update the size of the shadow map on a directional light in three.js.
When simply updating the the "shadowMapWidth" and "shadowMapHeight", nothing happens. When I update the "shadowMapSize" manually, the shadow sort of changes resolution but is not rendered properly since the shadowmap rendertarget is not set to the correct resolution. And finally, when I update the shadowmap rendertarget width and height, the shadow disappears completely (and or gets positioned incorrectly).
If anyone has any experience changing the shadowmap resolution of a shadow light in three.js I would love some help on getting this to work.
You have to dispose of the shadow map for it to update. Try this:
light.shadowMapWidth = 4096;
light.shadowMapHeight = 4096;
light.shadowMap.dispose();
light.shadowMap = null;
Related
In Forge Viewer I added and I tried to set color for THREE.PlaneBufferGeometry to #384c70 and as Material I used THREE.MeshPhongMaterial(). But there is a problem because that Color is transparent. If I used the same Color in THREEjs sandbox then it was right without transparent. Where is a problem?
I don't need transparent color. This error is also present for other colors not for all.
Thanks.
There is a example of my code:
this.viewer.overlays.addScene("custom-scene");
let plane = new THREE.PlaneBufferGeometry(100, 100);
let material = new THREE.MeshPhongMaterial();
material.color = new THREE.Color("#384c70");
material.side = THREE.DoubleSide;
let mesh = new THREE.Mesh(plane, material);
mesh.position.set(0, 0, 0);
this.viewer.overlays.addMesh(mesh, "custom-scene");
this.viewer.impl.sceneUpdated(true);
This is a kind of a weird bug in Forge Viewer when using a certain kind of color in an overlay. The reason is - the overlay rendering pipeline uses a custom shader logic for turning a specific range of colors into a see-through selection highlight.
It's definitely something the viewer needs to fix but in the meantime, I'd suggest avoiding the overlays and adding your custom geometry using ModelBuilder instead.
I'm trying to set a texture to an already existing mesh like this:
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
(The source a HTML5 canvas and that part works ok.)
...
mesh.material[0].map = texture;
I can change the material color without any problems, but setting the texture doesn't change anything. I guess this is not how changing the texture should be done..? I'm using MeshPhongMaterial.
So, long story short: I want to be able dynamically change a texture of an mesh.
Edit:
I'm trying to set the texture to one of the materials of a Collada model that is loaded. By using dev tools I can see that the texture is there in the object, but it is just not visible. I can change the color of the same material without any problems. Sometimes I can see the texture appearing with wrong colors after a very long idle time (which is weird).
I want to show a shadowMap of a model that the center shadow is darker and the edge is light(or thin),how can I set the properties?
soft shadow map is the thing you are looking for.. just add
renderer.shadowMapType = THREE.PCFSoftShadowMap;
before that remember to cast and receive shadows for the meshes/objects and enable shadow map by adding
renderer.shadowMap.enabled=true
good luck...
I'm trying to render a scene and then have a half-transparent post-processing effect rendered on top of it. I'd like to make it work with effect composer so I can later use more passes easily.
My basic structure is this:
composer = new Three.EffectComposer renderer
composer.addPass renderPass
composer.addPass transparentPass
composer.addPass copyPass
copyPass has renderToScreen = true, transparentPass is my custom fragment shader with each pixel's alpha is set to 0.5 and loaded with ShaderPass.
I've tried blending, depthTest and transparent for the shaderMaterial.
Also tried alpha and premultipliedAlpha options for renderer, autoClear off.
I'm getting either the scene from renderPass with nothing else or the transparentPass on any renderer.clearColor I choose. Not the composite of both. What do I need to set to make this work?
Thank you.
EDIT:
Here is a codepen example:
http://codepen.io/Eskel/pen/PzaOWb?editors=0010
And the code of my shader:
http://eskel.cz/js/three79/RGBAShader.js
It shows all white (and not a rotating cube underneath) even though all pixels are rendered with alpha channel set to 0.5. Should I mix it with the tDiffuse render target in the shader or is there a way to make the shaderPass transparent?
It's a really late response, but maybe it would help someone.
In constructor ShaderPass creates internal ShaderMaterial and we should set this material's transparency to true:
copyPass.material.transparent = true
I use a directional light to cast shadow on the ground of my scene. I only have a single object. I decided to have a very small shadow to keep good shadow quality. The problem is I can't manage to shift the position of the shadow camera and keep it on top of the object.
I tried several things.
Targeting my object works but the center of the camera don't change, just its angle. I don't want this behavior. I want to keep the same light direction.
Changing the shadowCameraRight of the light but nothing change
Changing the shadowCameraRight of the shadowCamera, nothing change
changing the position of the sahdowCamera. The "debugger" moves but the shadow stop being drawn as if I did not do anyting
I think there must be a pretty easy way of doing this but I could not find it.
Edit :
var light = THREE.DirectionalLight(...);
var myObject = THREE.Mesh(); //moving everyFrame
//here I just want to move the shadowCamera so the object stay in the frustum
Best
Why not using an Object3D?
var light = THREE.DirectionalLight(...);
var myObject = THREE.Mesh();
val allTogether = new Object3D();
allTogether.add(light);
allTogether.add(myObject);
// here set light position you want (relative)
scene.add(allTogether);
In your loop move the Object3D not your mesh, so everything is moved along.