Three.js .obj 阴影不起作用

Question

我正在努力学习 Thee.js。这很简单。但是由于某种原因，我无法让阴影工作。我已经在我找到设置它们的地方将 castShadows、recieveShadows、shadowMapEnabled 设置为 true，但是它们不显示阴影（任何地方）。

我想要做的是我导入的模型在自身上投下阴影，这样你就可以真正看出模型是什么。

这是我当前的代码：

var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;

init();
animate();

function init(){
    container = document.createElement( "div" );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 100;

    controls = new THREE.TrackballControls( camera );
    controls.rotateSpeed = 5.0;
    controls.zoomSpeed = 5;
    controls.panSpeed = 0;
    controls.noZoom = false;
    controls.noPan = true;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;

    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight( 0xffffff );
    scene.add( ambient );

    /*var spotLight = new THREE.SpotLight( 0xffffff,1.5, 40 );
    spotLight.position.set( -400, 1200, 300 );
    spotLight.castShadow = true;
    spotLight.shadowDarkness = 0.5;
    spotLight.shadowCameraVisible = true;
    spotLight.target.position = new THREE.Object3D( 10, 10, 10 );
    scene.add( spotLight );*/

    var light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.x = -100;
    light.position.y = 150;
    light.shadowCameraVisible = true;
    light.castShadow = true;

    light.shadowCameraNear = 100; 
    light.shadowCameraFar = 300;
    light.shadowCameraFov = 20;
    light.shadowBias = -0.00022;   
    light.shadowDarkness = 0.5;
    scene.add(light);

    var groundGeo = new THREE.PlaneGeometry(400,400);
    var groundMat = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

    var ground = new THREE.Mesh(groundGeo,groundMat);
    ground.position.y = -20; 
    ground.rotation.x = -Math.PI/2; 
    ground.doubleSided = true; 
    ground.reciveShadow = true;
    scene.add(ground); 


    var manager = new THREE.LoadingManager();
    manager.onProgress = function( item, loaded, total ){
        console.log( item, loaded, total );
    };

    var loader = new THREE.OBJLoader( manager );

    //var texture = new THREE.Texture();

    var texture = THREE.ImageUtils.loadTexture( "textures/red.jpg" );
    texture.repeat.set( 0.7, 1 );
    texture.wrapS   = texture.wrapT = THREE.RepeatWrapping;
    var material    = new THREE.MeshPhongMaterial({
        ambient     : 0x444444,
        color       : 0x8844AA,
        shininess   : 300, 
        specular    : 0x33AA33,
        shading     : THREE.SmoothShading,
        map     : texture
    });

    loader.load("models/Shooza.obj",function(e){
        var object = e;

        object.traverse( function(child){
            if(child instanceof THREE.Mesh){
                child.material.color.setRGB(0.5,0,0);
                child.castShadow = true;
                child.reciveShadow = false;
                //child.material.map = texture;
            }
        });

        //object.scale = new THREE.Vector3(-100,-100,-100);
        object.scale.set(0.2,0.2,0.2);

        object.position.y -= 2.5;

        object.castShadow = true;
        object.reciveShadow = true;

        scene.add(object);
    });


    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapType      = THREE.PCFSoftShadowMap;
    renderer.shadowMapSoft = true;
    container.appendChild( renderer.domElement );

}

function animate(){
    requestAnimationFrame( animate );

    controls.update();
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
}

这是我目前的结果： http://gyazo.com/931f9103e01a5985508897fb1a5d0b88

Answer 1

您可能需要指定阴影贴图的大小 聚光灯下

            spotLight.shadowMapWidth = 512;
            spotLight.shadowMapHeight = 512;

也用于可视化 >> spotLight.shadowCameraVisible = true;

Answer 2

我不知道你是否真的需要阴影。 您使用 MeshBasicMaterial。 MeshBasicMaterial 不计算任何光照。

尝试改用 MeshLambertMaterial 或 MeshPhongMaterial。 他们根据网格的标准进行照明。如果你激活 castShadows 和 receiveShadows 他们也会使用 shadowMap。

http://threejs.org/docs/#Reference/Materials/MeshLambertMaterial

http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial