Javascript 阴影未直接投射到导入的OBJ上
我想让这个物体投下阴影。但是在边缘有奇怪的阴影。我认为这个物体在“自身”的另一个组成部分上投射了一个阴影 有没有办法消除这种情况 这是小提琴: 这是强制性的代码,但是只要检查一下小提琴就行了Javascript 阴影未直接投射到导入的OBJ上,javascript,three.js,webgl,shadows,Javascript,Three.js,Webgl,Shadows,我想让这个物体投下阴影。但是在边缘有奇怪的阴影。我认为这个物体在“自身”的另一个组成部分上投射了一个阴影 有没有办法消除这种情况 这是小提琴: 这是强制性的代码,但是只要检查一下小提琴就行了 var container, stats; var camera, scene, renderer; var cube, plane; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; i
var container, stats;
var camera, scene, renderer;
var cube, plane;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, .1, 10000 );
camera.position.x=50;
camera.position.y=50;
camera.position.z=50;
camera.lookAt(new THREE.Vector3(0,0,0));
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
container.appendChild( renderer.domElement );
//var ambientLight = new THREE.AmbientLight(0x000000);
//scene.add(ambientLight);
light = new THREE.SpotLight();
light.position.set(337,400,313);
light.castShadow = true;
light.shadowMapWidth = 3000;
light.shadowMapHeight = 3000;
// light.shadowCameraVisible = true;
scene.add(light);
var geometry = new THREE.PlaneGeometry( 200, 200, 30, 30 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
geometry.applyMatrix( new THREE.Matrix4().setPosition( new THREE.Vector3(0,0,0) ) );
var material = new THREE.MeshLambertMaterial( { color: 0xEEEEEE } );
plane = new THREE.Mesh( geometry, material );
plane.receiveShadow = true;
scene.add( plane );
var loader = new THREE.OBJMTLLoader();
loader.addEventListener("load", function (event) {
cube = event.content;
for(k in cube.children){
cube.children[k].castShadow = true;
cube.children[k].receiveShadow = true;
}
scene.add(cube);
animate();
});
loader.load ("https://dl.dropboxusercontent.com/u/4334059/VM.obj", "https://dl.dropboxusercontent.com/u/4334059/VM.mtl");
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
您需要将所有
灯光参数设置为合理值。如果你不明白它们的用途,用谷歌搜索它们
light = new THREE.SpotLight( 0xffffff );
light.position.set( 200, 200, -200 );
light.castShadow = true;
light.shadowMapWidth = 1024; // power of 2
light.shadowMapHeight = 1024;
light.shadowCameraNear = 200; // keep near and far planes as tight as possible
light.shadowCameraFar = 500; // shadows not cast past the far plane
light.shadowCameraFov = 20;
light.shadowBias = -0.00022; // a parameter you can tweak if there are artifacts
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true;
scene.add( light );
让你的影子相机尽可能的紧
此外,在设置阴影摄影机时,请确保使用轨道控制
或类似工具,以便您可以将摄影机向后拉,查看正在执行的操作
另外,你的相机在飞机附近是0.1
,而远平面是10000
。不好的。保持近距离飞行至少1小时。近平面的较小值可能导致深度排序精度问题
小提琴:
three.js r.58我实际上需要对象本身来投射阴影。不是对它本身,而是对我真实场景中的其他相邻元素。但很明显,摆弄暗影摄影机为我解决了这个问题。谢谢你的提示,很好,我不知道。:)