Options for line colors in three.js

Question

Options for line colors in three.js

Here is the code I currently have:

  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)

I am looking for a way to use different colors for multiple lines in this setup. If this is not possible, I would like to know how to draw several connected lines with different colors.

javascript three.js

Answer 1

Answer №1

To achieve a unique color for each line segment, it is necessary to utilize THREE.LineSegment along with vertex colors, as demonstrated in the live example below:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bca0baadad88f8e6f9fbf8e6f9">[email protected]</a>/build/three.min.js"></script>

Using THREE.Line instead could result in a color gradient between line segments, which may not always be desirable.

Answer 2

To achieve a unique color for each line segment, it is necessary to utilize THREE.LineSegment along with vertex colors, as demonstrated in the live example below:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bca0baadad88f8e6f9fbf8e6f9">[email protected]</a>/build/three.min.js"></script>

Using THREE.Line instead could result in a color gradient between line segments, which may not always be desirable.

Answer 3

Answer №2

Unique solution using WebGL2.0, implementing flat for the vColor varying by adjusting the shaders within the onBeforeCompile method:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6829e849393b6c6d8c7c5c6d8c7">[email protected]</a>/build/three.min.js"></script>

Answer 4

Unique solution using WebGL2.0, implementing flat for the vColor varying by adjusting the shaders within the onBeforeCompile method:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6829e849393b6c6d8c7c5c6d8c7">[email protected]</a>/build/three.min.js"></script>

Options for line colors in three.js

Answer №1

Answer №2

Similar questions

Error message: The function client.on is not defined as a valid function

drag and zoom feature similar to Google Maps

What is the best way to include a text input as the last option in a Select input form field?

Ensure the initial value in the dropdown menu is automatically set to the first value in VueJs

What makes running the 'rimraf dist' command in a build script essential?

Is it possible to use Ajax to prompt a pop-up window for basic authentication when logging in?

Navigating through cards in HTML: A guide to filtering techniques

JSON failing to show all values sent as a string

Tips on capturing a URL using JQuery

What are Fabric.js tools for "Drop Zones"?

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

In the process of making a request with axios in an express server

$scope.apply is triggering both "catch" and "then" handlers

The variables in Next.js reset every time I navigate to a new page

Issue with implementing bootbox and jQuery.validator for AJAX login form collaboration

Submitting form based on HTML select input issue

What's the simplest method for updating a single value within a nested JSON object using TypeScript?

ReactJS encountered an error: [function] is not defined, July 2017

The XML data is valid, however the responseXML property in the XMLHttpRequest response is null

Unable to retrieve JSON data from the remote URL