I use threeJS to draw a 2d scene.
But when I add a lot of texts into the scene by creating canvas and using texture, browser is get it crashes!
So how can I add a lot of text into the scene?
Related
I'm working with an orthographic view in three.js/WebGL renderer, and I want a magnifying glass that tracks with the user mouse. I'm looking for the best way of doing this that's efficient.
When working with html5 canvas raw commands, this was easy: I simply defined a circular clip region, zoomed my coordinates, and re-drew the whole scene. With 3d objects, it's less obvious how do to it.
The method I've found so far is to do the following:
Define a second camera that looks into the zoomed region. Set the orthographic clip coordinates to be small so that it doesn't need to do much work
Create a THREE.WebGLRenderTarget
Tell the renderer and all my line textures that the resolution is about to change
Render the scene into the RenderTarget
Add a CircleGeometry as a MeshObject at the spot at the mouse position (in world coordinate but above the rest of the scene, close to the camera). Call this the lens.
Give the lens the WebGLRenderTarget as a texture.
Go back to my default camera, reset all my resolution parameters, and redraw the scene with the 'lens' object added.
This works (see image below) but I'm worried about parts of it:
I have to render twice per frame
Lines don't draw well, because the resolution problems. I have to keep track of all materials that need to know screen resolution and update all of them twice per screen render.
Related problems:
I want to overlay some plot axes on top of this, and possibly gridlines. These would change as the view pans. I'm not sure if I should make these 3d objects, or do it in a 2d canvas context I lay overtop.
I want to overlay some plot lines, and have them show up sensibly in the zoomed view. "Sensible" here is hard to figure out: I don't want them too fat in the zoomed view, but I also don't want to scale them up as much as the image detail (which is being rendered as a texture onto Plane objects behind).
This is a long post, but I'm still new to three.js and looking for good ideas.
I used sprites in Three js to display 2d images, the problem that I faced with sprites that they rotate to face the camera.
I am trying to use it to fake a shadow for the 3d object. When I rotate the camera the 3d object tilt with the camera until it makes a 30-degree angle with the horizontal but it's shadow (2d sprite) still at 0 degrees.
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
It's not possible to disable the orientation towards the camera with a flag or configuration. You would have to modify the shader code of SpriteMaterial for this.
I suggest you use a mesh instead based on a PlaneBufferGeometry and a MeshBasicMaterial. Alternatively, you write a custom billboard shader with ShaderMaterial or RawShaderMaterial.
This is a really simple question, but how do I place an object at the bottom of the canvas using Threejs? I could just manually set its position, but would this work across all screen sizes?
I'm using sprites for an animated menu in my game.
I tried two methods:
Image Renderer: Replacing the image per frame with the sprite slice in the animation window
Sprite Renderer: Same method
I'm playing the sprite animation with no loop then rotating the transform on the z-axis.
The problem is that with the image the Screen Space overlay works well but the rotation of the transform causes the sprite to look glitchy and rough. With the sprite renderer however the Screen Space must be put to Camera and the sprites get placed between other assets in the world.
Example: http://postimg.org/image/436q9jvax/
Is there a way to either fix the roughness on the rotation using image or force the Camera Screen Space on top? My only concern with the 2nd option would be in relation to responsiveness for multiple devices.
The easiest fix was to apply "sorting layers" to the canvas with the sprite renderers on to keep it on top.
I did however incorporate #beuzel's idea about separate cameras in the end and opted for 2D sprites with physics instead of a 3D rendered animation on canvas.
http://postimg.org/image/6qmtiirb9/
Thanks for making the good sample. A fix for the menu intersecting the world is using a seperate camera for the GUI layer. The rough animation might be a pixel perfect setting in the sprite rendering (just guessing).
I don't have enough reputation points to write this as a comment.
I am visualizing a graph using Three.js and for each node of the graph I add a label using TextGeometry. It is a pretty small graph but when I add text my application gets really slow. What should I do about it?
TextGeometry is more suitable for cases when you are really interested in rendering the text in 3D. It will create complex geometry that will surely slow your app down specially when there is a lot of text or you use CanvasRenderer.
For labels, it is generally better to use 2D labels, which are way faster to render. There are many different approaches to this. These can go on top of the Three.js rendering canvas, on a separate canvas, or even normal HTML nodes positioned using CSS properties. Alternatively, you can dynamically create small canvases of your label texts, and use them as sprite textures always facing camera - this might be the easiest way as the labels would be part of the 3D scene as your other objects. For a separate layer approach, you need to use unprojectVector or such to figure out screen XY coordinates to match your 3D scene positions.
See these SO posts for example:
- Dynamically create 2D text in three.js
- Canvas and SpriteMaterial
- How do I add a tag/label to appear on top of several objects so that the tag always faces the camera when the user clicks the object?