改三.js 线材运行时答案

【问题标题】：Change three.js Line material runtime改三.js 线材运行时
【发布时间】：2020-02-22 01:23:55
【问题描述】：

我有带有 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()

但是什么都没有发生，线仍然没有虚线，有什么想法吗？

【问题讨论】：

也许你的行比.dashSize减去.gapSize的值短？
如果我从一开始就让它点缀——一切都很好......

标签： javascript three.js

【解决方案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>

【讨论】：