Self reflection in three.js

Question

How to make a part of object visible in reflection on another part of the same object?

Answer 1

Threejs is not a ray tracing engine. Therefore it is not using real ray casts to calculate reflections on surfaces. It actually renders the other objects onto your reflective object.

What your scene is missing is an infinity mirror effect between surfaces, where light rays can bounce between two reflective surfaces multiple times. This is what a ray tracing engine would do.

You can try to fake this. Just split your geometry of into multiple objects and use extra cameras for them to render the scene looking from your reflective object into the scene and using this as a texture for the object.
You can use this example as a starting point: https://threejs.org/examples/#webgl_materials_cubemap_dynamic

Here an example of a material with dynamic environment texture captured by a CubeCamera:

var near = 1
var far = 100
var cubeResolution = 128
var camera1 = new THREE.CubeCamera( near, far, cubeResolution);
camera1.renderTarget.texture.generateMipmaps = true;
camera1.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
scene.add( camera1 );

var material = new THREE.MeshBasicMaterial( { envMap: camera1.renderTarget.texture } );
var cube = new THREE.Mesh( new THREE.BoxBufferGeometry( 20, 20, 20 ), material );
scene.add(cube)