I have set of equirectangular panorama pictures, I'm displaying them using Three.js sphere geometry similar to this example: http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html
I added buttons to the scene to allow navigation between panoramas. I would like to have transition while traveling between panoramas. It should be similar to Google Street View transitions as much as possible.
Can someone share some ideas/directions how to implement this using three.js?
Related
Is it possible to know what area of the material is rendered on the display? I think Three.js already doing this right?
I trying to make Zoom level. When someone zooming it will become a good resolution.
I making CUBE using 6 planes and I’m trying to know the coordinate of the material and which areas are rendered on display.
The below example shows on the display only some areas of TOP, some areas of RIGHT and FRONT.
If I know which coordinate of material is rendered on the display, I’ll draw a good resolution of the image on the canvas.
Thank you,
I want to render a cube similar to .
My problem is how to render the face projections.
I tried using Reflector, but it is tricky to size and position so it captures just the face that I want, and also shows the sides.
I also saw I can use a separate canvas to render (I imagine using an orthographic camera), but I wish for everything to be in the same canvas. I saw an example with multiple views, but it seems that they can't be positioned behind.
So, is there a way to achieve this?
One possible approach to solve the issue:
Setup an orthographic camera such that its frustum encloses the cube. You can then position the camera in front of each side of the cube, use lookAt( cube.position ) to orient it properly and then render the scene into a render target. You need one render target per side. You can then use it as a texture for the respective plane mesh.
There is an official live example that demonstrates how RTT (render-to-texture) is done with three.js. Try to use it as a code template for your own app.
https://threejs.org/examples/#webgl_rtt
I am trying to figure out the concept on how this site (http://igoodi.eu/) do its transition between different objects. Like when you are in the homepage and try to scroll down, the scene rotates vertically (maybe 90degrees). I want to know on how to do this or maybe the concept behind this.
The thing is I want to implement a three faces/pages (Triangular Prism) in a website. And the transition will be like it would rotate horizontally and it will display the other face of the triangle.
I want to view some rasters in my three.js scene.
I thought to use cesium for that, but it was too slow when I loaded more than 1000 moving objects to the scene.
So I decided to go back to three.js with some simple cylindrical projection.
Is there an easy way to do build something like "WmsMaterial" ?
The material has to take the textures from some wms or tile server like:
http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/4/5/9
And change the level of the tile according to the zoom level.
Any ideas how to do this in the simply ?
On the zoom changing, you can request the tile with a REST request and load it as texture then create a material with the texture. Manage a cache to not request a tile already downloaded
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?