Question

此虚线的长度为1000，其中dashSize = 0.2，两个顶点都在屏幕之外，线条间隙变得难看，见下文：

版本是r85。代码：

  initGeometry(){
    this.geometry=new THREE.TubeBufferGeometry(this.curve,this.segments,this.size/2,this.radialSegments,false);
    let vertices=(()=>{
        let ss=this.segments+1;
        let ws=this.radialSegments+1;
        let temp=new Float32Array(ss*ws*3);
        for(let i=0;i<ss;i++){
            let t=i/(ss);
            let x=this.curve.getPoint(t).x;
            let y=this.curve.getPoint(t).y;
            let z=this.curve.getPoint(t).z;
            for(let j=0;j<ws;j++) {
                temp[(i*ws+j)*3] = x;
                temp[(i*ws+j)*3+ 1] =y;
                temp[(i*ws+j)*3+ 2] = z;
            }
        }
        return temp;
    })();
    let distances=(()=>{
        let ss=this.segments+1;
        let ws=this.radialSegments+1;
        let temp=new Float32Array(ss*ws);
        for(let i=0;i<ss;i++){
            if(i===0){
                for(let j=0;j<ws;j++){
                    temp[i*ws+j]=0;
                }
            }else {
                let dx = vertices[i*ws * 3] - vertices[(i - 1)*ws * 3];
                let dy = vertices[i*ws * 3 + 1] - vertices[(i - 1)*ws * 3 + 1];
                let dz = vertices[i*ws * 3 + 2] - vertices[(i - 1)*ws * 3 + 2];
                let len = Math.sqrt(dx * dx + dy * dy + dz * dz);
                for(let j=0;j<ws;j++){
                    temp[i*ws+j]=temp[(i-1)*ws] + len;
                }
            }
        }
        return temp;
    })();
    this.geometry.addAttribute('center',new THREE.BufferAttribute(vertices,3,false).setDynamic(false));
    this.geometry.addAttribute('distance',new THREE.BufferAttribute(distances,1,false).setDynamic(false));
}
initBody(){
    this.initGeometry();
    this.material=new THREE.MeshBasicMaterial({color:this.color});
    this.maskMaterial=new THREE.ShaderMaterial({
        uniforms: {
            color: {value: this.color},
            dashSize: {value: this.dashSize}
        },
        vertexShader: vTubeDashedShader,
        fragmentShader: fTubeDashedShader,
        depthTest:false,
        transparent:true
    });
    this.body=new THREE.SceneUtils.createMultiMaterialObject(this.geometry,[this.material,this.maskMaterial]);
    this.body.children.forEach((c)=>{c.raycast=()=>{};});
}

为了支持线宽，我尝试使用tubebuffergeometry和虚线着色器材质，只有1段，所有顶点都在屏幕外，仍然遇到这个问题，这里是着色器代码：

{{1}}

绘制虚线管的代码：

{{1}}

只有当这条线的顶点在屏幕之外时才会发生。如果缩放相机以确保所有顶点都在屏幕上，它再次看起来不错。我不想增加顶点或段来解决这个问题，我该怎么办？

three.js：当虚线的顶点离开屏幕时，线间隙是flurring

0 个答案: