How to draw a line over any shape in threejs?

272 Views Asked by At

let's say i have a geometric shape (could be of any shape) or glb model, what i'm trying a achieve is to draw a line over that shape

what i tried is, got the vertices for the line geometry manually from the BufferGeometry.attribute.position.array

const boxGeometry = new THREE.BoxGeometry(1.5,1.5,1.5,2,2,2);
const material = new THREE.MeshBasicMaterial({
  color:0xffffff,
  wireframe:true
});
const mesh = new THREE.Mesh(boxGeometry,material);
scene.add(mesh);

const lineGeometry = new THREE.BufferGeometry();
const lineGeometryVertices = new Float32Array([
  0,-0,.75,
  .75,-0,.75,
  .75,-0,-0
]);


const lineBufferAttribute = new THREE.BufferAttribute(lineGeometryVertices,3);
lineGeometry.setAttribute("position",lineBufferAttribute);

const lineMaterial = new THREE.LineBasicMaterial({
  color:0xff0000,
  linewidth:3
})

const line = new THREE.Line(lineGeometry,lineMaterial);
scene.add(line);

I got this as result, which is what i hoping to achieve

But i got the vertices for the line geometry manually as i said previously, what i want to achieve is

  1. How to draw a line over any shape (the shape could be regular shape like cube or sphere or it could be a irregular shape like a terrain)?

I think figuring out how to get the vertices for the line geometry that needs to go over the geometric shape is the key or it could be done some other.

The problem here is that drawing a line geometry over any shape is pretty ease once you got the vertices, but the hard task is to get the vertices i need for the line geometry, that is what i don't know how to do it.

I don't know how, please help me solve this issue.

0

There are 0 best solutions below