three.js 中线条的颜色

Question

我有这样的代码：

  const materialLinearInterpolation = new THREE.LineBasicMaterial({ color: 0x0000c9, linewidth: 1 })
  const pointsLinearInterpolation = []
  for (var i = 0; i < this.pointsCoordinatesLinearInterpolation.length; i++) {
    pointsLinearInterpolation.push(
      new THREE.Vector3(
        this.pointsCoordinatesLinearInterpolation[i].x,
        this.pointsCoordinatesLinearInterpolation[i].y,
        this.pointsCoordinatesLinearInterpolation[i].z
      )
    )
  }
  const geometryLinearInterpolation = new THREE.BufferGeometry().setFromPoints(pointsLinearInterpolation)
  this.lineLinearInterpolation = new THREE.Line(geometryLinearInterpolation, materialLinearInterpolation)

  this.scene.add(this.lineLinearInterpolation)

我需要为线条使用多种颜色，这样的配置可以吗？如果不行，我怎么画几条不同颜色的连线

Answer 1

如果您希望每个线段的颜色不同，则必须使用 THREE.LineSegment 和顶点颜色，如以下实例所示：

let camera, scene, renderer;

init();
render();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 3;

  scene = new THREE.Scene();

  const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(-1, 0, 0)]);

  const colors = [
    255, 255, 0, 255, 255, 0,
    0, 255, 255, 0, 255, 255
  ];

  geometry.setAttribute('color', new THREE.Uint8BufferAttribute(colors, 3, true));

  const material = new THREE.LineBasicMaterial({
    vertexColors: true
  });

  const lines = new THREE.LineSegments(geometry, material);
  scene.add(lines);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function render() {

  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>

改用 THREE.Line 会在线条部分之间产生颜色渐变，这通常是不需要的。

Answer 2

仅限 WebGL2.0 的解决方案，使用 flat 作为 vColor 通过使用 onBeforeCompile:

修改着色器来改变

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let grid = new THREE.GridHelper(10, 10, 0x7f7f7f, 0x444444);
grid.rotation.x = - Math.PI * 0.5;
scene.add(grid);

const vertCount = 11;
let c = [];
let g = new THREE.BufferGeometry().setFromPoints(new Array(vertCount).fill(0).map((p,idx) => {
  c.push(idx / (vertCount - 1), idx % 2, idx % 3);
  return new THREE.Vector3(((vertCount - 1) * -0.5) + idx, (Math.random() - 0.5) * 10, 0); 
}))
g.setAttribute("color", new THREE.Float32BufferAttribute(c, 3));

let m = new THREE.LineBasicMaterial({
  vertexColors: true,
  onBeforeCompile: shader => {
    shader.vertexShader = shader.vertexShader.replace(
      `#include <color_pars_vertex>`,
      `flat out vec3 vColor;`
    );
    console.log(shader.vertexShader);
    shader.fragmentShader = shader.fragmentShader.replace(
      `#include <color_pars_fragment>`,
      `flat in vec3 vColor;`
    );
    console.log(shader.fragmentShader);
  }
});
let l = new THREE.Line(g, m);
scene.add(l);

renderer.setAnimationLoop( _ => {
  renderer.render(scene, camera);
})

body{
  overflow: hidden;
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>

three.js 中线条的颜色

colors for lines in three.js

javascript

three.js