三个JS阴影不透明度

问题描述 投票:2回答:1

嘿所有我在画布上加载了一个自定义模型,一切正常。我得到的唯一问题是我没有胶水如何让我的阴影在模型本身上透明(模型应该投射并接收阴影)。

我的代码看起来像这样:

var loader = new THREE.JSONLoader();
    loader.load('model/p3.json', handle_load);

    var mesh;
    function handle_load(geometry, materials) {

        var material = new THREE.MeshPhongMaterial();

        mesh = new THREE.Mesh(geometry,material);

        scene.add(mesh);
        mesh.position.z = 0;
        mesh.position.y = 0;
        mesh.rotation.y = 5;


        //LIGHT
        var ambient = new THREE.AmbientLight(0xffffff, 0.15);
        ambient.target = mesh;

        scene.add(ambient);

        var light = new THREE.DirectionalLight(0xffffff, 1);
        light.target = mesh;
        light.castShadow = true;
        light.position.z = -150;
        light.position.y = 150;
        light.position.x = 150;
        light.shadow.bias = 0;
        light.shadowDarkness = 0.2;
        light.shadow.mapSize.width = 2048 * 2;
        light.shadow.mapSize.height = 2048 * 2;
        scene.add(light);
        mesh.receiveShadow = true;
        mesh.castShadow = true;

    }

    var shadowmaterial = new THREE.ShadowMaterial();
    shadowmaterial.opacity = 0.2;


    var material2 = new THREE.MeshPhongMaterial({
        color: 0xffffff,
    });

    var geometry3 = new THREE.PlaneGeometry(500, 500, 100, 100);
    var mesh3 = new THREE.Mesh(geometry3, shadowmaterial);
    mesh3.rotation.x = -90 * Math.PI / 180;
    mesh3.position.y = 0;
    scene.add(mesh3);

     mesh3.receiveShadow = true;

渲染看起来像这样:

enter image description here

我感谢每一个帮助

javascript canvas 3d three.js shadow
1个回答
0
投票

由于您的网格材质始终是灰色且地板为白色,因此阴影中始终存在对比度。根据我的发现,阴影旨在将这种物理现实主义内置于其中,不允许通过调整材料和灯光接近的某些阴影属性直接调整。

您可以将平面材质颜色降低为灰色而不是白色,并提高光照强度。或者使网眼材料变亮并降低光照强度。

您还可以添加更多灯光并进行调整。增加环境光并减少方向应降低阴影对比度。其他类型的灯也会产生影响。

您还可以播放材质的不同方面,使其更白,更暗,从而影响阴影。一个例子是反射率。因此,如果你降低方向但希望它仍然可以使用反射率和镜面反射的方向作出反应。

© www.soinside.com 2019 - 2024. All rights reserved.