three.js:挤出几何体的多种材质问题

时间:2017-12-18 08:39:37

标签: three.js material

我使用three.js拉伸功能绘制几何图形,我想添加2个纹理,一个用于顶部和底部,一个用于其他边。

根据This Post,似乎有可能。但我无法使它成功。

这是我的代码:

    //Create BaseForm (Bottom)
    var shape = new THREE.Shape();
    shape.moveTo(0,0);
    shape.lineTo(0,2);
    shape.lineTo(0.5,1.5);
    shape.lineTo(1,2);
    shape.lineTo(1,0);
    shape.lineTo(0.5,0.5);
    shape.lineTo(0,0);
    //Extrude XScores
    var extrudeSettings={amount: 50, bevelEnabled: false, material: 0, extrudeMaterial: 1, steps: 10};
    var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

    var material1 = new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.1, metalness: 0.4, side: THREE.DoubleSide});
    var material2 = new THREE.MeshStandardMaterial({color: 0x8dbe8d, roughness: 0.7, metalness: 0, side: THREE.DoubleSide});

    var materials = [
        material1,
        material2];

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

但是只有一个纹理适用于所有面(材质2)。

注意:由于我在小物体上挤出问题,我使用了智能手机。

感谢您的帮助,

1 个答案:

答案 0 :(得分:0)

你需要这样做:

var localmesh = new THREE.Mesh(geometry, materials);

THREE.SceneUtils.createMultiMaterial()旨在用于其他目的。它只是创建两个具有相同几何形状的对象,但在同一个地方使用不同的材质。