0

我有一个带铁路灯的 Threejs 小场景。模型是使用 Blender 创建和导出的。

这是我的代码：

var scene, camera, renderer, ambientLight, directionalLight, spotLight, model, progress;
var stats, toolbox, loader;
var SCREEN_WIDTH, SCREEN_HEIGHT; 

function init(model) {    
    
    //vars
	container = document.getElementById('webGL_container');    
    toolbox = document.getElementById('toolbox');    
    loaderDiv = document.getElementById('loader');
	
    //scene
    scene = new THREE.Scene(); 
    scene.fog = new THREE.FogExp2( 0x929599, 0.001 );
	
    //progress
    progress = new THREE.LoadingManager();
    progress.onProgress = function ( item, loaded, total ) {
        //console.log( item, loaded, total );
    };
    
    //loader
    loader = new THREE.ObjectLoader(progress);
    loader.load(model, function (obj) {
        // executes when scene is loaded
        scene.add(obj);		
        loaderDiv.style.display = 'none';
		cameraControls.enabled = true;	
    });
	
	//camera      
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 150);
    camera.position.set(0,10,-10);
	
	//light
	ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
	scene.add(ambientLight);
	
	directionalLight = new THREE.DirectionalLight( 0xffffff, 1.1);
	directionalLight.position.set( 100, 200, 150 );    
	scene.add(directionalLight);	

	spotLight = new THREE.SpotLight( 0xFFAA88 );
	spotLight.position.set( 10, 25, 15);
	spotLight.castShadow = true;
	spotLight.shadow.bias =  0.001;
	spotLight.shadow.camera.near = 10;
	spotLight.shadow.camera.far = 100;	
	spotLight.shadow.mapSize.width = 2048;
	spotLight.shadow.mapSize.height = 2048;
	scene.add( spotLight );		
	var helper = new THREE.CameraHelper( spotLight.shadow.camera );	
	scene.add( helper );
       

    //renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true, alpha: true
    });    
   	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize(window.innerWidth, window.innerHeight);	
	renderer.setClearColor( scene.fog.color );	
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setFaceCulling(THREE.CullFaceNone);
	//shadow
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
		
	//
	container.appendChild(renderer.domElement);  
    
    //controls
    cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
    cameraControls.target.set(0, 0, 0);
    cameraControls.enablePan = true;
    cameraControls.enabled = false;
    
    //stats      
    stats = new Stats();   
    toolbox.insertBefore(stats.domElement, toolbox.children[1]);    
    animate();
}
    
//render
function render() {
    renderer.clear();
    renderer.render(scene, camera);    
}  

//animate
function animate() {    
    stats.begin();
    requestAnimationFrame(animate);
    render();    
    cameraControls.update();	
    stats.end();
}

//resize scene
window.onresize = function () {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
};

我是在 JSFiddle 上发布运行时代码的菜鸟，所以完整的工作代码在这里： https ://drive.google.com/open?id=0BwCG1m_fANZmb0UxYVE5OUlfYzQ

我得到了什么，运行这段代码[截图]： 奇怪的阴影

我试过玩spotLight.shadow.bias = 0.001;，但没有任何帮助。

如果物体内部没有任何面，它看起来不那么丑（上光帽），但如果有（下光帽），它看起来就很可怕。

在搅拌机中，我尝试翻转，重新计算对象的正常值，但仍然没有用。

非常感谢提前，抱歉 GDrive 中的代码。

4

0 回答 0