Is there a way to retrieve the light intensity and pixel values (rgba) of a specific point in a scene?
For example, if I have a scene where a moving light is illuminating a cube, how can I determine the brightness of certain points on the cube?
// Here is the Javascript code for our scenario.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshLambertMaterial( );
var cube = new THREE.Mesh( geometry, material );
cube.rotation.x += 0.4;
cube.rotation.y += 0.4;
scene.add( cube );
var plane_geo = new THREE.PlaneGeometry(2,2,2);
var plane = new THREE.Mesh( plane_geo, material );
plane.rotation.x = -1;
plane.position.y = -0.5;
scene.add( plane );
var light = new THREE.SpotLight( 0xff0000, 1, 100 );
//var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 3, 2, 2 );
scene.add( light );
var sphereSize = 0.1;
var pointLightHelper = new THREE.PointLightHelper( light, sphereSize );
scene.add( pointLightHelper );
var lightX = 0.5;
var lightY = 0.5;
camera.position.z = 5;
animate();
document.addEventListener("mousemove",mousemove_handler);
function animate() {
requestAnimationFrame( animate );
light.position.set(lightX,lightY,1);
renderer.render( scene, camera );
}
function mousemove_handler(event)
{
// Obtain Mouse Coords mapped to the 3D Vector
var vector = new THREE.Vector3();
vector.set(
(event.clientX/window.innerWidth) * 2 - 1,
- (event.clientY/window.innerHeight) * 2 + 1,
0.5);
vector.unproject(camera);
var dir = vector.sub(camera.position).normalize();
var distance = - camera.position.z / dir.z;
var pos = camera.position.clone().add(dir.multiplyScalar(distance));
lightX = pos.x;
lightY = pos.y;
}body { margin: 0; }
canvas { width: 100%; height: 100% }<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
</body>
</html>