I've made a circle as follows:

material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
arcShape = new THREE.Shape();
arcShape.absarc( 0, 0, 20, 0, -Math.PI*2, true );
geometry = arcShape.makeGeometry();
circle = new THREE.Mesh(geometry, material);
scene.add(circle);

Like that, it is visible. But rotate it, and it disappears.

shadow.rotation.x = Math.PI / 2;

I've seen several other posts where this problem has not been solved. (So unless someone has a solution, I'll resort to making a flat cylinder instead. It's just a niggling problem).

I've set mesh.doubleSided = true and mesh.flipSided = false. I've also tried all 4 binations of toggling the renderer's depthTest and the material's depthWrite properties.

Is there anything else I could try? If not, I'm guessing the code is sensitive to the order of some of my calls, in which case, I've had a long day so I'll stick with the cylinder!!

I've made a circle as follows:

material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
arcShape = new THREE.Shape();
arcShape.absarc( 0, 0, 20, 0, -Math.PI*2, true );
geometry = arcShape.makeGeometry();
circle = new THREE.Mesh(geometry, material);
scene.add(circle);

Like that, it is visible. But rotate it, and it disappears.

shadow.rotation.x = Math.PI / 2;

I've seen several other posts where this problem has not been solved. (So unless someone has a solution, I'll resort to making a flat cylinder instead. It's just a niggling problem).

I've set mesh.doubleSided = true and mesh.flipSided = false. I've also tried all 4 binations of toggling the renderer's depthTest and the material's depthWrite properties.

Is there anything else I could try? If not, I'm guessing the code is sensitive to the order of some of my calls, in which case, I've had a long day so I'll stick with the cylinder!!

• javascript
• three.js
• webgl
• shapes

1 Answer 1

material.side = THREE.DoubleSide;