Zeichnen Sie einen Kreis (nicht schattiert) mit Three.js

Ich versuche einen Kreis zu zeichnen sehr ähnlich dem orbital-Muster auf diese website. Ich würde gerne verwenden Three.js anstelle von reinem WebGL.

InformationsquelleAutor theblang | 2012-12-07
  1. 20

    Three.js r50 Hinzugefügt CircleGeometry. Es kann gesehen werden (wenn auch mit einem Gesicht) in der WebGL Geometrien B..

    Den ersten vertex in der geometrie erstellt in der Mitte des Kreises (in r84, siehe CircleGeometry.js Zeile 71, in r65, siehe CircleGeometry.js Zeile 18), was-ist-geil wenn Sie sich für das "full Pac-Man" oder "sinnlose pie chart" - look. Oh, und es scheint notwendig zu sein, wenn Sie gehen, um jedes material, abgesehen von LineBasicMaterial /LineDashedMaterial.

    Ich habe festgestellt, dass der folgende code funktioniert in beide r60 & 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 ) );

    PS: Die "docs" enthalten jetzt einen schönen CircleGeometry interaktives Beispiel: https://threejs.org/docs/#api/geometries/CircleGeometry

    • Sehr cool! Ich bin froh, dass diese der Bibliothek Hinzugefügt wurde.
    • Bei Verwendung dieser Methode mit THREE.Line gab es eine Lücke zwischen dem ersten und dem letzten Knoten. Um einen vollständig geschlossenen Kreis, verwenden Sie THREE.LineLoop statt. threejs.org/docs/#api/objects/LineLoop
    InformationsquelleAutor mrienstra
  2. 9

    Die API hat sich etwas verändert in neueren Versionen von 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));

    Ändern segmentCount um den Kreis glatter oder mehr gezackt, wie benötigt von Ihrem Szene. 32 Segmente ziemlich glatt für kleine Kreise. Für Bahnen wie jene auf der Website, die Sie verknüpfen Sie, möchten Sie vielleicht, um ein paar hundert.

    Ändern Sie die Reihenfolge der drei Komponenten innerhalb des Vector3 Konstruktor zu wählen, die Ausrichtung des Kreises. Wie Sie hier angegeben ist, wird der Kreis ausgerichtet werden, um die x/y-Ebene.

    • das wird nicht funktionieren, wenn ich DREI.Mesh - ...keine Ahnung?
    InformationsquelleAutor Drew Noakes
  3. 4

    Ich verwendet code, der Mr. doob Referenzen in dies github posten.

    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);
    • das wird nicht funktionieren, wenn ich var Gitter = new DREI.Mesh( geometry, material ); eine Idee..?
    InformationsquelleAutor theblang
  4. 4

    Diesem Beispiel ist in der Three.js Dokumentation:

    var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff
});

var radius = 5;
var segments = 32; //<-- Increase or decrease for more resolution I guess

var circleGeometry = new THREE.CircleGeometry( radius, segments );              
var circle = new THREE.Mesh( circleGeometry, material );
scene.add( circle );
    InformationsquelleAutor Cristian Garcia
  5. 1

    Sehen three.js Beispiel http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html zu sehen, wie zum zeichnen von farbigen Linien.

    Einen Kreis, wie Sie Sie zitieren, ist gezeichnet als einer großen Anzahl der kleinen geraden Segmente. (Tatsächlich, diejenigen, die Sie zeigen können Ellipsen)

    InformationsquelleAutor bjorke
  6. 1
    var getStuffDashCircle2 = function () {

var segment = 100, radius = 100;

var lineGeometry = new THREE.Geometry();
var vertArray = lineGeometry.vertices;
var angle = 2 * Math.PI / segment;
for (var i = 0; i < segment; i++) {
    var x = radius * Math.cos(angle * i);
    var y = radius * Math.sin(angle * i);
    vertArray.push(new THREE.Vector3(x, y, 0));
}
lineGeometry.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({ color: 0x00cc00, dashSize: 4, gapSize: 2 });
var circle = new THREE.Line(lineGeometry, lineMaterial);

circle.rotation.x = Math.PI / 2;
circle.position.y = cylinderParam.trackHeight+20;
return   circle;
}
    InformationsquelleAutor Jack
Schreibe einen Kommentar