如何在Three.js形状几何体中添加前后纹理?

时间:2016-06-25 09:11:32

标签: javascript three.js texture-mapping

我创建了一个带圆角的扁平形状几何体。这是我的代码的一部分。

    var geometry = new THREE.ShapeGeometry(shape);
    var front_material = new THREE.MeshPhongMaterial({ map: frontTexture, side: THREE.FrontSide });
    var back_material = new THREE.MeshPhongMaterial({ map: backTexture, side: THREE.BackSide });
    var materials = [front_material, back_material];
    mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

此代码仅加载正面并在背面呈现不可见。 经过几个小时的谷歌搜索后,我无法找到如何在当前的Three.js版本r78上添加materialIndex。

我怀疑我只需要在这个问题上添加材料索引。

1 个答案:

答案 0 :(得分:3)

如果要创建正面和背面具有不同材质的扁平形状,可以使用此模式:

var geometry = new THREE.ShapeGeometry( shape );

var frontMaterial = new THREE.MeshPhongMaterial( { map: frontTexture, side: THREE.FrontSide } );
var backMaterial = new THREE.MeshPhongMaterial( { map: backTexture, side: THREE.BackSide } );

var materials = [ frontMaterial, backMaterial ];

var object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );

scene.add( object );

研究SceneUtils的源代码,以便了解它的作用。

three.js r.78