CODEWITHSUNDEEP
javascriptthree.js
user2324723
user2324723

Reputation: 113

How to chain two geometric objects using three.js

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?

Upvotes: 0

Views: 2383

Answers (4)

Fatih Mert Doğancan
Fatih Mert Doğancan

Reputation: 1092

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)

Upvotes: 0

Meir Elad
Meir Elad

Reputation: 75

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.

Upvotes: 0

user2324723
user2324723

Reputation: 113

What I was referring to requires a physics engine.

Examples can be found here http://schteppe.github.io/cannon.js/

Upvotes: 0

Stemkoski
Stemkoski

Reputation: 9045

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);

Upvotes: 2

Related Questions