I have been working with code from a repository called scribble, which uses three.js r87. In trying to update the code to three.js r144, I followed the steps outlined in the Converting THREE.Geometry to THREE.BufferGeometry tutorial. While one function updated smoothly, the other is causing me some trouble.
It was relatively easy to upgrade the mousePressed function:
function mousePressed() {
const point = new THREE.Vector3(mouseX, mouseY, 0);
let points = [];
points.push(point);
let geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
scene.add(line);
selected = line;
}
However, I am facing issues with updating mouseDragged(), and I can't seem to figure out why it's not functioning as expected:
function mouseDragged() {
const line = selected;
const point = new THREE.Vector3(mouseX, mouseY, 0);
const oldgeometry = line.geometry;
let newgeometry = new THREE.BufferGeometry();
let positions = oldgeometry.attributes.position.array;
for (let i = 0; i < positions.length; i += 3) {
const v = new THREE.Vector3(positions[i], positions[i + 1], positions[i + 2]);
positions[i] = v.x;
positions[i + 1] = v.y;
positions[i + 2] = v.z;
}
positions.push(point); // Shouldn't adding the new point suffice?
newgeometry.attributes.position.needsUpdate = true;
line.geometry = newgeometry;
scene.add(line);
selected = line;
}
Any help or insights would be greatly appreciated! Thank you!