CODEWITHSUNDEEP
javascriptthree.js
Nikolay Pavlin
Nikolay Pavlin

Reputation: 365

Change three.js Line material runtime

I have Line object with THREE.LineBasicMaterial, then i'am trying to change material:

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()

But nothing happens, the line is still not dotted, any ideas?

Upvotes: 1

Views: 374

Answers (1)

prisoner849
prisoner849

Reputation: 17586

Works as expected:

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>

Upvotes: 1

Related Questions