I need to build a material similar to the material of the figure in the picture.
Since i have no idea from where to start - i’ve looked over the Materials Library
and tried to get a better understanding of how to approach should be… unfortunately i didn’t found anything useful… any suggestion will be appreciated .
Thanks.
I’ afraid your question is not clear. You can’t render the model with a single material. At least for the orange bloom effect you need a post-processing pass, see
2 Likes
Well - that’s kind of what i needed - just a direction…thanks!
I founded the exact material i needed Here - i wonder if there is a way to achieve the same result only with white background…
something like this -
Thanks a millions!!!
You’re welcome 
1 Like
Hey - can i add maps to this material ?
I’ve tried to do so like here - but it doesn’t seems to work -thanks!
var customMaterial = new THREE.ShaderMaterial({
uniforms:
{
"s": { type: "f", value: -1.5},
"b": { type: "f", value: 1.8},
"p": { type: "f", value: 1.2 },
glowColor: { type: "c", value: new THREE.Color(0x008aff) }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.FrontSide,
map : textureLoader.load("/model/maps/colormap_v1_0.jpg"),
normalMap : textureLoader.load("/model/maps/normalmap_v1_0.jpg"),
roughnessMap: textureLoader.load("/model/maps/roughnessmap_v1_0.jpg"),
//blending: THREE.AdditiveBlending,
//transparent: true
})
// customMaterial.map = textureLoader.load("/model/maps/colormap_v1_0.jpg");
// customMaterial.normalMap = textureLoader.load("/model/maps/normalmap_v1_0.jpg");
// customMaterial.roughnessMap= textureLoader.load("/model/maps/roughnessmap_v1_0.jpg");ShaderMaterial knows nothing about maps.
And how the result should look like with those maps?
Well - as you can see in the left picture - that’s what i managed to do with your help - but the result should be something similar to the image below (the one from istock)- the right image uses maps (reflection, opacity, normal ) so as you can see in the marked area - the missing map causes the parts of the figure to look bad - maybe their is a way to create a glow effect - but with standard material?
The problem
Reference
So, I would recomment to use .onBeforeCompile with MeshStandardMaterial. Thus, you’ll add the fuctionality you need, keeping the rest functionality of the material.
Thanks - i think i understand how to approach the solution - i’ve created a clone of the current material - with the maps and all - and assign to it the .onBeforeCompile callback - but i guess i’ve done something wrong with the syntax - thanks!
gltf.scene.traverse(function (node) {
if (node.isMesh) {
node.castShadow = true;
var material = node.material.clone();
material.onBeforeCompile = function (shader) {
shader.uniforms = // Here is where the problem i guess ...
{
"s": { type: "f", value: -1.3},
"b": { type: "f", value: 1.0},
"p": { type: "f", value: 1.2 },
glowColor: { type: "c", value: new THREE.Color(0x00ffff) }
};
shader.vertexShader = document.getElementById( 'vertexShader' ).textContent;
shader.fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
shader.side = THREE.FrontSide;
// blending: THREE.AdditiveBlending,
//transparent: false,
// side:THREE.BackSide
}
node.material = material
}
});
camera.position.z = 400;
camera.position.y = 100;
camera.position.x = 0;
scene.add(mesh);
mesh.scale.set(100, 100, 100);
controls.target.set(0, 100, 0);
controls.update();
});
Have a look at this SO answer, where I used .onBeforeCompile with MeshStandardMaterial
Thanks - i’ve looked over your example and changed it according to what i think will work - but no luck for now… if i could only see the map with the shader material - it might works…
Here is what i’ve tried
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 10, 20);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 1));
let g = new THREE.TorusKnotBufferGeometry(5, 1, 128, 16);
g.rotateX(-Math.PI * 0.5);
g.computeBoundingBox();
let uniforms = {
s: { type: "f", value: -1.3 },
b: { type: "f", value: 1.0 },
p: { type: "f", value: 1.2 },
glowColor: { type: "c", value: new THREE.Color(0x00ffff) },
};
console.log(g);
let m = new THREE.MeshStandardMaterial({
roughness: 0.25,
metalness: 0.75,
opacity: 0.3,
map: new THREE.TextureLoader().load(
"https://threejs.org/examples/textures/floors/FloorsCheckerboard_S_Diffuse.jpg",
(tex) => {
tex.wrapS = THREE.RepeatWrapping;
tex.wrapT = THREE.RepeatWrapping;
tex.repeat.set(16, 1);
}
),
onBeforeCompile: (shader) => {
shader.uniforms.s = uniforms.s;
shader.uniforms.b = uniforms.b;
shader.uniforms.p = uniforms.p;
shader.uniforms.glowColor = uniforms.glowColor;
shader.vertexShader = document.getElementById("vertexShader").textContent;
shader.fragmentShader = document.getElementById(
"fragmentShader"
).textContent;
shader.side = THREE.FrontSide;
shader.transparent = true;
console.log(shader.vertexShader);
console.log(shader.fragmentShader);
},
});
let o = new THREE.Mesh(g, m);
scene.add(o);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});