three.js 물리엔진 라이브러리 cannon.js

http://schteppe.github.io/cannon.js/docs/

cannon

three.js에서 물리엔진을 사용하기 해서 cannon.js 라이브러리를 사용하자.

 

import * as CANNON from 'cannon-es';

...

const cannonWorld = new CANNON.World();
cannonWorld.gravity.set(0, -9.8, 0);

// Mesh
const floorMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 10), 
    new THREE.MeshStandardMaterial({
        color: 'slategray'
    })
);
floorMesh.rotation.x = -Math.PI / 2;
scene.add(floorMesh);

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshStandardMaterial({
    color: 'seagreen'
});
const mesh = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(mesh);

cannon-es 라이브러리를 사용하여 물리가 적용되는 world를 생성하고, 이 world에 gravity를 설정해준다.

현재는 물리환경만 구축하였고, 여기에 생성되는 Mesh들에는 아직 물리가 적용되도록 설정되지 않고 렌더링 처리만 되기 때문에 물리엔진이 적용되지 않는다.