Change the color of the line segment connecting two points on a line

Question

Change the color of the line segment connecting two points on a line

In my three.js project, I am working on drawing a line based on an array of vertices. One challenge I am facing is setting the color of the line to a specific value between two points along the line that are not actual vertices. These two points exist at a certain distance from the line's origin - for example, I want to change the color between 50 and 100 units along a line that is 500 units long. How can I achieve this?

Although using vertexColors: THREE.VertexColors allows me to specify colors between line vertices, it does not help in coloring between non-vertex points. It seems like I might need to add these two points as additional vertices, but then comes the question of how to determine their position with XYZ coordinates along the line.

If you have any suggestions or hints on how I could accomplish this, I would greatly appreciate your input!

javascript three.js

Answer 1

Answer №1

To customize the THREE.LineDashedMaterial(), you can utilize the .onBeforeCompile() method:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 250, 500);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.GridHelper(500, 10));

var geom = new THREE.BufferGeometry().setFromPoints(
  [
    new THREE.Vector3(-250, 0, 0),
    new THREE.Vector3(250, 0, 0)
  ]
);

var mat = new THREE.LineDashedMaterial({
  color: "red"
});
var uniforms = {
  segmentStart: {
    value: 50
  },
  segmentEnd: {
    value: 100
  },
  segmentColor: {
    value: new THREE.Color("yellow")
  }
}
mat.onBeforeCompile = shader => {
  shader.uniforms.segmentStart = uniforms.segmentStart;
  shader.uniforms.segmentEnd = uniforms.segmentEnd;
  shader.uniforms.segmentColor = uniforms.segmentColor;
  shader.fragmentShader = `
    uniform float segmentStart;
    uniform float segmentEnd;
    uniform vec3 segmentColor;
  ` + shader.fragmentShader; // add uniforms
  shader.fragmentShader = shader.fragmentShader.replace(
    `if ( mod( vLineDistance, totalSize ) > dashSize ) {
discard;
}`, // remove the part for dash
    ``
  );
  shader.fragmentShader = shader.fragmentShader.replace(
    `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
    `gl_FragColor = vec4( outgoingLight, diffuseColor.a );
    if (vLineDistance >= segmentStart && vLineDistance <= segmentEnd) gl_FragColor.rgb = vec3(1, 1, 0);
    `
  ); // add showing of a segment


  console.log(shader.fragmentShader);

}

var line = new THREE.Line(geom, mat);
line.computeLineDistances();
scene.add(line);

var clock = new THREE.Clock();

renderer.setAnimationLoop(() => {

  uniforms.segmentEnd.value = 250 + Math.sin(clock.getElapsedTime()) * 150;
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Answer 2

To customize the THREE.LineDashedMaterial(), you can utilize the .onBeforeCompile() method:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 250, 500);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.GridHelper(500, 10));

var geom = new THREE.BufferGeometry().setFromPoints(
  [
    new THREE.Vector3(-250, 0, 0),
    new THREE.Vector3(250, 0, 0)
  ]
);

var mat = new THREE.LineDashedMaterial({
  color: "red"
});
var uniforms = {
  segmentStart: {
    value: 50
  },
  segmentEnd: {
    value: 100
  },
  segmentColor: {
    value: new THREE.Color("yellow")
  }
}
mat.onBeforeCompile = shader => {
  shader.uniforms.segmentStart = uniforms.segmentStart;
  shader.uniforms.segmentEnd = uniforms.segmentEnd;
  shader.uniforms.segmentColor = uniforms.segmentColor;
  shader.fragmentShader = `
    uniform float segmentStart;
    uniform float segmentEnd;
    uniform vec3 segmentColor;
  ` + shader.fragmentShader; // add uniforms
  shader.fragmentShader = shader.fragmentShader.replace(
    `if ( mod( vLineDistance, totalSize ) > dashSize ) {
discard;
}`, // remove the part for dash
    ``
  );
  shader.fragmentShader = shader.fragmentShader.replace(
    `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
    `gl_FragColor = vec4( outgoingLight, diffuseColor.a );
    if (vLineDistance >= segmentStart && vLineDistance <= segmentEnd) gl_FragColor.rgb = vec3(1, 1, 0);
    `
  ); // add showing of a segment


  console.log(shader.fragmentShader);

}

var line = new THREE.Line(geom, mat);
line.computeLineDistances();
scene.add(line);

var clock = new THREE.Clock();

renderer.setAnimationLoop(() => {

  uniforms.segmentEnd.value = 250 + Math.sin(clock.getElapsedTime()) * 150;
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Change the color of the line segment connecting two points on a line

Answer №1

Similar questions

Retrieving a value using forEach in protractor - Dealing with closures

Using NodeJS to retrieve the mean price from the OPSkins pricelist

Upgrade to the latest Gulp version and transition away from using the gulp.start function

I attempted to retrieve a card using two nested maps, but unfortunately the data did not display as expected

Closing the Material UI Drawer

Generate a circular shape wherever the mouse is moved

Error: Attempting to access a property of an undefined value, please verify the key name is

Stopping the timer with clearInterval isn't functioning as expected

Use the selector on elements that have been previously chosen

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

A guide on harnessing the power of NPM modules

Assigning a value to a cell depending on a specific condition

Is it possible to maintain the sidebar while eliminating the scrolling JavaScript?

Harmonizing Express (Passport) with AngularJS Routing

Configuring Angular 6+ Applications at Run Time

How does the 'snack bar message' get automatically assigned without being explicitly defined in the 'data' function?

A guide to implementing daily function calls for a week utilizing the @nestjs/scheduler module

Enhance your JavaScript skills by deserializing objects and seamlessly integrating new methods

Seeking guidance on navigating a Bootstrap tabbed navigation menu with nested dropdowns using previous and next buttons

Is there a way to embed a JS media query inside the sticky navbar function for both the onscroll and onclick events?