負三值的三個JS圓線幾何顏色

我一直在測試一些關於如何讓一個圓有不同顏色的圓的部分具有正Z值的想法。我嘗試了一種方法，創建兩個獨立的線段並使用不同的材料。它適用於圓的段不跨越Z = 0的情況。我正在處理的問題更復雜，因爲線段將跳過Z = 0邊界，所以如果我嘗試在兩個線段中進行操作，最終會出現間隙。有沒有辦法只使用一行Geom，然後改變屬於負Z值的那部分行的顏色？我不確定這是否正確。謝謝！負三值的三個JS圓線幾何顏色

這裏是我到目前爲止的測試（用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>

更新。很好的作品：

來源

2016-12-11 rankind

我希望我能正確地得到你。您可以設置幾何圖形頂點的顏色，然後使用材料的vertexColors參數。

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例如

來源

2016-12-11 23:42:19 prisoner849

有了一些調整，我能夠這樣融入我的項目。完全是我想要的，謝謝！ – rankind

）歡迎您的工作:) – prisoner849

感謝，三js應用程序查看真正的小行星軌道。 :) http://rankinstudio.com/Asteroid_Orbit_View – rankind

負三值的三個JS圓線幾何顏色

回答

相關問題