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.
Related
I worked with a freelancer to create a few 3D models and I'm now trying to apply materials to them in Xcode, but some of the models are behaving weirdly. When I import the .dae file, instead of the default gray color models usually have, they are part green, part black, and part transparent. When I try to apply a material, the material only applies to the green parts, and any color seems to blend with the green.
The freelancer is at a loss because he says there shouldn't be anything different about the models that are working and the ones that aren't.
I've attached a screenshot of one of the broken models and one of the working ones, both with the same material applied.
Any help would be much appreciated!
I tried playing around with different material settings and searching for materials that were secretly applied to broken model, but to no avail.
I fixed this issue by removing a Colors item that was in Geometry Sources. I'm still not sure exactly what it is (I'm a SceneKit noob), but removing it did the trick.
This answer is just to illustrate the issue you might have with the texture coordinates. If you use one single color and not textures, you'll be good. But if you plan to add some texturing, you might want to unwrap your model in a different way. the following images should illustrate that.
This model shows texture coordinates that looks like a perspective projection and you loose a lot of space. It cannot be textured in a good manner. it should be unwrapped differently (illustration from Blender).
This model here is perfectly unwrapped with non overlapping textures and alomst every free space on the image texture is used for anything (illustration from Blender).
hope I could help in some manner.
I am using Autodesk Maya for creating models and animations of this character. This character appears and animates perfectly on all other platforms like Unity, 3dsMax, etc. but when I import .dae file in Xcode the face of the character appears green and not showing the perfect texture.
This model has perfect UV's on the face, other faces are used as blend shapes those shows perfect texture. UV's of the main face which appears green.
The face appears in Unity
What changes are required to change green color appearance of face to normal?
If any Maya material appears as green surface in SceneKit, you should delete a UV-mapped texture in Maya (check whether you're using Lambert, Blinn or Phong shader) and re-apply UV-mapped texture from scratch.
Green surface usually means a 3D object doesn't have a shading group assigned, or shader is somewhat corrupted, or error appears during import.
If you can't reassign a UV-mapped texture in Maya, try to assign this texture in SceneKit's Scenegraph. For that select a head and using Diffuse slot in Material Inspector choose a texture from a drop-down menu (the best image format in this case is .jpg on .png).
P.S.
I've found that your model was locked in Maya. Check ChannelBox and AttributeEditor.
I have been trying to make characters in blender and then export it to three.js. However, the materials for the character's eye seems to be broken as it renders a light blue color, instead of being the eye image. This results in very creepy characters.
I am using the normal Blender Renderer, and I created the character with MakeHuman. The export settings are as follows:
Scene: Scene and Materials
Geometry: BufferGeometry, Uint16Array, Vertices, Faces, Normals, UVs, Apply Modifiers
Texture: Textures, Export Textures, Embed Textures
When I import the object, I change "transparent" to false, but I have tried changing a lot of things, and no difference seems to come. All my other objects render completely fine when I do this though.
I have a .blend, .json, and png of the eye here
Some other strange things that I have noticed is that when testing my object on the threejs.org editor, the texture begins to appear slightly after zooming out away from it and even becomes the right texture after reloading the page.
Here is a picture of the "transparancy" area of my eye material.
I noticed that if I toggle it, I get the blue eye effect. I think that might be why I am getting the issue. How do I make the material appear while transparent is set to true?
I am rendering a sofa using r71 but the texture quality is not proper. If I render it through r58 then it looks really good. It is a bug or what?? Below are the images, first one is rendered via r58 and second one via r71.
Coming from r58 a lot of things has changed, for you especially how they calculate gamma and hardwireing the ambient term to the diffuse color.
The main difference I see is your model appears darker.
To make the model appear brighter you could set the materials color to white: material.color.setHex( 0xFFFFFF );.
If this is still not bright enough I discovered a little Hack by setting the HSL Lighting value to something > 1. material.color.setHSL( 0, 0, 6 );
Without providing the code on how you create your material its only a shot in the dark.
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