I am wondering if there is a way to combine two normal maps at runtime in javascript/threejs. My problem is. I have a lot of cube like models, each of them is made from:
the box like mesh
a front face that hide the inside of the box
All box-like meshes use MeshStandartMaterial and they all have normal maps applied to them.
Plane-like meshes (fronts) all have displacement and normal maps applied to them. I use normal map (with front) to make displacement look more defined.
The problem is I need to apply to front the "material" normal map as well, so I am looking for the way to combine it with displacement normal map.
Is it possible to combine them using canvas 2d context?
Related
I'm loading a fbx model with multiple objects inside made with Cinema4D.
When the model is loaded I get this warning console message.
THREE.FBXLoader: layered textures are not supported in three.js. Discarding all but first layer.
I understand that this message is about the normal layers, bump maps or other, but in the fbx file are loaded with it's own url. Anyone know if there is any way to load this properly? Or export it differently from C4D?
Thanks
By default, Three.js only draws one texture type per mesh. For instance, you can only assign one texture to material.map, you can't layer them one on top of the other. It sounds like your Cinema4D objects have two or more textures layered one on top of the other.
In order to layer multiple textures one on top of the other, you'll need to create one mesh per texture. Maybe give them a very slight offset in position to layer them in the correct order. Alternatively, you could flatten your layered textures into a single image.
how about using several meshes with slightly different scale-ings and different textures ? Like matroschka puppets.
So if the textures are transparent you can see the underlying ones, too.
I'm using Deck.gl for a 2d visualization (not a map) that utilizes multiple layers:
[SolidPolygonLayer, ScatterplotLayer, LineLayer]
I would like to apply a shadowblur effect to only the LineLayer. Is that possible?
So far, I've looked at the PostProcessEffect module, but I think it effects all visible layers.
while working on three js. I have a 3d model which has several small parts which are joint together to form a one three d loader (model). now I am using raycaster and intersects for finding out the clicked element. so its basically a door which has small screws, handles, hinges, bolts, rails, rotation points, pivots etc.
My problem is that while using raycaster and three js the element is not getting identified until or unless I zoom. when I zoom into a good extent I am able to identify clicked element. can anyone help me with that where I do get rid of zoom in.
You might be best to create an additional mesh attached/added to the small elements (like screws) - the additional mesh could be defined by a large sphere geometry shape that surrounds the screw. This larger sphere geometry would be invisible (ie its material visibility is false), and would function to intercept raycasting of the small elements like screws that are difficult to intercept on their own.
I'm writing a web-site to show different isochrone over city-map:
http://130.192.68.210:8080/citychrone/citychrone.html
I have several MultiPolygon GeoJSON layer in my Leafletjs library based project. I would like that when a layer overlap another only one of this can be visible in the overlapping region. Each of this layer has an opacity less than 1, so is not enough to set the ordering of the layer on the map. I'm wondering if it is possible to give a priority to layer, so when they overlap just one of them is visible.
Another possibility is to make one layer an "hole" of another layer, it is possible?
Turfjs is great for doing geometric operations like this in Javascript.
In your case, you can create holes in a polygon by "erasing" parts of it, using turf-erase: http://turfjs.org/static/docs/module-turf_erase.html. The example on that page shows something similar to what you want to do.
Google Maps utility library comes with a full map canvas overlay[1] which is pretty useful to create canvas based visualizations or custom layers (instead of the tiled based ones)
The problem is that CanvasLayer is based on an OverlayView and it has to be on top of all the map layers. My questions are:
Is there a way to place an overlay in between two layers (i.e tiled layers) ?
Is there a better way to implement a full map canvas layer which can be managed in the same way other layers are? (using overlayMapTypes).
For sure there are nasty hacks that can be done changing the DOM to sort layers and overlays but I'd prefer to do in a way it won't break when the internal implementation was changed.
[1] https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/canvaslayer/src/CanvasLayer.js
I'm not sure what you mean by "map-layers" , but when you mean the mapPanes :
A CanvasLayer is not placed on top of all mapPanes, by default it's placed in the overlayLayer-pane(which is the 2nd lowest pane of the 7 mapPanes).
But it must not be placed there, you may place it where you want to by using the paneName-option of the canvasLayerOptions(set it to any valid mapPanes-name)