I have a mesh which has line segments added to it which help define its shape when rendered. i use the following code to add the lines:
<code> // Check to see if the edges have already been calculated
if (child.children[0] instanceof THREE.LineSegments) {
// Set the material of the lineSegments.
let childLineSegments: any = child.children[0];
childLineSegments.material = threeLineBasicMaterial;
}
else {
// Remove any existing children.
child.children = [];
// Add the edges.
const edges = new THREE.EdgesGeometry(child.geometry, this.materialLineBreakAngle);
const lines = new THREE.LineSegments(edges, threeLineBasicMaterial);
child.add(lines);
};
</code>
<code> // Check to see if the edges have already been calculated
if (child.children[0] instanceof THREE.LineSegments) {
// Set the material of the lineSegments.
let childLineSegments: any = child.children[0];
childLineSegments.material = threeLineBasicMaterial;
}
else {
// Remove any existing children.
child.children = [];
// Add the edges.
const edges = new THREE.EdgesGeometry(child.geometry, this.materialLineBreakAngle);
const lines = new THREE.LineSegments(edges, threeLineBasicMaterial);
child.add(lines);
};
</code>
// Check to see if the edges have already been calculated
if (child.children[0] instanceof THREE.LineSegments) {
// Set the material of the lineSegments.
let childLineSegments: any = child.children[0];
childLineSegments.material = threeLineBasicMaterial;
}
else {
// Remove any existing children.
child.children = [];
// Add the edges.
const edges = new THREE.EdgesGeometry(child.geometry, this.materialLineBreakAngle);
const lines = new THREE.LineSegments(edges, threeLineBasicMaterial);
child.add(lines);
};
I now want to morph the mesh. However, I recognise that the line segments were calculated before the morph and so as the mesh morphs, the line segments remain in their original position.
I have tried to update the line segemnts by applying the following simple function which is called as the morph influence values change:
<code> private updateEdges(mesh: THREE.Mesh): void {
if (mesh instanceof THREE.Mesh) {
// Check to see if the edges have already been calculated
if (mesh.children[0] instanceof THREE.LineSegments) {
// Get the lineSegments.
let childLineSegments: any = mesh.children[0];
// Save the material.
const lineMaterial = childLineSegments.material;
// Remove any existing children.
mesh.children = [];
// Add the edges.
const edges = new THREE.EdgesGeometry(mesh.geometry, this.materialLineBreakAngle);
const lines = new THREE.LineSegments(edges, lineMaterial);
mesh.add(lines);
};
};
};
</code>
<code> private updateEdges(mesh: THREE.Mesh): void {
if (mesh instanceof THREE.Mesh) {
// Check to see if the edges have already been calculated
if (mesh.children[0] instanceof THREE.LineSegments) {
// Get the lineSegments.
let childLineSegments: any = mesh.children[0];
// Save the material.
const lineMaterial = childLineSegments.material;
// Remove any existing children.
mesh.children = [];
// Add the edges.
const edges = new THREE.EdgesGeometry(mesh.geometry, this.materialLineBreakAngle);
const lines = new THREE.LineSegments(edges, lineMaterial);
mesh.add(lines);
};
};
};
</code>
private updateEdges(mesh: THREE.Mesh): void {
if (mesh instanceof THREE.Mesh) {
// Check to see if the edges have already been calculated
if (mesh.children[0] instanceof THREE.LineSegments) {
// Get the lineSegments.
let childLineSegments: any = mesh.children[0];
// Save the material.
const lineMaterial = childLineSegments.material;
// Remove any existing children.
mesh.children = [];
// Add the edges.
const edges = new THREE.EdgesGeometry(mesh.geometry, this.materialLineBreakAngle);
const lines = new THREE.LineSegments(edges, lineMaterial);
mesh.add(lines);
};
};
};
After calling this function I then render the scene again. Unfortunately this didn’t update the rendered line segments as I had expected, and it wasn’t very performant.
Can anyone please suggest where I am going wrong?