Question

我一直在测试一些关于如何让圆圈为具有正Z值的圆的部分具有不同颜色的想法。我尝试了一种方法，创建两个单独的线段并使用不同的材料。如果圆圈具有不跳过Z = 0的段，则它起作用。我正在处理的问题更复杂，因为线段将跳过Z = 0边界，所以如果我尝试在两个段中进行操作，我最终会出现间隙。有没有办法只使用一行Geom，然后改变行为负Z值的部分的颜色？我不确定这是正确的做法。谢谢！

以下是我到目前为止的测试（使用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>

使用以下答案进行更新。效果很好：

Answer 1

我希望我能帮到你。您可以设置几何体的顶点颜色，然后使用材质的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示例

负值的三个JS圆线Geom颜色

1 个答案: