cannonjs with Three.js, связывающий тело с сеткой

Question

Я использую следующий код для создания двух сфер в cannonjs с помощью Three.js в качестве модуля рендеринга.

var world, mass, body, shape, timeStep=1/60, 
    camera, scene, renderer, geometry, material, mesh; 
    initThree(); 
    initCannon(); 
    animate(); 

    function initCannon() { 
     world = new CANNON.World(); 
     world.gravity.set(0,0,0); 
     world.broadphase = new CANNON.NaiveBroadphase(); 
     world.solver.iterations = 10; 

     geometry = new THREE.SphereGeometry(3); 
     material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); 
     mesh = new THREE.Mesh(geometry, material); 
     body = new CANNON.Body({mass:0.2}); 
     body.angularVelocity.set(0,5,0); 
     body.angularDamping = 0.9; 
     world.add(body); 
     scene.add(mesh); 

     geometry = new THREE.SphereGeometry(2); 
     material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }); 
     mesh = new THREE.Mesh(geometry,material); 
     body = new CANNON.Body({mass: 1}); 
     body.angularVelocity.set(0,10,0); 
     body.angularDamping = 0.5; 
     world.add(body); 
     scene.add(mesh); 
    } 

    function initThree() { 
     scene = new THREE.Scene(); 
     camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 100); 
     camera.position.z = 5; 
     scene.add(camera); 

     renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
    } 

    function animate() { 
     requestAnimationFrame(animate); 
     updatePhysics(); 
     render(); 
    } 

    function updatePhysics() { 
     // Step the physics world 
     world.step(timeStep); 
     // Copy coordinates from Cannon.js to Three.js 
     mesh.position.copy(body.position); 
     mesh.quaternion.copy(body.quaternion); 
    } 

    function render() { 
     renderer.render(scene, camera); 
    } 

В результате я получаю две сферы на дисплее, но только второе тело, объявленным в initCannon() одушевляет. Тело cannonjs каким-то образом не связано с сеткой Three.js. Я попробовал «body.mesh = mesh», но это не помогает.

Объявление для сетки было первоначально выполнено в initThree(), но я не считаю, что это имеет значение.

Что я делаю неправильно? Пожалуйста помоги. При необходимости запросите более подробную информацию.

Answer 1

Вы переписываете переменные. В начале вы объявляете переменную body, а затем вы говорите body = new CANNON.Body..., после чего вы используете одно и то же предложение для второй сферы, поэтому первая перезаписывается. Вы должны иметь переменную body2, переменную mesh2, чтобы избежать этого. Этот подход будет работать нормально, если вам нужны только два тела, но если вы планируете иметь больше, вам нужен другой подход: массивы. В массиве вы можете хранить все свои тела, а затем прокручивать их и обрабатывать каждый отдельно. Пример:

Здесь мы создаем 10 тел:

var bodies= []; //create the array 

for (var i = 0; i < 10; i++) { 
    bodies.push({ //insert into the array an object that contains the information for each body/mesh 
     body: new CANNON.Body({mass:0.2}), 
     mesh = new THREE.Mesh(geometry,material) 
    }) 
}; 

А потом мы их используем:

for (var i=0, l=bodies.length; i < l; i++) { //we loop through each body 
    var body = bodies[i]; //this will be the current body 
    //MOVE THE BODY AND UPDATE THE MESH HERE 
} 

Это было бы лучшим подходом. Он более удобен в обслуживании, и вы можете иметь столько тел, сколько может обрабатывать браузер. Если вам нужно только два, ваше самое быстрое исправление позволит добавить вторую переменную для второго тела и обработать ее отдельно.

EDIT: Наблюдать за этим: https://www.youtube.com/watch?v=tW6pmzd34Hc он также хранит круги в массиве. Надеюсь, это немного улучшится.