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
Related
SEE THE SOLUTION BELOW
I am really confused. The target i am trying to achieve is;
Use multiple textures on a loaded mesh.
I have searched multiple times and still i can see the similar questions but nothing helped me.
What i'v tried is (yet);
Created a new mesh with the target mesh's geometry and pushed to target object3d element. (Like a photoshop layer.)
var texture = new THREE.Texture(mapCanvas);
texture.minFilter = THREE.LinearFilter;
texture.needsUpdate = true;
var material = new THREE.MeshPhongMaterial({map: texture, transparent: true});
var targetMesh = book.children[0].children[1],
newMesh = new THREE.Mesh(targetMesh.geometry, material);
book.children[0].children.push(newMesh);
Result, wrong geometry attributes, or am i missing something?.
But i think it could be a easier solution like using multiple textures at the same time with a correct order.
Full code:
sampleImage.onload = function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = sampleImage.width;
mapCanvas.height = sampleImage.height;
var ctx = mapCanvas.getContext('2d');
ctx.translate(sampleImage.width / 2, sampleImage.height / 2);
ctx.rotate(Math.PI);
ctx.translate(-sampleImage.width / 2, -sampleImage.height / 2);
ctx.drawImage(sampleImage, 0, 0, sampleImage.width, sampleImage.height);
var texture = new THREE.Texture(mapCanvas);
texture.minFilter = THREE.LinearFilter;
texture.needsUpdate = true;
var material = new THREE.MeshPhongMaterial({map: texture, transparent: true});
var targetMesh = book.children[0].children[1],
newMesh = new THREE.Mesh(targetMesh.geometry, material);
book.children[0].children.push(newMesh);
};
I found a solution with cloning.
Do not push directly to the mesh group using javascript array push.
use .add method.
book.children[0].add(newMesh);
I'm using three v0.85.2.
By default, all my objects are configured to cast and receive shadows :
const mesh = new Mesh(geometry, material)
mesh.castShadow = meshConfig.castShadow
mesh.receiveShadow = meshConfig.receiveShadow
shadowMap of the renderer is enabled.
Self shadows seem to be correctly rendered (green squares in the image below).
But shadows casted to other objects are missing (red squares).
The problem seems to occur with all my meshes.
I don't find a way to make them appear.
DirectionalLightShadow, there you can read how to work with shadows when you use THREE.DirectionalLight() in your scene.
Also you can play around with .left, .top, .right and .bottom properties of the shadow camera of your light source.
var light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(50, 500, 22);
light.target.position.set(300, 400, 200);
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 5000;
light.shadow.camera.left = -500;
light.shadow.camera.bottom = -500;
light.shadow.camera.right = 500;
light.shadow.camera.top = 500;
light.castShadow = true;
scene.add(light);
three.js r85
jsfiddle example
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 am new to three js , i can able to generate the shadows using spot light but i receive unnecessary shadows too. what i need to do to remove the unwanted shadow .i need the shadows only for car and the wall and i need to remove the shadow like rectangle in the ground .
my code is as follows
var ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );
var light1 = new THREE.SpotLight(0xff00000);
light1.position.set(200, 1200, 0);
light1.target.position.set(0,0,0);
light1.shadowCameraVisible = true;
light1.castShadow = true;
light1.shadowDarkness = 0.8;
light1.shadowCameraNear = 400;
light1.shadowCameraFar = 1600;
//light1.shadowCameraFov = 30;
light1.shadowCameraLeft = -750;
light1.shadowCameraBottom = -500;
light1.shadowCameraRight = 1000;
light1.shadowCameraTop = 600;
var firstLight = new THREE.Object3D();
firstLight.add(light1);
scene.add(firstLight);
Thanks in advance
I see this you want selective shadow of object for the performance tweak.
The best you can do is for car model you have either .obj,.dae or which ever format loader you can load the object into scene via THREE.Object3D which has property "castShadow". Try this out:
var obj3D = new THREE.Object3D();
obj3D.add(/*content from loader*/);
obj3D.castShadow = true;
or
var mesh = new THREE.Mesh();
mesh.castShadow =true;
Enable or disable castShadow property with Mesh too.
I think this solve your problem
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 ?