Создайте веревку в Three.js, используя физику из Ammo.js или Cannon.js

Question

Я пытался создать в three.js веревку, висящую на точке, используя любую из библиотек трехмерной физики (ammo.js, cannon.js), но единственная, которую я успешно сделал, - это (2D)verlet.js.

Мне действительно нужно и я хочу создать его в 3D, потому что мне нужно, чтобы две веревки были прикреплены к средней точке, чтобы я мог показать неустойчивость средней точки при приложении нагрузки. Нечто похожее как на прикрепленном изображении. введите описание изображения здесь

Честно говоря, я не знаю, с чего начать, у меня есть некоторый опыт работы с Three.js, но не с ammo.js или cannon.js. До сих пор я пытался понять коды для примеров в этих ссылках безуспешно.

http://schteppe.github.io/cannon.js/demos/constraints.html

https://threejs.org/examples/

Я даже пытался сделать веревку, используя функцию пружины из cannon.js, но вы можете видеть, что мой пример не увенчался успехом.

Может кто-нибудь помочь мне или направить меня в правильном направлении, чтобы начать мою задачу?

Вот код, который я начал писать с использованием Cannon.js:

 function initCannon() 
{
     world = new CANNON.World();
     world.gravity.set(.2,-10,.2);
     world.broadphase = new CANNON.NaiveBroadphase();
     world.solver.iterations = 10;        
        var mass = 1;
        var damping = 1; 
        // STATIC SPHERE
        var sphereShape = new CANNON.Sphere(new CANNON.Vec3(1,1,1));
        mass = 0;
        sphereBody = new CANNON.Body({ mass: 0 });
        sphereBody.addShape(sphereShape);
        sphereBody.position.set(.5,8,.5);
        world.addBody(sphereBody); 
        // DINAMIC SPHERE 1
        var shape = new CANNON.Sphere(new CANNON.Vec3(1,1,1));
        body = new CANNON.Body({ mass: 1 });
            body.addShape(shape);
            body.angularDamping = damping;
            body.position.set(0,8,0); 
            world.addBody(body);            
        // DINAMIC SPHERE 2
        var shape2 = new CANNON.Sphere(new CANNON.Vec3(1,1,1));
        body2 = new CANNON.Body({ mass: 1 });
            body2.addShape(shape2);
            body2.angularDamping = damping;
            body2.position.set(0,8,0);
            world.addBody(body2);
        // DINAMIC  SPHERE 3
        var shape3 = new CANNON.Sphere(new CANNON.Vec3(1,1,1));
        body3 = new CANNON.Body({ mass: 1 });
            body3.addShape(shape3);
            body3.angularDamping = damping;
            body3.position.set(0,8,0); 
            world.addBody(body3);                   
        var size = 1;
        var rebote = 1; 
        var spring = new CANNON.Spring(body,sphereBody,{
            localAnchorA: new CANNON.Vec3(0,size,0),localAnchorB: new CANNON.Vec3(0,0,0),
            restLength : 0, stiffness : 50, damping : rebote, });           
        var spring2 = new CANNON.Spring(body2, body,{
            localAnchorA: new CANNON.Vec3(0,size,0),localAnchorB: new CANNON.Vec3(0,0,0),
            restLength : 0, stiffness : 50, damping : rebote, });           
        var spring3 = new CANNON.Spring(body3, body2,{
            localAnchorA: new CANNON.Vec3(0,size,0),localAnchorB: new CANNON.Vec3(0,0,0),
            restLength : 0, stiffness : 50, damping : rebote, });
        world.addEventListener("postStep",function(event){ spring.applyForce(); });
        world.addEventListener("postStep",function(event){ spring2.applyForce(); });
        world.addEventListener("postStep",function(event){ spring3.applyForce(); });    
} 
function initThree() 
{
          scene = new THREE.Scene();                            
          camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );
          camera.position.y = 3;camera.position.z = 15;
          scene.add( camera );
            controls = new THREE.TrackballControls( camera );
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;
            controls.keys = [ 65, 83, 68 ];
          var material_wire = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
        var sphere_size = .8; 
        var segmentos = 5;
        geometry_sphere = new THREE.SphereGeometry( sphere_size, segmentos, segmentos );
        sphere = new THREE.Mesh( geometry_sphere, material_wire );
        scene.add( sphere );    
        geometry = new THREE.SphereGeometry( sphere_size, segmentos,segmentos ); // RRT DEFINE TAMANO DE CUBE
        mesh = new THREE.Mesh( geometry, material_wire );
        scene.add( mesh );          
        mesh2 = new THREE.Mesh( geometry, material_wire );
        scene.add( mesh2 );             
        mesh3 = new THREE.Mesh( geometry, material_wire );
        scene.add( mesh3 );     
          renderer = new THREE.CanvasRenderer();
          renderer.setSize( window.innerWidth, window.innerHeight );
          document.body.appendChild( renderer.domElement );
}         
      function animate() {
          requestAnimationFrame( animate );
          controls.update();
          updatePhysics();
          render();
      }
      function updatePhysics() {
          // Step the physics world
          world.step(timeStep);
            sphere.position.copy(sphereBody.position);
            mesh.position.copy(body.position); // HACE QUE SE VEA
            mesh2.position.copy(body2.position);
            mesh3.position.copy(body3.position);
      }
      function render() {
          renderer.render( scene, camera );
      }