更改三.js 线材运行时

Question

我有带有 THREE.LineBasicMaterial 的 Line 对象，然后我正在尝试更改材质：

material = new THREE.LineDashedMaterial({
    dashSize: 5,
    gapSize: 5,
  })

  line.material = material

  line.material.needsUpdate = true
  line.geometry.uvsNeedUpdate = true
  line.geometry.verticesNeedUpdate = true

  line.computeLineDistances()

但是没有任何反应，线仍然没有虚线，有什么想法吗？

Answer 1

按预期工作：

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000); camera.position.set(3, 5, 8); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); var controls = new THREE.OrbitControls(camera, renderer.domElement); scene.add(new THREE.GridHelper(10, 10)); var pts = []; var ptsCount = 10; for (let i = 0; i < ptsCount; i++) { pts.push(new THREE.Vector3( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).multiplyScalar(10)) } var geom = new THREE.BufferGeometry().setFromPoints(pts); var mat = new THREE.LineBasicMaterial({ color: "yellow" }); var line = new THREE.Line(geom, mat); scene.add(line); btnDashed.addEventListener("click", event => { let mat = new THREE.LineDashedMaterial({ color: (Math.random() * 0x888888) + 0x888888, dashSize: 0.5 + Math.random() * 0.5, gapSize: Math.random() * 0.5 }); line.computeLineDistances(); line.material = mat; }) renderer.setAnimationLoop(() => { renderer.render(scene, camera) })

 body { overflow: hidden; margin: 0; }

 <script src="https://threejs.org/build/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <button id="btnDashed" style="position: absolute;"> Make dashed </button>