how can we connect two speheres using a line? I would like it to act like to balls connected with a rope or something elastic Can anyone point to some samples?
4 Answers
To draw an arrow between two points is straightforward:
var startPoint = new THREE.Vector3(10,20,30);
var endPoint = new THREE.Vector3(70,80,90);
var direction = new THREE.Vector3().subVectors(endPoint, startPoint).normalize();
var arrow = new THREE.ArrowHelper(direction, startPoint, startPoint.distanceTo(endPoint), 0xCC0000 );
scene.add(arrow);
To draw just a line is a bit trickier:
var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push( new THREE.Vector3(10,20,30), new THREE.Vector3(70,80,90) );
lineGeometry.computeLineDistances();
var lineMaterial = new THREE.LineBasicMaterial( { color: 0xCC0000 } );
var line = new THREE.Line( lineGeometry, lineMaterial );
scene.add(line);
1 Comment
Suisse
Geometry was removed from THREE. How to achieve this with BufferGeoemtry?
What I was referring to requires a physics engine.
Examples can be found here http://schteppe.github.io/cannon.js/
Comments
If you want to give the "elastic feel" for a line between two objects, you could use a BezierCurve. There are few different types of them included in Three.js.
For example, look at this link for more information.
I didn't quite understood what you've meant in your own answer, about physics engines, but if you intended producing a horizontal rope like line, you'd better use a few THREE.Lines connected and activate a physics engine, such as cannon.js. I think you'd better use THREEx.cannon.js for easy integration between the two.
Comments
Straight red line example with BufferGeometry
Threejs r125 update after, see details
let geometry = new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3(-5, 5, 0),
new THREE.Vector3(5, 5, 0)
])
let line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff0000 }))
scene.add(line)
