BufferGeometry - 只有一方获得材料？

Question

我是three.js的新手。 我使用以下代码创建了一个测试多边形：

var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
    2.0, 1.0, 1.0, -1.0, -1.0, 1.0,
    1.0, -1.0, 1.0,

    1.0, 1.0, 2.0, -1.0, -1.0, 1.0,
    1.0, -1.0, 1.0,
]);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
var material = new THREE.MeshBasicMaterial({
    color: 0xff0000
});
mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

我希望每边的多边形都是红色的。但是只有一面是红色，另一面是黑色。

我该如何解决这个问题？

我创造了一个小提琴，但由于某种原因它不起作用（至少我的测试文件 完整的代码可以在这里找到）：

JSfiddle

水平移动鼠标以水平旋转多边形。

Answer 1

这是否会产生预期效果？

var material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    side: THREE.DoubleSide,
});

有关详细信息，请参阅文档中的此链接： https://threejs.org/docs/#api/materials/Material.side