I'm looking at Mapbox's Terra example: https://www.mapbox.com/labs/terra/#15.0805/-25.3506/131.0368/-6.0332/0.0001
and wondering if it would be possible to drape another tile layer over the plane mesh?
This is easy to do with Mapbox GL JS:
https://www.mapbox.com/mapbox-gl-js/example/vector-source/
but how would I do it in three.js?
Related
My Three.js app has a static perspective camera looking on (0,0,0). How can I find the x/y coordinates in the y=0 plane of the corners of the camera's viewfield? The app covers the entire web browser, so this would correspond to the corners of the web browser. I want to render 3D models between those corners.
I want to render 3D models between those corners.
Just having the mentioned corner points is not sufficient to determine whether the user can see an object or not. The camera also has a near/far plane and also a perspective which you should take into account.
I suggest you use a different workflow and create an instance of THREE.Frustum based on the camera's projection screen matrix. The code looks like so:
const frustum = new THREE.Frustum();
const projScreenMatrix = new THREE.Matrix4();
projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
frustum.setFromProjectionMatrix( _projScreenMatrix );
You can then use methods like Frustum.intersectsObject() or Frustum.intersectsSprite() to determine whether 3D objects are in the view frustum or not.
This is actually the way WebGLRenderer performs view frustum culling.
I want to add about 20.000 plane geometries on mapbox map. Docs have example with only one object(even camera configured for one object).
My purpose - isometric buildings on map.
example
Threebox have very low performance and I have no idea about optimisation threebox objects
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 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 would like to play around with testing a 3D map, of sorts. At it's simplest, one flat pane, with map lines etc. drawn onto it, flat (as if I was drawing onto an HTML canvas). But I want that pane to be movable in 3D space.
I know that I can make a flat pane in three.js very simply, but is it possible to implement some sort of 'custom texture' that would allow me to programmatically draw onto this pane?
It is called render-to-texture in webGL.
Three.js provides WebGLRenderTarget which can be used as image source for further textures. You render your scene to WebGLRenderTarget instead of main WebGL screen. Then you use this WebGLRenderTarget as image source for the texture.
A lot of 2D post-processing works like this. They render the world to 2D texture, then use fragment shaders to apply per-pixel postprocessing code, like blurring.
For examples, see e.g. http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html
It renders the scene for 2D postprocessing, but the theory is the same.
Here is the WebGLRenderTarget setup code:
https://github.com/mrdoob/three.js/blob/master/examples/js/postprocessing/EffectComposer.js#L14