我已经试图解决这个问题已经很久了但是它没有用。我试图在MeshPhongMaterial上为我的.dea模型添加阴影,但没有任何东西出现。
摄像机位置正确,地面不在MeshPhongMaterial中,模型投射阴影,地面可以接收它们。
我缺少什么想法?
相关代码位:
function load() {
loader.load( 'models/charMesh_02_1.5.dae', function ( collada ) {
model = collada.scene;
model.scale.x = model.scale.y = model.scale.z = modelScale;
model.castShadow = true;
model.receiveShadow = true;
modelmesh = model.children[0].children[0];
modelmesh.castShadow = true;
modelmesh.receiveShadow = true;
model.updateMatrix();
// When model is loaded, init and animate everything
init();
animate();
});
}
//
// Set everything up
//
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// Camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 2, 2, 400 );
scene = new THREE.Scene();
scene.add(new THREE.AxisHelper() );
// Fog
scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
scene.fog.color.setHSL( 0.6, 0, 1 );
// Light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true;
light.shadowCameraNear = 2000;
light.shadowCameraFar = 3000;
light.shadowCameraLeft = -200;
light.shadowCameraRight = 200;
light.shadowCameraTop = 200;
light.shadowCameraBottom = -200;
light.position.set(-60, 1500, 1000);
scene.add(light);
// Ground
var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
var groundMat = new THREE.MeshPhongMaterial( { ambient: 0xffffff, color: 0xffffff, specular: 0x959595 } );
groundMat.color.setHSL( 0.095, 1, 0.75 );
groundMat.shininess = 0;
groundGeo.receiveShadow = true;
groundMat.receiveShadow = true;
var ground = new THREE.Mesh( groundGeo, groundMat );
ground.rotation.x = -Math.PI/2;
ground.position.y = 0;
ground.receiveShadow = true;
scene.add( ground );
// Skydome
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
var uniforms = {
topColor: {type: "c", value: new THREE.Color( 0x0077ff )},
bottomColor: {type: "c", value: new THREE.Color( 0xffffff )},
offset: {type: "f", value: 33},
exponent: {type: "f", value: 0.6}
}
uniforms.topColor.value.copy(skydomeColor);
scene.fog.color.copy( uniforms.bottomColor.value );
var skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
var skyMat = new THREE.ShaderMaterial({vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide});
var sky = new THREE.Mesh(skyGeo, skyMat);
scene.add(sky);
// Add the model
scene.add(model);
// Renderer
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapCullFace = THREE.CullFaceBack;
}
答案 0 :(得分:1)
我认为您必须遍历模型以在每个元素上设置投射/接收阴影 当我加载一个对象时,我这样做:
function LoadDae(DaeFilename, name, scene) {
var loader = new THREE.ColladaLoader();
loader.load(DaeFilename, function (collada) {
dae = collada.scene;
dae.traverse(function (child) {
child.castShadow = true;
child.receiveShadow = true;
});
scene.add(dae);
});
}