Three.js - 双面球体纹理但不透明度应低于背面

时间:2017-11-01 10:03:00

标签: javascript three.js

我正在制作一个由世界地图纹理包裹的球体,并希望它是双面的。问题是正面和背面都具有相同的不透明性,这造成了混乱。所以我希望纹理的背面比正面更低的不透明度,以减轻差异。帮我找到解决方案。感谢。

var globeTexture = THREE.ImageUtils.loadTexture("/texture/dotmap.png")

var globeMaterial = new THREE.MeshPhongMaterial({
        map: globeTexture,
        shininess: 40,
        transparent: true,
        side: THREE.DoubleSide,
        opacity: 1,
        shading: THREE.SmoothShading,
        color: 0xaaaaaa,
        blending : THREE.AdditiveBlending
});

var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom, [globeMaterial]);

return mesh;
}

1 个答案:

答案 0 :(得分:0)

解决了它。 它是关于分别创建正面和背面,然后分别管理每一面的属性。

      var globeTexture = THREE.ImageUtils.loadTexture("/texture/dotmap.png")

      var globeMaterialf = new THREE.MeshPhongMaterial({
        map: globeTexture,
        shininess: 40,
        transparent: true,
        side: THREE.FrontSide,
        opacity: 0.9,
        shading: THREE.SmoothShading,
        color: 0xaaaaaa,
        blending : THREE.AdditiveBlending
      });

      var globeMaterialb = new THREE.MeshPhongMaterial({
        map: globeTexture,
        transparent: true,
        side: THREE.BackSide,
        opacity: 0.1,
        shading: THREE.SmoothShading,
        color: 0xaaaaaa,
        blending : THREE.AdditiveBlending,
        depthTest: false
      });

      var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom, [globeMaterialf, globeMaterialb]);