LineDashedMaterial - 在更改行长度时保持破折号的长度相同

Question

我创建了一条虚线，它随时间改变位置和长度。要更新它的位置，我正在调整它的几何对象的顶点。这个效果很好，除非线条变得更长或更短，破折号也变得更长或更短，尽管以绝对单位定义，而不是相对于线的长度。

我已经在初始化时调用了geometry.computeLineDistances()（我必须这样做才能让工作变得有用），我期望如果我在每个渲染循环中简单地调用它，它们会保持正确的尺度，但是不起作用。

有什么我可以做的保持破折号固定的长度，因为线更改长度？

这里是一个说明该问题的的jsfiddle（下面的代码）：https://jsfiddle.net/fyr519L8/

var camera, scene, renderer, geometry, material, mesh; 

init(); 
animate(); 

function init() { 
    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.set(0, 30, 0); 
    camera.lookAt(scene.position); 
    scene.add(camera); 

    geometry = new THREE.Geometry(); 
    geometry.vertices.push(
     new THREE.Vector3(0, 0, 0), 
     new THREE.Vector3(0, 0, 15)); 
    geometry.computeLineDistances(); 

    material = new THREE.LineDashedMaterial({ 
     color: 0x000000, 
     dashSize: 1, 
     gapSize: 1, 
     linewidth: 1 
    }); 

    mesh = new THREE.Line(geometry, material); 
    scene.add(mesh); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 
} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    geometry.vertices[0].z = Math.sin(Date.now()/1000) * 10; 
    geometry.verticesNeedUpdate = true; 

    renderer.render(scene, camera); 
} 

Answer 1

如果我给你正确的，那么你可以这样做：

function render() { 
    geometry.vertices[0].z = Math.sin(Date.now()/1000) * 10; 
    geometry.verticesNeedUpdate = true; 

    geometry.computeLineDistances(); // re-calculate line distances 
    geometry.lineDistancesNeedUpdate = true; 

    renderer.render(scene, camera); 
}