Crear un sector de anillo/círculo con el CanvasRenderer

Intentando crear una serie de segmentos de círculo/anillo usando Three.JS y CanvasRenderer.

Example using THREE.Shape and THREE.ShapeGeometry here: http://jsfiddle.net/25U8E/1/

La triangulación me parece incorrecta y cuando traté de mover los vértices modificando directamente geometry.vertices [n] .x etc., la forma THREE.Shape que uso se degrada y se vuelve menos uniforme.

¿Hay una mejor manera de crear un sector, que me permita modificar los vértices después?

0
Lo siento, fue un poco vago, era muy tarde. Esta captura de pantalla de i.imgur.com/iI4B6yx.png muestra a qué me refiero. El sector superior es cuando la aplicación comienza y la inferior es después de un par de iteraciones de mover la geometría.vertices para cambiar el tamaño del sector. El código para mover cada vert es el mismo que para crearlos inicialmente, así que no creo que es un error matemático. Tal vez eso no es algo válido que hacer una vez que se crea la malla.
agregado el autor speedwell, fuente
jsfiddle.net/NWJQk Intenté utilizar TRES.RingGeometry. Si no uso THREE.DoubleSide para el material, el segmento no se procesa correctamente. Si lo hago, hay una gran cantidad de z-fighting. ¿Hay algo más que deba establecer?
agregado el autor speedwell, fuente
Gracias por la aclaración.
agregado el autor speedwell, fuente
Pruebe THREE.RingGeometry (150, 300, 16, 2, 0, Math.PI/4); y luego explique a qué se refiere con "modificar los vértices" y "menos uniforme".
agregado el autor WestLangley, fuente
¡Ay! Eso es un error en RingGeometry . Míralo en modo de estructura metálica, y puedes ver que los bordes izquierdo y derecho están conectados con las caras. Pero RingGeometry es lo que debe usar, si funcionó.
agregado el autor WestLangley, fuente

1 Respuestas

No estoy seguro de si esto es lo que Stackoverflow-y debe hacer, pero aquí va:

La forma correcta de crear un sector de anillo como lo necesito es usar la clase RingGeometry de esta manera:

THREE.RingGeometry (150, 300, 16, 2, 0, Math.PI/4);

Contiene un error que significa que algunos de los virus están equivocados, como se muestra aquí: http://jsfiddle.net/NWJQk/ - a medida que gira, verá que la parte de atrás está equivocada.

Ese violín hace referencia a la URL de la última versión de Three.JS, por lo que si comienza a funcionar, significa que el error fue reparado y liberado.

Edit: Clearer illustration of what's failing using wireframe: http://jsfiddle.net/NWJQk/3/

0
agregado