Narysuj okrąg (bez cieniowania) za pomocą Three.js

Question

Próbuję narysować okrąg bardzo podobny do wzorów orbitalnych na stronie internetowej this. Chciałbym użyć Three.js zamiast czystej WebGL.

Answer 1

Three.js r50 dodano CircleGeometry. Można go zobaczyć (aczkolwiek z twarzą) w WebGL Geometries example.

Pierwszy wierzchołek w geometrii jest tworzony w środku okręgu (w r84, patrz CircleGeometry.js line 71, w r65, patrz CircleGeometry.js line 18), co jest fajne, jeśli wybierasz się na "pełnego Pac-Mana" lub "bez informacji" wykres kołowy ". Aha, i wydaje się konieczne, jeśli zamierzasz użyć dowolnego materiału poza LineBasicMaterial/LineDashedMaterial.

I zostały zweryfikowane, że następujący kod działa w obu 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(); 

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

PS: "Docs" to teraz piękny CircleGeometry interaktywny przykład: https://threejs.org/docs/#api/geometries/CircleGeometry

Answer 2

Zobacz próbkę three.js http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html, aby zobaczyć, jak rysować kolorowe linie.

Krąg, taki jak cytowane, jest narysowany jako duży # małych prostych segmentów. (W rzeczywistości te, które pokazujesz, mogą być elipsami)

Answer 3

Użyłem kodu, który piszą Mr.doob w this github post.

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); 

Answer 4

Interfejs API zmienił się nieznacznie w nowszych wersjach programu 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)); 

Modyfikuj segmentCount aby koło gładsza i bardziej postrzępione jak potrzebne sceny. 32 segmenty będą dość gładkie dla małych kółek. Na orbitach takich jak na stronie, którą łączysz, możesz mieć kilkaset.

Zmodyfikuj kolejność trzech komponentów w konstruktorze Vector3, aby wybrać orientację okręgu. Jak tutaj podano, okrąg zostanie wyrównany do płaszczyzny x/y.

Answer 5

Ten przykład jest w Three.js dokumentacja:

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); 

Answer 6

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; 
}