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

UPD＃1 方法.computeLineDistances()已从THREE.Geometry()移至THREE.Line()（r94）

LineDashedMaterial - 在更改行长度时保持短划线相同的长度

1 个答案: