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

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.

Related

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.

Group of objects on top but added to a camera

As a precision I already noticed threads about this but didn't find a way to achieve exactly what I need.
Basicaly I have a board of objects that I need remaining always on top of everything but also attached to the camera.
I first tried to add the group to the camera and it stayed as wished always in the viewport. But in this configuration the group of objects still be a part of the scene so while zooming to regular objects in the "editor" the board goes into/among these objects of the scene.
My second trial was based on this thread and work wonderfully in order to get all of the board objects rendered above everything. But on such a configuration when rotating around the axis (with orbit control) both scenes rotates. So I tried to update the foreground scene with coordinates of the camera but the update was not immediate and this scene is flickering (I suppose that while rotating the update function is not called immediately).
My best wish would have been to "attach" the foreground scene to the camera so that it would stay on top and sticked on the screen/viewport but I don't even know if it is possible and how to do that (as only groups of objects seem to be capable to be attached to the camera).
I am really stuck on that point. Thanks you for any help!
If this is what you need,
just set object.material.depthTest = false; and object.renderOrder = 1000; for all objects you need to be always on top and attached to the camera.

Three.js Spotlight casting shadow without an object

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.

Getting a text included in a Mesh

i need some help in my webGL code.
I created a TextGeometry and i included it in a mesh, i didn't have any problem about that. However, i would like updating this text without creating another TextGeometry.
Indeed, my main goal is to translate a text (from right to left) and to make it disappear when he reaches to the left side, but only character by character (like a fade effect).
I tried some attempts : for example, according to text position, deleting it with a :
scene.remove(text)
and creating another text which is the same as previously minus the first character. I don't know if i was clear... But this solution makes my application very slow : that's why i don't want creating an Object every time, but just updating his text property.
I didn't find many help in three.js documentation, may you give me a hand about that ?
Cheers
You could try this:
Create a PlaneGeometry and texture it using the image from a hidden canvas object that contains your text, then apply image transforms to the canvas itself (fading as necessary) and continually update the texture in Three.js as it moves across the scene.
For an example of how to use a canvas object as an image (of text), I have an example posted at: http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

TextGeometry to always face user?

I've added some text to my scene with THREE.TextGeometry, and the text seems to be stuck in whichever xy plane I place it. Any way to have it adjust to always be in plane with the screen- readable for the user?
Try
mesh.lookAt( camera.position );
The local z-axis of the mesh should then point toward the camera.
To make the text always face the screen (rather than the camera):
mesh.quaternion.copy(camera.quaternion);
Note that this differs from object.lookAt(camera); since this will result in different orientation depending on where on the screen the object is located.
Object3D.onBeforeRender can be used to update the orientation on each frame. It might be useful to disable frustum culling using Object3D.frustumCulled = false; to ensure that the callback always is triggered.

Resources