Attempting to understand the light classes in three.js has been a bit of a challenge for me. I've been experimenting with an example in three.js, trying to place a 3D mesh model on the screen and give it a simple rotating animation.
Is there a way to have a stationary light source on the object while it moves? Currently, the light reflecting off the object seems to follow its rotation path.
Here is the code snippet: http://codepen.io/jagomez8/pen/BzByEz
I've tried swapping out different light classes, but I suspect that the issue lies within the MeshPhongMaterial. When I apply flatShading to the material, it gives me the desired result, except for the flat appearance it creates. The relevant code can be found on line 105.
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var scene = new THREE.Scene();
var egg;
var matFloor = new THREE.MeshPhongMaterial();
var matBox = new THREE.MeshPhongMaterial( { color: 0x4080ff } );
var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
var mshFloor = new THREE.Mesh( geoFloor, matFloor );
var mshBox = new THREE.Mesh( geoBox, matBox );
var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
var spotLight = new THREE.SpotLight( 0xffffff, 1 );
var lightHelper;
var gui, guiElements, param = { color: '0xffffff' };
function init() {
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaInput = true;
renderer.gammaOutput = true;
camera.position.set( 65, 8, - 10 );
spotLight.position.set( 15, 40, 35 );
spotLight.castShadow = true;
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05;
spotLight.decay = 2;
spotLight.distance = 200;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 1;
spotLight.shadow.camera.far = 200;
lightHelper = new THREE.SpotLightHelper( spotLight );
matFloor.color.set( 0x808080 );
mshFloor.receiveShadow = true;
mshFloor.position.set( 0, - 0.05, 0 );
mshBox.castShadow = true;
mshBox.position.set( 40, 1.8, 0 );
scene.add( camera );
scene.add( mshFloor );
scene.add( mshBox );
scene.add( ambient );
scene.add( spotLight );
scene.add( new THREE.AxisHelper( 10 ) );
scene.add( lightHelper );
document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
controls.addEventListener( 'change', render );
controls.minDistance = 20;
controls.maxDistance = 500;
controls.maxPolarAngle = Math.PI / 2;
controls.enablePan = false;
controls.target.copy( mshBox.position );
controls.update();
window.addEventListener( 'resize', onResize, false );
var manager = new THREE.LoadingManager();
manager.onProgress = function( item, loaded, total ) {
console.log( item, loaded, total );
};
var onProgress = function( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
}
};
var onError = function( xhr ) {
};
var loader = new THREE.JSONLoader( manager );
loader.load( 'http://alexgdm.com/egg.json', function( geometry, material ) {
///****3D MESH***///
egg = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30/*, shading: THREE.FlatShading */} ) );
egg.position.set(0, 1, 1);
scene.add( egg );
animate();
}, onProgress, onError );
}
function onResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = ( window.innerWidth / window.innerHeight );
camera.updateProjectionMatrix();
}
function render() {
lightHelper.update(); // required
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
egg.rotation.y += 0.01;
renderer.render( scene, camera );
}
function clearGui() {
if ( gui ) gui.destroy();
gui = new dat.GUI();
gui.open();
}
function buildGui() {
clearGui();
addGui( 'light color', spotLight.color.getHex(), function( val ) {
spotLight.color.setHex( val );
render();
}, true );
addGui( 'intensity', spotLight.intensity, function( val ) {
spotLight.intensity = val;
render();
}, false, 0, 2 );
addGui( 'distance', spotLight.distance, function( val ) {
spotLight.distance = val;
render();
}, false, 0, 200 );
addGui( 'angle', spotLight.angle, function( val ) {
spotLight.angle = val;
render();
}, false, 0, Math.PI / 3 );
addGui( 'penumbra', spotLight.penumbra, function( val ) {
spotLight.penumbra = val;
render();
}, false, 0, 1 );
addGui( 'decay', spotLight.decay, function( val ) {
spotLight.decay = val;
render();
}, false, 1, 2 );
}
function addGui( name, value, callback, isColor, min, max ) {
var node;
param[ name ] = value;
if ( isColor ) {
node = gui.addColor( param, name ).onChange( function() {
callback( param[ name ] );
} );
} else if ( typeof value == 'object' ) {
node = gui.add( param, name, value ).onChange( function() {
callback( param[ name ] );
} );
} else {
node = gui.add( param, name, min, max ).onChange( function() {
callback( param[ name ] );
} );
}
return node;
}
init();
buildGui();
render();