CODEWITHSUNDEEP
three.js
Madhu
Madhu

Reputation: 1019

Three.js MeshNormalMaterial default color

I'm working this three.js example - http://www.html5canvastutorials.com/three/html5-canvas-webgl-rotating-cube/

Here, the color of the cube changes every frame. However, nowhere in the example code, has the color been specified. Also, I tried specifying the color for the MeshNormalMaterial, but it doesn't have any effect. So, how is the color being manipulated?

Thanks!

Upvotes: 2

Views: 2112

Answers (1)

WestLangley
WestLangley

Reputation: 104763

MeshNormalMaterial uses THREE.ShaderLib[ 'normal' ] for the material's shader.

You can find the source in WebGLShaders.js.

The color is set in the fragment shader like so:

gl_FragColor = vec4( 0.5 * normalize( vNormal ) + 0.5, opacity );

You can see the that the color of the fragment is a function of the normal vector.

three.js r.62

Upvotes: 4

Related Questions