如何实现线的逐渐消失

Question

我要达到下图的效果：

最初，我使用GridHelperclass来实现它，但是我无法达到效果。

稍后我使用以下代码来实现：

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]);

因此，在场景中看不到任何线条。 我的代码在哪里出问题？还是有另一种有效的方法来做到这一点？

Answer 1

两种方法来实现所需的结果：

function perform() {
  return getCat().pipe(
    mergeMap((cat) => concat(
        of(cat),
        petCat(cat).pipe(
          mergeMap((mood) => concat(
            of(mood),
            getFood(cat, mood)
          ))
        )
      )
    ),
  )
}

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;
}