【Three.js基础学习】16.Physice

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

课程回顾

        物理库

            3D

            Ammo.js

            Cannon.js

            Oimo.js

            2D

            Matter.js

            P2.js

            Planck.js

            Box2D.js

        补充:一些看似3D的效果实际使用2D库来实现的

        物理 和 three.js的结合 概念补充

        假象在当前物体或场景外， 有一个看不见的物理量世界 ，那么遵循物理世界规则，若有一个小球在

        半空中掉落，碰触到地面，然后在滚落到旁边。这个时候 three.js 展示的每一帧都要获取这个物理量

        世界的位置信息，然后更新到three.js中，实现展示，因此需要资料库

        这里采用cannon.js

        1.下载，引入

        npm install --save cannon

        import CANNON from 'cannon'

        2.创建一个物理世界

        const world = new CANNON.world()

        world.gravity(0,-9.82,0) 添加重力  9.82 重力常量

        vec3 文档 https://schteppe.github.io/cannon.js/docs/classes/Vec3.html

        vec3 和 vector 区别

        vec3 是cannon.js中局部位置

        vector是three.js

        和three.js一样 想要创建网格 ，但是网格必须有个几何体

        同样cannon.js 想要创建身体 ，首先创建一个形状

        3.如何通过物理方式动起来

        在物理世界有了一个和three.js 一样的物理，但是要更新在tick中

        首先应该确保在跟新步长时候，保证精度（准确性）

        保证上一个更新帧率 和这次跟新帧率没有问题

        然后将物理世界的球的位置 设置到 three.js中

       

        4.球会一直往下，再来个地板

        此时会发现，地板是正对着摄像头，因为在three.js中我们旋转地板，那么在物理世界同样

        cannon.js中的旋转是使用四元数(上方文档)

        5.球应该弹起来

            需要材料，创建两种材料对应 球和地板

            例如：混泥土材料  (当然由于球和地板设置相同材质 ，所以 简化代码)

                塑料材料

            同时创建接触材料，就是混泥土遇到塑料材料情况

            new CANNON.ContactMaterial()

            放到world中，同时在物理世界中的物体也要应用上 这和three.js相似

            也不用一个一个设置，统一设置应用

            world.defaultContactMaterial = defaultContactMaterial

       

        6. 对物体施力的方法

            applyforce-从空间的指定点施加一个力(不一定是物体表面)比如风，在多米诺骨牌上轻轻一推，或者在愤怒的小鸟上施加一个很大的力

            applylmpulse类似applyforce，但不是增加力，而是增加速度

            applyLocalForce-与applyForce相同，但坐标是主体的局部(e，e，e将是主体的中心

            applyLocallmpulse-与applylmpulse相同，但坐标是主体的局部