i'm looking for a way to use a MeshPhysicalMaterial in Three.js but i'd like to use a texture as reflectivity parameter (like a reflectivityMap...). Is there a simple way to do that in js ?? The idea is to be able to manage the quantity of the reflection by a texture on a surface (cause the roughness seems to be only for the smoothness of the reflection but no the quantity...).
thks a lot !
Related
I'd like to have a dynamic GLSL shader texture to be used as a reference map (for displacement and other stuff) on multiple, different materials on different Meshes.
My approach would be to do the computation one time, using a THREE.WebGLRenderTarget, setup a ortho cam, a 1X1 plane with a THREE.ShaderMaterial, and access the WebGLRenderTarget.texture, that I'd embed in a "master" object, whenever and wherever I need.
Is there any "official" object I can / may use for this? I seen the postprocessing objects are pretty similar (EG ShaderPass) but I'm unsure if and how to use them.
Thank you.
I need to do vertex displacements using a texture map in Three.js.
Is there an existing material that supports that?
If not, what is the best way to duplicate an existing Three.js shader so that I can add in some vertex displacement calculations? I would like to keep existing functionalities such as shadows and wireframe on the material.
Vertex displacements using a texture map are supported by THREE.ShaderTerrain[ "terrain" ] and THREE.ShaderLib[ "normalmap" ].
Examples of their use can be found in http://threejs.org/examples/webgl_terrain_dynamic.html and http://threejs.org/examples/webgl_materials_normalmap.html.
If these do not suit your needs, then you will have to write your own shader. Doing so is not easy. It is best to modify an existing shader.
three.js r.61
I am building quite a complex 3D environment in Three.js (FPS-a-like). For this purpose I wanted to structure the loading of textures and materials in an object oriënted way. For example; materials.wood.brownplank is a reusable material with a certain texture and other properties. Below is a simplified visualisation of the process where models uses materials and materials uses textures.
loadTextures();
loadMaterials();
loadModels();
//start doing stuff in the scene
I want to use that material on differently sized objects. However, in Three.js you can't (AFAIK) set a certain texture scale. You will have to set the repeat to scale it appropiate to your object. But I don't want to do that for every plane of every object I use.
Here is how it looks now
As you can see, the textures are not uniform in size.
Is there an easy way achieve this? So cloning the texture and/or material every time and setting the repeat according to the geometry won't do :)
I hope someone can help me.
Conclusion:
There is no real easy way to do this. I ended up changing my loading methods, where things like materials.wood.brownplank are now for example getMaterial('wood', 'brownplank') In the function new objects are instantiated
You should be able to do this by modifying your geometry UV coordinates according to the "real" dimensions of each face.
In Three.js, UV coordinates are relative to the face and texture (as in, 0.0 = one edge, 1.0 = other edge), no matter what the actual size of texture or face is. But by modifying the UVs in geometry (multiply them by some factor based on face physical size), you can use the same material and texture in different sizes (and orientations) per face.
You just need to figure out the mapping between UVs, geometry scale and your desired working units (eg. mm or m). Sorry I don't have, or know a ready algorithm to do it, but that's the approach you probably need to take. Should be quite doable with a bit of experimentation and google-fu.
Coming from ActionScript + Papervision I am familiar with "AS3DMod" a library that modifies 3D meshes to bend, twist,etc. Now I am working with THREE.js and found this:"#MOD3 As3dMod 3D Modifier Library port for Javascript and Three.js, Pre3d and J3D and Copperlicht" but the code is outmoded for any remotely current versions of THREE.js (and also is written for canvas rendering, NOT webGL). The creator has not been able to update. Does anyone know of any similar 3D libs that can "bend ,twist, bloat" 3D meshes in webGL? I am not sufficiently skilled to update this myself.
Thanks for any suggestions.
Not that I know of, but depending on what modifiers you are utilize, it may not be too difficult to write a modifier yourself. Typically you can reuse the logic in js for Canvas renderer, and as for WebGLRenderer, you can implement it in the Vertex shaders.
I'm struggling with a visualization I'm working on that involves a stream of repeated images. I have it working with a single sprite with a ParticleSystem, but I can only apply a single material to the system. Since I want to choose between textures I tried creating a pool of Particle objects so that I could choose the materials individually, but I can't get an individual Particle to show up with the WebGL renderer.
This is my first foray into WebGL/Three.js, so I'm probably doing something bone-headed, but I thought it would be worth asking what the proper way to go about this is. I'm seeing three possibilities:
I'm using Particle wrong (initializing with a mapped material, adding to the scene, setting position) and I need to fix what I'm doing.
I need a ParticleSystem for each sprite I want to display.
What I'm doing doesn't fit into particles at all and I really should be using another object type.
All the examples I see using the canvas renderer use Particle directly, but I can't find an example using the WebGL renderer that doesn't use ParticleSystem. Any hints?
Ok, I am going from what I have read elsewhere on this github issues page. You should start by reading it. It seems that the Particle is simply for the Canvas Renderer, and it will become Sprite in a further edition of Three.JS. ParticleSystem, however is not going to fulfill your needs either it seems. I don't think these classes are going to help you accomplish this in WebGL in 3D. Depending on what you are doing you might be better off with the CanvasRenderer anyway. ParticleSystem will only allow you to apply a single material which will serve as the material for each particle in the system as you suggested.
Short answer:
You can render THREE.Particle using THREE.CanvasRenderer only.