I have created a sphere with MeshPhongMaterial and add yellow color with emissive, specular and shininess options, but I cannot get a realistic gold look. I want help to make the object look like gold, metallic and shiny, by adding any texture or changing/adding any other options. Thanks
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 have a scene set up in threejs with some very basic shapes, and I want to "shift" all colours in the scene to have purple hue to them (almost as if there was a purple opaque screen overlaying on top). I understand that a way to adjust colour/hue settings in a scene all at once is to use post-processing effects, but running through those listed effects I can't work out if any can help me here
Is this effect possible to achieve? Any guidance or link to appropriate resources would be appreciated here!
Try it with an instance of THREE.ShaderPass and a ColorCorrectionShader.
You can find such a setup in the official example: webgl_materials_normalmap
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.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
There is a TextGeometry mesh
Some BoxGeometry mesh as a background
How to make this glow between them?
I tried to put many PointLight between text and box, but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
The typical way of doing this is via post-processing. three.js offers a so called "Bloom" pass which is demonstrated in the following example: webgl_postprocessing_unreal_bloom. I suggest you start with this setup.
but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
It's no good approach in general to add that number of light sources to a three.js scene. If you place some small sphere meshes (based on THREE.SphereGeometry) with a bright material color onto the text, you should get a good result with bloom pass.
Does anyone have any ideas how to fix the below issue?
The red is just a plane (representing water) with a shader material. I have written a custom shader for the water material, but its very simple (I get it to display red). As you can see from the image below the two particle systems seem to mess up the draw order.
Weirdly - if I use a standard THREE material for the water, like phong or lambert, then the issue doesn't happen. Is there some define / property that I need to change on the shader material to prevent this from happening?
Many
Thanks