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

喜夏-厌秋 提交于 2019-12-09 16:41:14

问题


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

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

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.


回答1:


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

Example:

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

Possible values are THREE.FrontSide, THREE.BackSide and THREE.DoubleSide.

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




回答2:


The backface property is set in the mesh itself:

sphere.doubleSided = true;


来源:https://stackoverflow.com/questions/10287186/is-there-a-backface-visibility-equivalent-for-three-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!