Dibuja un círculo (no sombreado) con Three.js

Nuestros mejores desarrolladores han agotado sus depósitos de café, por su búsqueda todo el tiempo por la solución, hasta que Víctor encontró el hallazgo en Gogs así que hoy la comparte con nosotros.

Solución:

Three.js r50 añadido CircleGeometry. Se puede ver (aunque con una cara) en el ejemplo de Geometrías WebGL.

El primer vértice de la geometría se crea en el centro del círculo (en r84, consulte la línea 71 de CircleGeometry.js, en r65, consulte la línea 18 de CircleGeometry.js), lo cual es ingenioso si busca ese “Pac-Man completo”. ” o “gráfico circular poco informativo”. Ah, y parece ser necesario si vas a usar cualquier material aparte de LineBasicMaterial / LineDashedMaterial.

He verificado que el siguiente código funciona tanto en r60 como en r65:

var radius   = 100,
    segments = 64,
    material = new THREE.LineBasicMaterial(  color: 0x0000ff  ),
    geometry = new THREE.CircleGeometry( radius, segments );

// Remove center vertex
geometry.vertices.shift();

// Non closed circle with one open segment:
scene.add( new THREE.Line( geometry, material ) );

// To get a closed circle use LineLoop instead (see also @jackrugile his comment):
scene.add( new THREE.LineLoop( geometry, material ) );

PD: Los “docs” ahora incluyen un bonito CircleGeometry ejemplo interactivo: https://threejs.org/docs/#api/geometries/CircleGeometry

La API cambió ligeramente en las versiones más nuevas de threejs.

var segmentCount = 32,
    radius = 100,
    geometry = new THREE.Geometry(),
    material = new THREE.LineBasicMaterial( color: 0xFFFFFF );

for (var i = 0; i <= segmentCount; i++) 
    var theta = (i / segmentCount) * Math.PI * 2;
    geometry.vertices.push(
        new THREE.Vector3(
            Math.cos(theta) * radius,
            Math.sin(theta) * radius,
            0));            


scene.add(new THREE.Line(geometry, material));

Modificar segmentCount para hacer que el círculo sea más suave o irregular según lo necesite su escena. 32 segmentos serán bastante suaves para círculos pequeños. Para órbitas como las del sitio al que te vincula, es posible que desees tener unos cientos.

Modifique el orden de los tres componentes dentro del Vector3 constructor para elegir la orientación del círculo. Como se indica aquí, el círculo se alineará con el plano x/y.

Usé el código al que hace referencia Mr.doob en esta publicación de github.

var resolution = 100;
var amplitude = 100;
var size = 360 / resolution;

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial(  color: 0xFFFFFF, opacity: 1.0 );
for(var i = 0; i <= resolution; i++) 
    var segment = ( i * size ) * Math.PI / 180;
    geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Math.cos( segment ) * amplitude, 0, Math.sin( segment ) * amplitude ) ) );         


var line = new THREE.Line( geometry, material );
scene.add(line);

Si aceptas, tienes la opción de dejar un ensayo acerca de qué te ha impresionado de este enunciado.

---

---

Utiliza Nuestro Buscador