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...
Related
It this possible? If so, I can't seem to locate any documentation around it.
You can do that to a limited amount by using a THREE.ShadowMaterial for the objects receiving the shadow. You might need to have a separate renderpass for shadow-rendering though. See here for an example:
https://codepen.io/usefulthink/pen/JrZOPw
Yes, alter the color of your shadow plane's material. I needed a slightly blue-ish tint to my shadows so used something like this:
var material = new THREE.ShadowMaterial({opacity: .7, color: '#003'});
I'm getting started with three.js, and I don't want to use WebGLRenderer (renderer = new THREE.WebGLRenderer();) at all. Instead I want to use renderer = new THREE.CanvasRenderer();.
I don't want to use WebGLRenderer due to lack of support.
How can I have a camera orbit without using WebGLRenderer, and use canvas only in three.js?
The three.js site has a small but effective set of Canvas samples as well. Just take a look at the source of https://threejs.org/examples/#canvas_camera_orthographic: it has an orbiting camera. It is orthographic, which you might not want, but the source should be self-explanatory on how to change it to a perspective camera.
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 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;
I am using CanvasRenderer to render numerous Sprite objects. I am mapping a texture (PNG image) to the Sprites. I'd like to be able to change the color of the texture programmatically.
With the WebGLRenderer, I can use ParticleSystem and ParticleSystemMaterial to achieve this. Here's a live demo of setting color to this texture (http://wxalert.info/private/dv/ball.png) with that technique: http://wxalert.info/private/dv/demo.html
But since CanvasRenderer does not support ParticleSystem, I am using Sprites instead with a SpriteBasicMaterial. Here's a live demo of this: http://wxalert.info/private/dv/demo2.html
I'd like to be able to set the color with CanvasRenderer just like with WebGLRenderer, but I'm not sure if this is possible.
One thought was perhaps to load the image to an HTML5 canvas element, apply the color there, and then load the canvas context from the material. But any other suggestions would be greatly appreciated.
UPDATE: Here's an example of kind of what I was thinking of doing if using the HTML5 canvas: http://wxalert.info/private/dv/html5canvas.html. Basically, I would do the color manipulation there and then just load the canvas from the material. But wasn't sure if there was a simpler or better way.