【问题标题】:Three.js OBJLoader .obj model not casting shadowsThree.js OBJLoader .obj 模型不投射阴影
【发布时间】:2013-04-09 15:35:17
【问题描述】:

我正在进行一个项目,我希望允许从 OBJLoader.js 加载的 .OBJ 模型从聚光灯下投射阴影。灯光会从其他普通对象投射阴影,但 .OBJ 似乎不会投射阴影。

该问题的可能症状如下: 当这些普通对象在单击地板时创建时,它们会被输入到数组 Objects[] 中,这反过来又使它们可以单击以将对象添加到它们自己的顶部。 .OBJ 模型也添加到了这个数组中,但是我不能点击它来在它上面添加模型;好像光线投射器没有检测到它。

我将包含所有代码,因为问题可能出在无法预料的地方。

有一个可用的链接HERE

http://www.powertrooper.com/3D/demos/issues/OBJShadows

尝试点击地板,看看其他物体如何投射阴影。

有人有什么想法吗?杜布先生?你在外面吗? :)

ps:我不知道为什么在我的浏览器中,我留下的链接指向一个名为“4safe.in”的恶意软件站点。尝试复制并粘贴我猜的链接...

以防万一,这里有一段代码,其中包含可能导致问题的大部分内容。

    renderer.shadowMapEnabled = true;///////////////////////////////////////////// RENDERER /// <------------Renderer and lights set up to cast shadows
    light.castShadow = true;
    light.shadowDarkness = 1;
    renderer.shadowMapSoft = true;
    floor.receiveShadow = true;

    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader();
    loader.addEventListener( 'load', function ( event ) {

        texture.image = event.content;
        texture.needsUpdate = true;

    } );
    loader.load( 'modeltest/ash_uvgrid01.jpg' );

    // model

    var loader = new THREE.OBJLoader();
    loader.addEventListener( 'load', function ( event ) {

        var newModel = event.content;

         newModel.traverse( function ( child ) {

             if ( child instanceof THREE.Mesh ) {

                 child.material.map = texture;

            }

         } );

        newModel.position.set (200,30,0);
        newModel.castShadow = true;///////////////////////////// <------ This doesn't seem to be working.
        scene.add( newModel );
        objects.push( newModel );/////////////////////////////// <------ The other HINT: because of this, the raycaster SHOULD allow us to click the model and create a new block. But we can't.


    });

    loader.load( 'modeltest/male02.obj' );

【问题讨论】:

    标签: javascript three.js webgl


    【解决方案1】:

    对象的每个子网格都必须将 castShadow 设置为 true

    newModel.traverse( function ( child ) {
    
        if ( child instanceof THREE.Mesh ) {
    
            child.material.map = texture;
            child.castShadow = true;
    
        }
    
    } );
    

    要让raycaster.intersectObjects() 使用您的对象,您需要将递归标志设置为true

    var intersects = raycaster.intersectObjects( objects, true );
    

    three.js r.57

    【讨论】:

    • 非常感谢!在我茫然地盯着屏幕一天之后,这第一次完美地发挥了作用。非常感激。 (现在我只需要弄清楚这些变化究竟意味着什么!)
    猜你喜欢
    • 2016-06-21
    • 1970-01-01
    • 1970-01-01
    • 2017-12-12
    • 1970-01-01
    • 1970-01-01
    • 2013-08-03
    • 2019-01-14
    相关资源
    最近更新 更多