How to create an attraction point

[JSmithOner]

I'm trying to recreate the multiball object (but in 3D) as shown in this video. when you press your finger on a certain point the ball follow the specific direction. Only problem is I don't know how to perform that with cannon js. I've tried setting a gravity of 0 with a velocity without any success. I'm wondering if I shouldn't update only three js and get rid of cannon js on this part. Many thanks in advance (tell me if you prefer me using stackoverflow, I would'nt like to overflow your issue area). Thanks

ps: you can download the app on this page press "e" to play around with the object

[marcofugaro]

Check out the moon attractor example

[JSmithOner]

I've looked at the code and wasn't sure to understand everything. Basically I'm trying to get two things. First thing is to add velocity to the ball until a certain point (the touched point) and secondly having the object rotate around the center of the pressed point (in the app it's called mass-spring). For the first point I don't really see how to use your example, however I was able to set the direction via changing velocity on mouse pressed but the problem I get is the ball don't stop on the pressure point, it continues it's way. For the second point I guess I should make test experimenting based on this example except if there's a built-in mass-spring effect in Cannon.js, but I will have a look at it later, for the moment the first point is my goal. Many thanks in advance.

[JSmithOner]

here is another demo

[drcmda]

@JSmithOner https://twitter.com/0xca0a/status/1414971353766240261

i needed this as well and it was easier than i thought. it takes the current position and forces it by impulse towards the desired target, in this case 0/0/0.

applyForce(vec.copy(currentPosition).normalize().multiplyScalar(-force))

[JSmithOner]

@drcmda Thank you for your answer, unfortunately that didn't worked for me as I get strange results also the ball continues moving after the contact point. Here is the code I've made based on your example (this is on mousedown event)

//get the current mouse position normalized
const vec = new THREE.Vector3(mouse.x, mouse.y, 0.5);
const pos = new THREE.Vector3();
vec.unproject( camera );
vec.sub( camera.position ).normalize();
const distance = - camera.position.z / vec.z;
pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
//get the current cursor position (this is a group)
const x = pos.x - multiBall1.position.x;
const y = pos.y - multiBall1.position.y;
const cp = new THREE.Vector3(x, y, 20);
//apply your formula
multiBall1.ball1.userData.sphereBody.applyForce(cp.multiplyScalar(1000));

[BramGerrits]

I believe this example achieves the exact result you're looking for.

// Apply force to the point 0,0,0 for each sphere
// This should happen every step within your render loop/callback
sphereBodies.forEach((body) => {
    const force = new CANNON.Vec3()
    force.set(-body.position.x, -body.position.y, -body.position.z).normalize()
    force.scale(9.8, body.force)
    body.applyLocalForce(force)
})