javascript 是否有与three.js 等效的背面可见性?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10287186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 09:20:05  来源:igfitidea点击:

Is there a backface-visibility equivalent for three.js?

javascriptcanvas3dwebglthree.js

提问by Danny Garcia

I have an object with a mesh that uses a semi-transparent png texture.

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

Is there a flag or option for the MeshBasicMaterial so that the back of the object is visible through the front?

MeshBasicMaterial 是否有标志或选项,以便通过正面可以看到对象的背面?

Here is some sample code:

下面是一些示例代码:

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
        })
   ]);

This will accurately render the sphere but the back remains invisible.

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

回答by rickdmer

The new way to do this is by using the sideproperty of material.

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

Example:

例子:

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

Possible values are THREE.FrontSide, THREE.BackSideand THREE.DoubleSide.

可能的值为THREE.FrontSideTHREE.BackSideTHREE.DoubleSide

See: https://github.com/mrdoob/three.js/wiki/Migration

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

回答by sole

The backface property is set in the mesh itself:

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

sphere.doubleSided = true;