Drei JS Circle Line Geom Farbe für negative Werte

Ich habe einige Ideen getestet, wie man einen Kreis bekommt, der eine andere Farbe für den Teil des Kreises hat, der positive Z-Werte hat. Ich habe einen Ansatz versucht, zwei separate Liniensegmente zu erstellen und verschiedene Materialien zu verwenden. Es funktioniert, wenn der Kreis Segmente hat, die nicht über Z = 0 springen. Das Problem, an dem ich arbeite, ist komplizierter, da die Liniensegmente über die Grenze von Z = 0 springen, so dass ich Lücken habe, wenn ich versuche, es in zwei Segmenten zu machen. Gibt es eine Möglichkeit, nur eine Linie Geom zu verwenden und dann die Farbe des Teils der Linie zu ändern, der in negative Z-Werte fällt? Ich bin mir nicht sicher, ob das der richtige Ansatz ist. Vielen Dank!Drei JS Circle Line Geom Farbe für negative Werte

Hier ist, was ich bisher für einen Test haben (mit X, Y):

<html> 
    <head> 
     <title>Cirle Color</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100% } 
     </style> 
    </head> 
    <body> 
    <script src="three.min.js"></script> 
     <script> 
      var scene = new THREE.Scene(); 
      var camera = new THREE.PerspectiveCamera(500, window.innerWidth/window.innerHeight, 0.1, 100000); 

      var renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

       var segmentCount = 100, 
        radius = 10, 
        geometry = new THREE.Geometry(); 
        geometry2 = new THREE.Geometry(); 
        material = new THREE.LineBasicMaterial({ color: "#5fd119" }); // light green 
        material2 = new THREE.LineBasicMaterial({ color: "#3d8710" }); // darker green 

        //PUSH THE ORIGIN VERTICY IN 
        geometry2.vertices.push(new THREE.Vector3(-10,0,0)); 

       for (var i = 0; i <= segmentCount; i++) { 
        var theta = (i/segmentCount) * Math.PI * 2; 

        x = Math.cos(theta) * radius; 
        y = Math.sin(theta) * radius; 
        z = 0; 

        if (y >=0){ 
         geometry.vertices.push(new THREE.Vector3(x, y, z)); 
        } else { 
         geometry2.vertices.push(new THREE.Vector3(x, y, z)); 
        }   
       } 

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

      camera.position.z = 5; 

      var render = function() { 
       requestAnimationFrame(render); 

       renderer.render(scene, camera); 
      }; 

      render(); 
     </script> 
    </body> 
</html>

aktualisieren die Antwort unten. Funktioniert super:

Quelle

2016-12-11 rankind

Ich hoffe, ich bekomme Sie richtig. Sie können Farben von Scheitelpunkten einer Geometrie festlegen und dann vertexColors Parameter eines Materials verwenden.

var radius = 5; 
    var shape = new THREE.Shape(); 
    shape.moveTo(radius, 0); 
    shape.absarc(0, 0, radius, 0, 2 * Math.PI, false); 
    var spacedPoints = shape.createSpacedPointsGeometry(360); 

    var vertexColors = []; // array for our vertex colours 
    spacedPoints.vertices.forEach(function(vertex){ // fill the array 
    if(vertex.y < 0) 
     vertexColors.push(new THREE.Color(0xff0000)) 
    else 
     vertexColors.push(new THREE.Color(0x0000ff)); 
    }); 
    spacedPoints.colors = vertexColors; // assign the array 

    var orbit = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({ 
    vertexColors: THREE.VertexColors // set this parameter like it shown here 
    })); 
    scene.add(orbit);

jsfiddle Beispiel

Quelle

2016-12-11 23:42:19 prisoner849

Mit einigen Optimierungen konnte ich dies in meinem Projekt integrieren. GENAU was ich wollte, danke !!! – rankind

du bist willkommen) deine Arbeit sieht cool aus) – prisoner849

Danke, drei js app zum Anzeigen von echten Asteroiden Umlaufbahnen. :) http://rankinstudio.com/Asteroid_Orbit_View – rankind

Drei JS Circle Line Geom Farbe für negative Werte

Antwort

Verwandte Themen