In BufferGeometry, we can use material setting {vertexColors: THREE.FaceColors} to set different colors for faces. But there is no way to set transparency.
How do you set transparency for different faces in BufferGeometry?
This is something that has been solved in the dev branch.
Take a look at this example:
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_buffergeometry_rawshader.html
Related
Distortion, color replacement on glb (gltf) models. Blue changes to green, and yellow changes to orange.
v106 three.js
v97 GLTFLoader.js
You're using an environment map in your preview in blender. That env map has a dominant color that will affect the coloring of your model. To compare these references, you want to make sure you're using the same envmap in both blender and webgl. If you are only using lights in your threejs scene, you'll want to make sure they are colored to match.
Another thing that can affect the coloring is the gamma output settings in your THREE.Renderer, and textures.
You can go through a lot of heroics to get the outputs of both renderers to match. Read this: https://discourse.threejs.org/t/whats-this-about-gammafactor/4264
If you just want a quicker fix.. tweak your lighting/envmaps, or tweak the colors/intensity of the lights you have set up in your threejs scene.
If this behavior is something that has changed between versions of THREE.. it may be something to file a bug report on.
There are now gamma related settings on both the threejs renderer and textures.
If this isn't enough info, let me know and I may know someone else who can help set you straight :) Hi Don!
Old question but for the record what caused it for me was the vertex colors under Object Data Properties:
Deleting the Col fixed the texture colors.
I would like to upload a mesh with color coded scientific data in three.js. It should result in a nice shape with a realistic shadow, but the object's color itself should not depend on the position relativ to the light (in particular the side facing the light source and its opposite) in order for the color to remain in accordance with the data scale.
Is there an object property that I can set to fulfill this requirement?
If not is there a different workaround?
The simplest way is to use MeshBasicMaterial() http://threejs.org/docs/#Reference/Materials/MeshBasicMaterial which is not affected by the light.
I needed to refactor my custom mesh creation a bit
from:
create mesh of unified sizes (SIZE,SIZE,SIZE), than scale them as needed (setting scale for each axis)
to:
create mesh with correct size, do not scale later
meshes are custom generated (vertices, faces, normals, uvs), nothing of this process was altered, worked like a charm before
=> resulting meshes are the same size, position, etc.
The whole scene setup stays the same: lights, shadowing, materials, yet when using the second approach the whole lighting is very very bright and super reflective, is that a known issue?
material used is MeshPhongMaterial with map, bumMap, specMap, envMap
using three.js r68, no error/warning in console
before:
https://cloud.githubusercontent.com/assets/3647854/3876053/76b8f260-2158-11e4-9e96-c8de55eaec9a.png
after:
https://cloud.githubusercontent.com/assets/3647854/3876052/76b7fa86-2158-11e4-9393-8f3eece04c0b.png
Did you rescale the normals in the mesh?
The mesh format probably needs normalized normals, in which case, the new normals are now incorrect, but would've been correct, if you hadn't rescaled.
Alternately, you say the lights haven't been changed, maybe they need to be appropriately redirected in the scene. (Assuming you're applying different scaling factors in each axis.)
Is there a way to set the color of an entire THREE.Geometry object using three.js? There are a few naive ways I could do this, but none of the methods seem ideal.
I could clone a material and set a different color for each geometry. Essentially, each geometry would have a one-to-one relationship with a material. However, this would create many heavyweight material objects and possibly unnecessary extra shaders on the GPU.
I could also use a single white material and color all the faces of the geometry instead. However, there would create much repetition of the same color objects, since each geometry will only have one color but many faces.
Is there a "proper" way of doing this with three.js?
However, this would create many heavyweight material objects and possibly unnecessary extra shaders on the GPU.
It should not. Shaders will be reused if they're the same. So creating as many materials as geometries should be ok.
I loaded a mesh in three.js and loaded a grey texture with already baked in illuminations into a THREE.MeshBasicMaterial. Then I loaded a black and white Environment map with THREE.ImageUtils.loadTextureCube, set reflectivity to 0.4 and mix it with THREE.MixOperation.
The problem is now, that the black parts of the environment map make the mesh darker, which is not what i want. I want only the reflection of the white parts, like in an additive blending or like a specular (but still from the environment map).
I can fake that by changing the black to a grey, but then the model becomes rather flat.
I tried to do it with some render passes like in this tutorial (http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html ), but then I get some anti aliasing gaps in some small geometry lines which i also have.
Any suggestions?
That's currently not supported...
Do you mind posting it here as a feature request?
https://github.com/mrdoob/three.js/issues