javascript - BufferGeometry - 只有一侧应用了 Material ？

Question

我是 two.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);

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

我该如何解决这个问题？

我创建了一个 fiddle ，但由于某种原因它无法工作(至少我的测试文件是完整代码可以在这里找到):

JSfiddle

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

Answer 1

这会产生预期的结果吗？

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

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