Three.js Spotlight casting shadow without an object - three.js

I am facing a problem where a THREE.SpotLight is casting a Shadow without an object beeing in its frustum.
I have setup a simple scene containing a THREE.SpotLight and a plane-mesh. The SpotLight is set to cast Shadows and the plane to receive Shadows. There is a square Shadow visible on the ground plane, which is the size of the SpotLights shadowCamera. This scene is the right hand side of the image below.
A cube-mesh is now added and positioned outside the initial camera viewspace. By zooming out, a bit before the cube-mesh becomes visible to the camera, the Spotlight Shadow disappears. This is pictured in the left hand side of the image.
http://jsfiddle.net/L0rdzbej/157/
This happens in Firefox, from what I heared it is not the case in Chrome. What is happening here and how to avoid it?

The shadow does not show up anymore, so im marking this as solved.
Edit: In case anyone comes a long who is facing the same problem, here is a link to the reported issue on github: https://github.com/mrdoob/three.js/issues/7750. It hasnt got much attention because it couldnt be reproduced by the maintainers.

Related

THREE.js Diagonal Lines when rendering. showdow.bias helps but not "castShadow" doesn't

screen_shot_showing_diagonal_lines
My THREE.js project is rendering these weird diagonal lines. I searched online and see that the issue is due to object casting shadow on itself.
While changing the shadow.bias property did help, it also created a gap between the object casting the shadow and the plane receiving the shadow ("peter-panning"). Note the directional light here is the only light source casting shadow in my scene.
this.directionalLight.shadow.bias = -0.001
I thought I might resolve this instead by changing the "castShadow" property of the ground plane meshes to false in the json file it is reading from so it will not cast shadow on itself but this doesn't seem to change anything in the rendering.
"castShadow": false,
"receiveShadow": true
I wonder if the shadow casting property is set somewhere else? or perhaps the issue is not with shadows at all (shadow.bias worked so it should be a shadows issue)? or there might be some other way to resolving this.
Thank you!

How to fix Blue Screen appearing after GameObject is removed in Unity 2d Project

I have been successfully building and running a Unity 2D game, but started receiving a Blue Screen during one of my operations. Specifically, when I close a popup and remove all of its child Game Objects, the entire Game Screen turns dark blue (the default background color of the main camera). The music for the game still plays and clicks are still registered if you click in the right area (I can still press the back button, just can't see it).
If I remove 1 gameobject, this problem doesn't come up. But once I have to remove 2 game objects, the entire screen turns blue.
This is my function for removing my game object in case it helps, which works perfectly when it comes to actually removing the gameObjects correctly (game objects to be removed are created from prefabs). I think the problem may be with the camera for some reason, but I have no clue as to why it happens on this function.
public void Remove(int index)
{
float toggleWidth = toggle.GetComponent<RectTransform>().sizeDelta.x;
DestroyImmediate(scrollSnap.pagination.transform.GetChild(scrollSnap.NumberOfPanels - 1).gameObject);
scrollSnap.Remove(index);
scrollSnap.pagination.transform.position += new Vector3(toggleWidth / 2f, 0, 0);
}
I don't receive any errors or warnings in the console. Just a blue screen once more than one GameObject is removed
EDIT:
Turns out my main Canvas's planeDistance was being changed from 100 to 3200. I still have no clue as to why this change occurred...but for anyone else having a similar issue with a dark blue screen appearing in the middle or start of their game, then please check the values your canvas and camera in the Inspector. Simply controlling the planeDistance did the trick for me!
Made a new scene next to the sample scene when i started my sprite learning game. Forgot all about that.
When I had to publish it, In the Build Settings, I had the wrong scene selected. So It published an empty scene instead of my game.
I solved it by putting game in 3d mode and realized that the camera is positioned very far from the sprites, just change the z-axis and again go to 2d mode.
Just Move your camera in Z-axis position, it could be too far from object or it is behind the object, you can also check it by 3D mode the check the object position and change it in positive and negative values.

three.js TextGeometry: text alignment gets messed up after re-setting the rotation

I have created a THREE. TubeGeometry and using the THREE.TextGeometry added the text to the tube created. The tube is then added to scene.
Also the I have set the text rotation to camera rotation. The code snippet is below
text.rotation = camera.rotation;
text.lookAt(camera.position);
My application has a button by which I can reset the original position of my tube geometry. Internally, this is done by reseting the camera to its originally position.
Initially, when the page loads up, the tube and text are properly aligned and face the user. But when I rotate the tube and reset it to original position, the tube is properly getting back to original position but text is randomly facing to any direction.
My basic requirement is the text should always face the user. I have followed the steps mentioned in another related query:
TextGeometry to always face user?
But even though I have coded in same way as suggested, I am facing the above mentioned issue. Please point what I am missing?
Note: I am using perspective camera.

three.js cube: wires show over textures on Safari and Firefox, not Chrome

I'm just a 3D newbie, and this is my first experiment with Three.js:
http://www.miguelrivero.net/mainWeb/images/portafolio/exp/BowieNextDay/heroesCoverCube.html
Any idea why the side textures show these wires?
Thanks!
You are probably using the canvas renderer. Although you seem to try to use WebGL, it falls back to Canvas. Try to update for more recent version first.
CanvasRenderer has this wireframe behaviour. To work around it, you can set material.overdraw to true. In r59 this parameter was changed from boolean to number.
WebGLRenderer should not have this problem, if you manage to get this to work.

Three.js shadow map stripes in each light (now simplified, and with jsfiddle!)

I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.

Resources