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?
Related
I am new to three.js and I created a classic sphere, wrapped with a world color map & bump map and an alpha map for clouds, and directional sunlight. How can I now add an earth at night texture only on the shadow side of the globe? The globe is rotating, so I couldn't just create 2 half-spheres.
I tried adding this grayscale mask to the texture, but it is also visible in daytime. I then tried illuminating the map with a different light aimed at the dark side, but couldn't selectively target only one material. I didn't quite understand if I need to use "emissiveMap".
Could I shine a light through a semi-transparent map/mask from the center of the earth to make the cities visible, or is there some type of "black light" to only make selected color/map areas shine in the dark?
I don't need any glowing effects, I just want it to be visible. Will I have to create individual light points or learn to use fragment shaders?
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 a pretty strange behaviour with three.js when I try to load different textures for an environment cube map. Everything works fine till I try to test the same scene with larger textures. My camera is pretty much stable so I only have to change one side of the env cube to a large resolution texture as that will be the background of the scene which will be visible, the other 5 sides are small pngs - those are only visible in reflection.
There is no clear breaking point, what seems to usually work as an image for the env.cube is about 600x600px-ish, going any higher resulting in the scene loading completely black.
To make the scene look nice on most devices, I have to go up to a resolution around 1500x1500px (so not insanely large) for the background, and I have no idea why it breaks with a bigger image.
What I already tried/did:
image paths are fine, overwriting a working image to a larger version also breaks the scene.
I had no other idea what to try, maybe it has to do something with photoshop and its image encoding or something along those lines?
the scene contains:
a camera, a gltf model to test with and the environment cube. everything works perfect with small textures.
I already looked at the texture documentation of threejs and found nothing about what could cause this behaviour, I'm completely stuck.
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'm trying to create a shadow in my orthographic scene in three.js. I'd like to have a directional light so the shadow is offset from all objects equally in the scene. I am however having problems using DirectionalLight.
My first problem is that I can't get the shado to cover the entire scene, only part of it ever has a shadow. I played with the light's frustum settings, but can't figure out how to get it to cover the scene. Ideally I'd want the frustrum to match that of the camera.
The second problem is that the shadows aren't "clean". If I use a SpotLight the shadows have nice crisp borders (but obviously not the universal directionality I want). When I use a DirectionalLight the borders are misshappen and blurry.
In the samples the tile is a simply box created with CubeGeometry.
How can I create an ortographic directional light source for my scene?