How to update MeshLine line coordinates? - three.js

Question

When I try to update mesh line points(replace it with new) I got some weird geometry - like thin line
https://jsfiddle.net/benderlio/cL2810or/30/
var line2d = new THREE.Line3(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(100, 100, 0)
)
var center = line2d.getCenter();
var curve = new THREE.QuadraticBezierCurve3(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(center.x, center.y, 0.5),
new THREE.Vector3(100, 200, 0)
);
var points = curve.getPoints(50);
var geometry = new THREE.Geometry().setFromPoints(points);
var newMeshLine = new MeshLine();
newMeshLine.setGeometry(geometry);
console.log('!!!',meshLine.geometry.attributes.position.array, newMeshLine.geometry.attributes.position.array);
meshLine.geometry.attributes.position.array = newMeshLine.geometry.attributes.position.array
meshLine.geometry.attributes.position.needsUpdate = true
If you click update button and turn the line you will see that it is weird.
The problem is in update function, but not sure where exactly
Thanks

Answer 1

MeshLine has several attributes that you'd need to modify in order to successfully update to a new geometry, it's not just position. It would be much simpler if you just use the .setGeometry() method again on the same object, and let it take care of updating its geometry, instead of doing it manually:
var points = curve.getPoints(50);
var geometry = new THREE.Geometry().setFromPoints(points);
meshLine.setGeometry(geometry);
See the new simplified updateGeometry function below, I also had to make the meshLine variable global on line 3 to get access to it across functions.
var scene, renderer, camera;
var controls;
var meshLine;
init();
animate();
document.querySelector("#update").addEventListener("click",()=>{
updateGeometry()
})
function makeLine (meshLine, colorName, width) {
let material = new MeshLineMaterial({
useMap: false,
color: new THREE.Color(colorName),
opacity: 1,
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
sizeAttenuation: false,
lineWidth: width,
near: camera.near,
far: camera.far
});
let mesh = new THREE.Mesh (meshLine.geometry, material)
return mesh;
}
function MyAxesHelper(size = 10, width = 5) {
let axes = new THREE.Object3D();
let geometry;
meshLine = new MeshLine();
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3());
geometry.vertices.push(new THREE.Vector3(size, 0, 0));
meshLine.setGeometry(geometry);
axes.add (makeLine (meshLine, 'red', width))
meshLine = new MeshLine();
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3());
geometry.vertices.push(new THREE.Vector3(0, size, 0));
meshLine.setGeometry(geometry);
axes.add (makeLine (meshLine, 'green', width))
meshLine = new MeshLine();
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3());
geometry.vertices.push(new THREE.Vector3(0,0,size));
meshLine.setGeometry(geometry);
axes.add (makeLine (meshLine, 'blue', width))
return axes;
}
function updateGeometry() {
var line2d = new THREE.Line3(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(100, 100, 0)
)
var center = line2d.getCenter();
var curve = new THREE.QuadraticBezierCurve3(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(center.x, center.y, 0.5),
new THREE.Vector3(100, 200, 0)
);
var points = curve.getPoints(50);
var geometry = new THREE.Geometry().setFromPoints(points);
meshLine.setGeometry(geometry);
}
function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x888888);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = false;
controls.autoRotateSpeed = .1;
controls.enablePan = false;
var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
scene.add(gridXZ);
window.addEventListener('resize', onWindowResize, false);
/////////////////////////////////////////
//scene.add(MyAxesHelper(50, 35.3));
// make a circle
meshLine = new MeshLine();
var line2d = new THREE.Line3(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(100, 100, 0)
)
var center = line2d.getCenter();
var curve = new THREE.QuadraticBezierCurve3(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(center.x, center.y, 0.5),
new THREE.Vector3(100, 100, 0)
);
var points = curve.getPoints(50);
geometry = new THREE.Geometry().setFromPoints(points);
meshLine.setGeometry(geometry);
let material = new MeshLineMaterial({
color: new THREE.Color('white'),
transparent:true,
opacity: 1,
repeat: new THREE.Vector2(16,1),
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
sizeAttenuation: false,
lineWidth: 40,
near: camera.near,
far: camera.far
});
let mesh = new THREE.Mesh (meshLine.geometry, material)
scene.add (mesh)
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
#info {
position: absolute;
top: 2%;
width: 100%;
padding: 10px;
text-align: center;
color: #ffff00
}
#update{
position:absolute;
top:20px;
left:20px;
z-index:1000;
}
body {
margin: 0;
overflow: hidden;
}
<div id="info">MeshLine (AxesHelper)
</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/spite/THREE.MeshLine/master/src/THREE.MeshLine.js"></script>
<button id="update">Update</button>