three.js 是不是有等效的背面可见性？

Posted 2023-02-27

【中文标题】three.js 是不是有等效的背面可见性？

【英文标题】：Is there a backface-visibility equivalent for three.js?three.js 是否有等效的背面可见性？

【发布时间】：2012-05-04 10:57:36

【问题描述】：

我有一个使用半透明 png 纹理的网格对象。

是否有用于 MeshBasicMaterial 的标志或选项，以便从前面可以看到对象的背面？

这里是一些示例代码：

var texture = THREE.ImageUtils.loadTexture('world.png');

// create the sphere's material
var sphereMaterial = new THREE.MeshBasicMaterial(
    map: texture,
    transparent: true,
    blending: THREE.AdditiveAlpha
);

sphereMaterial.depthTest = false;

// set up the sphere vars
var radius = 50, segments = 20, rings = 20;

// create a new mesh with sphere geometry -
var sphere = new THREE.SceneUtils.createMultiMaterialObject(
    new THREE.SphereGeometry(radius, segments, rings),[
    sphereMaterial,
    new THREE.MeshBasicMaterial(
        color: 0xa7f1ff,
        opacity: 0.6,
        wireframe: true
        )
   ]);

这将准确地渲染球体，但背面仍然不可见。

【参考方案1】：

背面属性在网格本身中设置：

sphere.doubleSided = true;

【参考方案2】：

执行此操作的新方法是使用material 的side 属性。

示例：

new THREE.MeshPhongMaterial(  map: texture, side: THREE.BackSide  )

可能的值为THREE.FrontSide、THREE.BackSide 和THREE.DoubleSide。

见：https://github.com/mrdoob/three.js/wiki/Migration