Three.js.obj阴影不起作用

Three.js .obj shadows not working

本文关键字:不起作用 阴影 obj js Three      更新时间:2023-09-26

我正在努力学习Thee.js。它非常直接。然而,由于某种原因,我无法让阴影发挥作用。我已经将castShadows、receiveShadows和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

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

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

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

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

请尝试使用MeshLambertMaterial或MeshPhongMaterial。它们根据网格的标准进行照明。如果你激活castShadows并接收Shadows,他们也会给我们shadowMap。

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

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