{"id":15826789,"url":"https://github.com/victor-lis/collision-with-threejs","last_synced_at":"2026-04-24T22:36:19.705Z","repository":{"id":216892430,"uuid":"742588941","full_name":"Victor-Lis/Collision-with-ThreeJS","owner":"Victor-Lis","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-12T22:29:01.000Z","size":1587,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-16T06:07:52.748Z","etag":null,"topics":["cannon-es","html-css-javascript","js-modules","three-js"],"latest_commit_sha":null,"homepage":"https://collision-with-three-js-by-dev-victor-lis.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Victor-Lis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-12T20:16:38.000Z","updated_at":"2024-02-19T01:02:04.000Z","dependencies_parsed_at":"2024-01-13T14:07:48.360Z","dependency_job_id":"dd583c8c-0561-4dd0-9f93-58db2f3f7429","html_url":"https://github.com/Victor-Lis/Collision-with-ThreeJS","commit_stats":null,"previous_names":["victor-lis/collision-with-threejs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Victor-Lis/Collision-with-ThreeJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FCollision-with-ThreeJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FCollision-with-ThreeJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FCollision-with-ThreeJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FCollision-with-ThreeJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Victor-Lis","download_url":"https://codeload.github.com/Victor-Lis/Collision-with-ThreeJS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Victor-Lis%2FCollision-with-ThreeJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32243557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cannon-es","html-css-javascript","js-modules","three-js"],"created_at":"2024-10-05T10:01:00.310Z","updated_at":"2026-04-24T22:36:19.691Z","avatar_url":"https://github.com/Victor-Lis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Collision-with-ThreeJS\n\nEsse é um projeto que sem dúvida agrega bastante nos meus estudos com ThreeJS. Pois nele aprendi a utilizar a lib cannon-es, responsável pelas colisões.\n\nDessa vez continuando a saga de vídeo do canal [WaelYasmina](https://www.youtube.com/channel/UC1q2FdkcQ4qIxXzj3KQ1HYA).\n\nVi um [vídeo](https://www.youtube.com/watch?v=TPKWohwHrbo) sobre a utilização da lib.\n## Aprendizados\n\n- Entender o CANNON.World();\n- Entender o CANNON.Body();\n- Entender o CANNON.Material() e o CANNON.ContactMaterial()\n- Entender linearDamping \n- Entender angularVelocity\n\n## Uso/Exemplos\n\n### CANNON.World\n\nO CANNON.World, como o próprio nome já sugere, é o mundo, ou seja recebe as algumas condições como a gravidade.\n\n```js\nconst world = new CANNON.World({\n    gravity: new CANNON.Vec3(0, -9.81, 0),\n})\n```\n\nTodos os CANNON.Body (que seram explicados abaixo) são adicionados no world, a partir do método:\n\n```js\nworld.addBody()\n```\n\n### CANNON.Body\n\nO body é como se fosse o corpo \"físico\" dos objetos representados.\n\nOu seja, quando criamos um objeto usando o Three.JS, utilizamos:\n\n- Three.Mesh(tipo)Material (para adicionar uma textura ao objeto)\n- Three.(Nome do objeto)Geometry (para dar a forma do objeto).\n\nE agora, para dar a física usaremos o\n- CANNON.Body.\n\nDeixo abaixo um exemplo:\n```js\nconst boxBody = new CANNON.Body({\n    mass: 1,\n    shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)),\n    position: new CANNON.Vec3(0, 20, 0),\n    material: boxPhysMat\n});\n```\n\nComo visto acima ele recebe os atributos: \n- mass (massa, se for 0 o objeto não é afetado pela gravidade);\n- shape (é o mesmo princípio do Three.(Nome do objeto)Geometry, porém utilizando o CANNON.(Nome do Objeto));\n- position (posição do objeto);\n- material (explicado com calma na parte do ContactMaterial).\n\nApós isso o adicionamos ao World\n```js\nworld.addBody(boxBody)\n```\n\n### CANNON.ContactMaterial\n\nO CANNON.ContactMaterial é bem diferente do Three.Mesh(tipo)Material do ThreeJS, já que o \"Material\" do ThreeJS é basicamente a textura, já o do Cannon é basicamente as propriedades físicas dele e como ele se relaciona com outros objetos.\n\n#### Exemplo:\n\n- Box\n```js\nconst boxPhysMat = new CANNON.Material()\n\nconst boxBody = new CANNON.Body({\n    mass: 1,\n    shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)),\n    position: new CANNON.Vec3(0, 20, 0),\n    material: boxPhysMat\n});\n```\n\n- Ground\n```js\nconst groundPhysMat = new CANNON.Material()\n\nconst groundBody = new CANNON.Body({\n    //shape: new CANNON.Plane(),\n    //mass: 10\n    shape: new CANNON.Box(new CANNON.Vec3(15, 15, 0.1)),\n    type: CANNON.Body.STATIC,\n    material: groundPhysMat,\n});\n```\n\nComo observado acima, ambas as formas recebem um CANNON.Material\n\n```js\nconst groundBoxContactMat = new CANNON.ContactMaterial(\n    groundPhysMat,\n    boxPhysMat,\n    {friction: 0.04}\n);\n```\n\nNo exemplo acima, eu passo 3 parâmetros:\n- CANNON.Material do objeto 1(groundPhysMat);\n- CANNON.Materil do objeto 2(boxPhysMat);\n- Por fim, um objeto de algumas opções para definir como vai ser essa interação, no caso defini o atrito para 0.04.\n\nO resultado disso faz com que, no impacto entre a box e o ground a box deslize um pouco.\n\n### Conceitos Interessantes\n\n#### LinearDamping\n\nSe resume a resistência do ar, sem ela um objeto como uma esfera após impactar em outro objeto se movimentaria para sempre, com a resistência do ar, o movimento ir terminar de acordo com a intensidade dela.\n\nExemplo:\n```js\nsphereBody.linearDamping = 0.31\n```\n\nNesse exemplo defini a resistência do ar em relação a sphere, que faz com que depois de alguns segundos de um impacto ela estacione.\n\n#### LinearDamping\n\nSe resume a algo parecido com rotation do ThreeJS.\n\nExemplo:\n```js\nboxBody.angularVelocity.set(0,5,0)\n```\n\nNo exemplo acima, enquanto a box não encostar em nada, ela ir ficar girando em seu eixo Y\n## Teste você mesmo!\n\n[Confira!](https://collision-with-three-js-by-dev-victor-lis.vercel.app/)\n\n## Autores\n\n- [@Victor-Lis](https://github.com/Victor-Lis)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictor-lis%2Fcollision-with-threejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictor-lis%2Fcollision-with-threejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictor-lis%2Fcollision-with-threejs/lists"}