Three js ShaderMaterial Gradient

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2021 Jun 7 2:16
Editor
Edited
Edited
2021 Jun 7 4:37
Refs
Refs
addSkyGradient(scene) { // LIGHTS const hemiLight = new HemisphereLight(0xffffff, 0xffffff, 0.6) hemiLight.color.setHSL(0.6, 1, 0.6) hemiLight.groundColor.setHSL(0.095, 1, 0.75) hemiLight.position.set(0, 50, 0) scene.add(hemiLight) // SKYDOME const vertexShader = `varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }` const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 ); }` const uniforms = { topColor: { value: new Color(0x0077ff) }, bottomColor: { value: new Color(0xffffff) }, offset: { value: 33 }, exponent: { value: 0.6 } } uniforms['topColor'].value.copy(hemiLight.color) scene.fog.color.copy(uniforms['bottomColor'].value) const skyGeo = new SphereGeometry(4000, 32, 15) const skyMat = new ShaderMaterial({ uniforms, vertexShader, fragmentShader, side: BackSide }) const sky = new Mesh(skyGeo, skyMat) scene.add(sky) }
 
 
 
 
Apply color gradient to material on mesh - three.js
I have an STL file loaded into my scene with a single colour applied to a phong material I'd like a way of applying two colours to this mesh's material with a gradient effect applied on the Z axis a
Apply color gradient to material on mesh - three.js
mrdoob/three.js
JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.
mrdoob/three.js
 
 
 

Recommendations