How to achieve the gradual disappearance of the line - three.js

Question

I want to achieve the effect of the following figure：
Initially I implemented it using the GridHelperclass, but I can't achieve the effect.
Later I used the following code to achieve：
var materialcolor1 = new THREE.MeshBasicMaterial({
color: color1,
vertexColors: THREE.VertexColors,
linewidth: 30,
linecap: 'round',
linejoin: 'round',
transparent: true,
opacity: 0.5，
blending: THREE.MultiplyBlending});
var depthMaterial = new THREE.MeshDepthMaterial();
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-halfSize, 0, k));
geometry.vertices.push(new THREE.Vector3(halfSize, 0, k));
var line = new THREE.SceneUtils.createMultiMaterialObject(geometry,[material, depthMaterial]);
As a result, no lines are visible in the scene.
Where is the problem with my code? Or is there another effective way to do this?

Answer 1

Two approaches of how you can achieve the desired result:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(10, 10, 20);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// use attribute
var lineGeom = new THREE.BufferGeometry().setFromPoints(
[
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 10, 0)
]
);
lineGeom.addAttribute("opacity", new THREE.BufferAttribute(new Float32Array([1, 0]), 1));
var lineMat = new THREE.ShaderMaterial({
vertexShader: `
attribute float opacity;
varying float vOpacity;
void main(){
vOpacity = opacity;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`,
fragmentShader: `
varying float vOpacity;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, vOpacity);
}
`,
transparent: true
});
var line = new THREE.Line(lineGeom, lineMat);
scene.add(line);
// use distance
var grid = new THREE.GridHelper(20, 20, "yellow", "blue");
grid.material = new THREE.ShaderMaterial({
vertexShader: `
varying vec3 vColor;
varying vec3 vPosition;
void main(){
vColor = color;
vPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`,
fragmentShader: `
varying vec3 vColor;
varying vec3 vPosition;
void main() {
float opacity = smoothstep(-10., 10., vPosition.z);
// float opacity = 1. - (10. - vPosition.z) / 20.; // another option
gl_FragColor = vec4(vColor, opacity);
}
`,
vertexColors: THREE.VertexColors,
transparent: true
});
scene.add(grid);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>