Should be enaugh:
renderer.shadowMap.enabled = true;
//for object
model.castShadow = true;
model.receiveShadow = true;
//for ground
plane.receiveShadow = true;
//for light
light.castShadow = true;
but it's not. What am I missing? Here's my full code:
https://s3.amazonaws.com/uploads.hipchat.com/245215/2593611/jiHVulw07RlMXSB/rings.7z
It seems that you set the near parameter a little too far. Set it to:
light.shadow.camera.near = 1;
and it should be working just fine.
Update:
Also noticed that your light angle is incorrect too, I'd suggest changing it to at least Math.PI / 4 so it's facing the right direction.
Related
I am loading a GLTF model. I then need to replace the material of some of the meshes with a MeshPhysicalMaterial (MPM). This MPM material has a normalMap from a texture that I previously loaded. When replacing the material all the meshes with the new material are just black. If I replace the material but not add the normalMap it works OK.
If I add the MPM material on a new object it also works as expected. I guess I need to mark something as needing update but I am not sure what.
I have tried the following:
material.vertexColors = parseInt(material.vertexColors); //Ensure number
material.side = parseInt(material.side); //Ensure number
material.needsUpdate = true;
geometry.attributes.position.needsUpdate = true;
geometry.attributes.normal.needsUpdate = true;
if (geometry.attributes.color) {
geometry.attributes.color.needsUpdate = true;
}
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.morphTargetsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;
But nothing seems to work. Any ideas would be very much appreciated.
Three.js r76
I was building a JSFiddle example for a slightly different problem but now can't get the shadow CameraHelper in the correct place to continue setting up my demo.
The spotlight helper appears to be working correctly but the shadow camera helper just seems to be parked at (0, 0, 0) and looking down the z axis.
Can anyone see where I'm going wrong please? Thank you.
JS Fiddle of Shadow Camera Helper seemingly in the wrong place
Code:
spt.position.set(0, 1000, 1000);
spt.castShadow = true;
spt.angle = 0.3;
spt.exponent = 2.0;
spt.penumbra = 0.05;
spt.decay = 1;
spt.distance = 3000;
spt.shadow.mapSize.width = 512;
spt.shadow.mapSize.height = 512;
spt.shadow.camera.near = 10;
spt.shadow.camera.far = 6000;
spt.shadowCameraHelper = new THREE.CameraHelper(spt.shadow.camera);
lightHelper = new THREE.SpotLightHelper(spt);
scene.add(spt.shadowCameraHelper);
scene.add(lightHelper);
scene.add(spt);
You need to enable Shadows in the renderer to get the CameraHelper to work:
renderer.shadowMap.enabled = true;
https://jsfiddle.net/n57kjtcs/17/
When I cast a light on a double sided plane, I see a glitchy artifact. Does anyone know why it is there and what I should do to avoid this problem? Thanks in advance!
I checked if I could find this problem anywhere else, but surprisingly I could not.
/** Plane that causes glitch. */
function addPlane(x, y, z, size) {
var geometry = new THREE.PlaneGeometry( size, size, 1, 1 );
var material = new THREE.MeshPhongMaterial({color: 0x0077aa, side: THREE.DoubleSide});
var plane = new THREE.Mesh(geometry, material);
plane.castShadow = true;
plane.receiveShadow = true;
plane.position.set(x, z, y);
plane.rotateX(Math.PI * 1.5);
scene.add(plane);
}
Here is my code: http://jsfiddle.net/scjcvx3k/2/. I tried to put in only the code that was relevant for this question.
You are getting artifacts from self-shadowing. You have two options. One is to set
plane.receiveShadow = false;
The other is to set light.shadowBias.
light.shadowBias = -0.001;
Unfortunately, setting shadowBias can result in another artifact: "Peter Panning".
Google these topics if you want to know more about the issues.
Updated fiddle: http://jsfiddle.net/scjcvx3k/7/
three.js 71
i want to apply shadow on full object using threejs, if i rotate the object the shadow must be with the object, meaning that i want to apply the shadow for the hole object, i tried with Spotlight, but no luck i doesn't get any changes on my object, so here below is my code
light = new THREE.SpotLight( 0xffffff );
light.position.set( 200, 200, -200 );
light.castShadow = true;
light.shadowMapWidth = 1024; // power of 2
light.shadowMapHeight = 1024;
light.shadowCameraNear = 200; // keep near and far planes as tight as possible
light.shadowCameraFar = 500; // shadows not cast past the far plane
light.shadowCameraFov = 20;
light.shadowBias = -0.00022; // a parameter you can tweak if there are artifacts
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true;
scene.add( light );
Did you tried to set object.receiveShadow = true; on the object on which shadows should be rendered ?
I have a plane with a transparent PNG (a world map).
Can I cast shadows from one plane onto another plane?
I am having no success with this code:
plane = new THREE.Mesh(new THREE.PlaneGeometry(200,200), new THREE.MeshLambertMaterial({color: 0xcccccc}));
var mapTexture = new THREE.ImageUtils.loadTexture("img/map_transp2.png");
mapTexture.needsUpdate = true;
var mapMaterial = new THREE.MeshBasicMaterial({
color:0xaaaaaa,
transparent:true,
map:mapTexture,
side:THREE.DoubleSide
});
mapPlane = new THREE.Mesh(new THREE.PlaneGeometry(800/5,370/5), mapMaterial);
plane.receiveShadow = true;
mapPlane.castShadow = true;
Transparent parts of the mesh should be handled differently if they're written in texture.
Take a look at this example: http://threejs.org/examples/webgl_animation_cloth.html
Your two planes are on the same z value. Give them some distance with:
mapPlane.position.z = 100;
// You need also to set this:
renderer.shadowMapEnabled = true;
// and also you need to add a light and enable its shadow, for example,
sLight = new THREE.SpotLight(0xFFF4E5,1);
sLight.position.set( 250, 250, 250);
sLight.castShadow = true;
sLight.shadowMapWidth = 1024;
sLight.shadowMapHeight = 1024;
sLight.shadowCameraNear = 300;
sLight.shadowCameraFar = 600;
sLight.shadowCameraFov = 45;
scene.add(sLight);
I have had a similar problem.
I don't know why this happens, but I solved it changing the planeGeometry to a cubeGeometry (in the plane casting the shadow)
See https://github.com/mrdoob/three.js/issues/9315
Set
renderer.shadowMap.renderReverseSided = false
or/and
renderer.shadowMap.renderSingleSided = false
can solve the problem.
When disabled, an appropriate shadow.bias must be set on the light source for surfaces that can both cast and receive shadows at the same time to render correctly:
let dl = new THREE.DirectionalLight()
dl.shadow.bias = -0.0001
three.js r.85