I'd like to add a scale in my scene, then resize the scale on zoom.
I work with an orthographic camera and the trackball orthographic controller.
The scale lets the user know the dimensions of the image he is looking at - (see green scale on the left of the screenshots)
Before zoom:
After zoom:
Which would be the best approach with THREEJS?
- have a 'scale' object in the scene and resize it somehow?
- overlay a div on top of the renderer and also resize it somehow?
- overlay a new renderer?
Is there any example of such implementation somewhere already?
Best,
Related
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.
I am working on THREE.js orthographic camera, I am using 'OrbitalControls.js' for controls.
I want to zoom in the direction of mouse in 3D world. Hoping to get solution in JS. I know this one is not easy solution like perspective camera.(where we add in camera direction)
There is a .zoom parameter on the orthographic camera.
Try setting increasing/decreasing it.
This can be solved by figuring out the difference between your current zoom level and the next one, and then by panning in the direction of the mouse.
Your OrthographicCamera has a width and hight in world units camera.right - camera.left and camera.top - camera.bottom. Say you're at zoom level 1, and you zoom to 2, you divide these by two and get the new width and height in world units.
You need to figure out the difference in X Y and pan the camera in that direction.
I've created a scene with two cameras and one renderer. each camera is looking at the scene from a different angle and I have the first camera rendering on the entire screen then the second camera I have rendering in a small view port laying on top of the first render. I was wondering if there is a way to have that second view port outlined so that each look separate
Yes, you can outline an inset viewport by rendering a solid-colored rectangle slightly larger than the inset prior to rendering the inset.
// border
renderer.setScissorTest( true );
renderer.setScissor( x, y, width, height );
renderer.setClearColor( 0xffffff, 1 ); // border color
renderer.clearColor(); // clear color buffer
Then, render the inset. Just make sure the inset background is opaque.
three.js r.86
I guess you are using threejs viewport feature? As far as I know, by itself, it does not have such a feature.
But since it is rendered on to canvas... maybe you could draw an outline by yourself on canvas in desired coordinates, after each threejs render frame?
A basic example:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
(reference: https://www.w3schools.com/tags/canvas_rect.asp)
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 have a scene with a sphere in the middle and a camera spinning around it. Now I was wondering if it is possible with Three.JS to make a crop of this viewport so that the sphere for example would appear on the left or right.
I'm not looking to moving the camera or looking at a point besides the sphere, since that would distort the perspective, but a clip or crop of the rendering.
Is this possible?
One potential solution is to position a second canvas over your Three.js canvas, then re-draw the three.js scene onto your second canvas by blitting:
overlayCanvas.getContext('2d').drawImage(threeCanvas, 40, 40, 960, 960, 0, 0, 1200, 1200);
You can read more about the parameters to drawImage() in the documentation, but what this does is crop a certain area of the three.js canvas and stretch it over a larger area of your second canvas. It should be much faster than rendering the scene a second time, and it will display at the size you want it (albeit with some stretching).
You can alleviate the stretching by drawing the original (three.js) scene at a larger size than it would normally be displayed such that the area you want to crop into view is the same size as your secondary canvas.