According to the insights provided by @Mugen87, the most effective method to achieve this is through the utilization of custom shaders.
Although it may seem complex at first, there are myriad resources available to delve into this subject extensively. The Book of Shaders is a great starting point.
By computing the dot product between a surface's normal and the inverse view direction, valuable information about the degree to which a specific surface is facing towards the camera can be obtained.
Utilizing this data, we can blend two colors and utilize that as the definitive color displayed on the screen.
<html>
<head>
<title> view-based color </title>
<style>
body { margin: 0; position: fixed;}
canvas { width: 100%; height: 100%; display: block;}
</style>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
var shader_vert = `
varying vec3 vNormal;
void main() {
vNormal = normalize( modelMatrix * vec4( normal, 1.0 ) ).xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;
var shader_frag = `
uniform vec3 viewDirection;
varying vec3 vNormal;
void main() {
vec3 red = vec3( 1.0, 0.0, 0.0 );
vec3 pink = vec3( 1.0, 0.8, 0.8 );
float q = clamp( dot( vNormal, -viewDirection ), 0.0, 1.0 );
vec3 color = mix( red, pink, q );
gl_FragColor = vec4( color, 1.0 );
}
`;
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 2, 5 );
camera.lookAt( new THREE.Vector3() );
// plane
var geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
// custom shader
var material = new THREE.ShaderMaterial( {
uniforms: {
viewDirection: { value: new THREE.Vector3() }
},
vertexShader: shader_vert,
fragmentShader: shader_frag,
} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
window.addEventListener( 'resize', onResize );
function animate() {
requestAnimationFrame( animate );
plane.rotation.y += 0.01;
plane.rotation.x += 0.01;
camera.getWorldDirection( material.uniforms.viewDirection.value );
renderer.render( scene, camera );
};
function onResize() {
var w = window.innerWidth;
var h = window.innerHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize( w, h );
}
animate();
</script>
</body>
</html>