我正在努力掌握three.js灯光课程。我试图将三维网格模型放入屏幕并为其添加一个基本的旋转动画，以此来修改three.js示例。
如何在移动物体上实现静态光源？目前，从物体反射的光似乎沿着旋转的一些路径。
以下是代码：http://codepen.io/jagomez8/pen/BzByEz
我已将其换成其他各种轻型课程，但我认为问题在于MeshPhongMaterial。当我将flatShading应用于材质时，它会呈现所需的结果，除了它得到的平面外观。相关代码在第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();
答案 0 :(得分：1)
你的蛋形模型无效。特别是，顶点法线不正确。
似乎顶点法线具有y分量和z分量切换。尝试重新映射它们，并设置.y = -.z和.z = .y。
或者，只需致电
geometry.computeVertexNormals();
这应该导致合理的顶点法线。
如果需要，可以使用 THREE.VertexNormalsHelper查看法线。
three.js r.77