I am trying to create a cube using three.js for a project. I need to add text to vertices and at different points inside the cube. Any idea how this can be done?
For some basic code examples of using Sprite objects in Three.js, check out:
http://stemkoski.github.com/Three.js/Sprites.html
And for an easy way to create images that contain text to use as your sprite textures, check out the sample code at:
http://stemkoski.github.com/Three.js/Texture-From-Canvas.html
I think a combination of these two ideas will achieve what you are looking to do.
If you want to have label-style texts, so that the text begins at a specific point, but is always oriented with the camera and easily readable no matter the camera position, you can use sprites. (example of canvas-created text label sprites: http://i.imgur.com/e9I68xD.jpg - here they are rendered on a separate pass to that they are never obscured by the scene but you can do it on the same pass)
If that's what you are looking for, I'd suggest first checking the Sprites examples, and learn to attach some static image as a sprite to correct position in the scene. After you get that working, you modify the code so that you generate the text to an image canvas using standard Javascript Canvas functions, and using that image as the sprite.
Related
I'm trying to use a sprite sheet in my background animation. The sprite sheet is made up of multiple objects of varying sizes and shapes. I want the sizes/shapes to be used consecutively in a "floating" type backgound animation. I have no clue how to start the code. Can't seem to find anything like this on the Stack Overflow site. Ps. I'm not trying to animate one (1) object (such as a running man). Please HELP!!
I tried using JS code for animating bubbles and just replacing with my script.png. It didn't work. The example background that I'm trying to duplicate is found at https://lusion.co - If you page down until you reach about the third page, you will find a colored background with floating objects, along with a scattered light and fog. Lusion used a sprite sheet for the objects. I have a copy of the sprite sheet. They seem to hide their code, so I can't use their site for learning.
In three.js How can I render a cube with no fill but only the edges?
For example:
If you need to control the thickness of the lines you can use the LineGeometry class that's implemented in the THREE.js examples folder that creates triangle strips instead of GL.Lines to render.
See the following examples:
https://threejs.org/examples/?q=line#webgl_lines_fat
https://threejs.org/examples/?q=line#webgl_lines_fat_wireframe
Let me know if you need clarification and I can try to give a bit more detail.
Edit
I've taken your example comment and modified it a bit here: https://jsfiddle.net/L21ozkdq/2/.
Here are the big things to keep in mind (they are called out in comments, as well):
- Import the LineGeometry example files.
Create a LineGeometry object instead of BufferGeometry.
Create a LineMaterial instead of LineBasicMaterial.
Create a Line2 Object from the geometry and material.
Create a positions array instead of an attribute for the LineGeometry.
Create a box from a single line instead of many line segments in the position array.
I recently encountered a problem with UI. I opened a new 2D project and created a canvas with a GameObject with a Image component. I then added a sprite by right-clicking Assets > Create > Sprites > Circle. This added a circle sprite to my Assets folder.
The problem is when I choose the Source Image for the Image component as the circle, it still displays as a rectangle.
The circle sprite is imported as Sprite for Texture Type.
This problem also happens with the other shapes, such as triangle.
I am using Unity 5.6.0b9 Personal. Build target is PC, Mac, Linux Standalone.
I am probably missing something very simple. Any help is appreciated!
It doesn't work like that. Circle and all other type of Sprites under the Assets > Create > Sprites Menu are only made to work with SpriteRenderers. This would have worked if you used SpriteRenderer from GameObject--> 2D Object--> Sprite. They do not work with the UI.
For the UI, this has to be done with the Mask component. Just get any round image then use it to cut out circle from your target square image.
Create a UI Image called "TargetSquare" which is the image you want to round.
Duplicate it then name this "MaskCircle" and then resize it to make it smaller than the "TargetSquare" until that circle shape is what you want.
Make the "MaskCircle" object to be the parent of the "TargetSquare" object then use this round Sprite I made as it's source image.
Attach the Mask component to the "MaskCircle" object.
Done. Your "TargetSquare" object will have the shape of the "MaskCircle" object.
If you get jagged edges, select the sprite you used for the "MaskCircle" image and then make sure that Mipmap is disabled.
Maybe it is bug, in unity 5.6.1f1 same story.
Just try to download new version unity 5.6.2f. I dont know, that bug is fixed or not.
Or
Use some image editor, for example photoshop.
P.S. My fail, all ok, it works on SpriteRenderer component. Unity generates white square, and in this sprite properties setting Sprite Mode to Polygon and creates some shape using vertices.
I'd like to create some mechanism that provides a text overlay on top of my 3D scene at certain times (such as when clicking a mouse button for instance.)
I'm going over the tutorials on github and notice things like the THREE.TextGeometry class. Using it I can put 3D text in the scene, but it may be a bit more than I need-- what I'm really after is a way to put some text on, say, a black background, overlay it on the scene, then move it out of the way when done. Does anyone know of good ways to do this in three.js? (If the THREE.TextGeometry class is a good way to do this that's fine, I'm just not sure how to do the overlay bit.)
Use HTML. It's super easy and powerful especially if you just need an overlay. With CSS, you can also achieve things like semi-transparent background. If you want to have it "blend" to scene, i.e. have perspective etc. you can use THREE.CSS3DRenderer which will transform divs based on camera you supply.
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