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
Related
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'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 have a scene with some 3d Objects when you drag the scene objects look stretched. See the image
I know that this is the normal behavior But I have a client with this weird requirement, that the objects should move but without the distortion on the shape.
Is there way to do that?
That’s due to the camets fov. You can change it through the camera component
Has anyone got any ideas on how to load real terrain data into a three.js scene.
I would like to have a 3D model on a the actual terrain , i.e the elevations and overlayed satellite imagery .
Create scene : ok
Load and animate models : ok
Terrain and satellite imagery : ???
Thanks in advance.
Jon
Three.js has an example on how to make a terrain, so that one's covered.
Regarding the satellite imagery, you'll use that as a texture on your terrain. The only thing that is important is to get the texture coordinates right, so that may end up being tricky.
This blog post gives a good example and its code is available online, too.
If you some how have, or able to calculate, the elevation data of the points needed in grid mode.
You can use plane geometry and javascript xml Loader to load your data to the planes' geometry vertices.
Use any type of material for the plane you need and define the "map" attribute to add the image texture loaded with ImageLoader
If you have random placed elevation data you can use face3 or other type of three.js geometry and an algorithm to create a TIN (triangulated irregular network) to visualize the terrain.
Also you might want to take a look at cesium library and cesium.js documentation as about the geospatial part of the question, about the terrain loading using this three.js method and this osg.js demo.
I am trying to make a 3d car race in iphone using OPENGL ES 1.x.
I do not know how to draw the background sky in my scene. I tried using only planes for background but where should i placed that plane? I mean if i placed that plane outside the whole track then the frustum is not so big to show that planes in the scene.
Any suggestions will be of great help.
You can make a small skysphere or box, as suggested by Davido and turbovonce's link, which is centered around the viwer and fits into the frustum. You draw this first, without writing into the depth buffer. Then you draw the other stuff and as the skybox has not written to depth buffer it is just overwritten, except the parts where no scene objects are rendered, which are exactly the parts of the image where the sky should be visible.
You want a sky dome. Take a look at this website, it contains tons of references that should help you.
http://www.vterrain.org/Atmosphere/
Create a sphere in a 3d modeling app such as Maya or Blender and map a sky texture to the sphere. Export the model then load the model and its texture into the app, place in the scene. You should now have a background sky rendering in your game.