{"id":94269,"date":"2026-08-14T06:48:54","date_gmt":"2026-08-13T22:48:54","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/94269.html"},"modified":"2026-08-14T06:48:54","modified_gmt":"2026-08-13T22:48:54","slug":"cannon-es-%e4%bd%bf%e7%94%a8%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/94269.html","title":{"rendered":"cannon-es \u4f7f\u7528\u6307\u5357"},"content":{"rendered":"

cannon-es \u4f7f\u7528\u6307\u5357<\/h2>\n

cannon-es \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 3D \u7269\u7406\u5f15\u64ce，\u4e13\u4e3a Web \u73af\u5883\u8bbe\u8ba1\u3002\u5b83\u662f\u7ecf\u5178 cannon.js \u7684\u73b0\u4ee3\u5206\u652f，\u652f\u6301 ESM \u6a21\u5757\u5316\u3001TypeScript \u7c7b\u578b\u5b89\u5168，\u5e76\u6301\u7eed\u5408\u5e76\u793e\u533a\u6539\u8fdb\u3002<\/p>\n

\n

\u4e00\u3001\u5b89\u88c5\u4e0e\u5f15\u5165<\/h3>\n

1.1 Node.js \/ \u6784\u5efa\u5de5\u5177\u73af\u5883<\/h4>\n

yarn<\/span> add<\/span> cannon-es
\n# \u6216<\/span>
\nnpm<\/span> install<\/span> cannon-es<\/p>\n

\/\/ \u6309\u9700\u5f15\u5165（\u63a8\u8350，\u652f\u6301 tree shaking）<\/span>
\nimport<\/span> {<\/span> World,<\/span> Body,<\/span> Box,<\/span> Sphere,<\/span> Plane,<\/span> Vec3 }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u6216\u6574\u4f53\u5bfc\u5165<\/span>
\nimport<\/span> *<\/span> as<\/span> CANNON<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

1.2 \u7eaf HTML \/ CDN \u5f15\u5165（\u65e0\u9700 Node.js）<\/h4>\n

cannon-es \u539f\u751f\u662f ESM \u6a21\u5757，\u4e0d\u63d0\u4f9b\u5168\u5c40 CANNON \u5bf9\u8c61，\u9700\u8981\u7528 <script type="importmap"> \u6216\u76f4\u63a5\u901a\u8fc7 ESM CDN \u5f15\u5165\u3002<\/p>\n

\u65b9\u6cd5\u4e00：\u4f7f\u7528 importmap（\u63a8\u8350）<\/p>\n

<!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
\n<<\/span>html<\/span>><\/span><\/span>
\n<<\/span>head<\/span>><\/span><\/span>
\n <<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>utf-8"<\/span><\/span> \/><\/span><\/span>
\n<\/<\/span>head<\/span>><\/span><\/span>
\n<<\/span>body<\/span>><\/span><\/span>
\n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>importmap"<\/span><\/span>><\/span><\/span>
\n {<\/span>
\n "imports"<\/span>:<\/span> {<\/span>
\n "cannon-es"<\/span>:<\/span> "https:\/\/cdn.jsdelivr.net\/npm\/cannon-es@0.20.0\/dist\/cannon-es.js"<\/span>
\n }<\/span>
\n }<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>module"<\/span><\/span>><\/span><\/span>
\n import<\/span> {<\/span> World,<\/span> Body,<\/span> Box,<\/span> Sphere,<\/span> Plane,<\/span> Vec3 }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u4f60\u7684\u7269\u7406\u4ee3\u7801…<\/span>
\n const<\/span> world =<\/span> new<\/span> World<\/span>(<\/span>)<\/span>
\n world.<\/span>gravity.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> –<\/span>9.82<\/span>,<\/span> 0<\/span>)<\/span>
\n console.<\/span>log<\/span>(<\/span>'cannon-es \u5df2\u52a0\u8f7d'<\/span>)<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n<\/<\/span>body<\/span>><\/span><\/span>
\n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

\u65b9\u6cd5\u4e8c：\u76f4\u63a5\u4f7f\u7528 CDN URL（\u65e0\u9700 importmap）<\/p>\n

<!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
\n<<\/span>html<\/span>><\/span><\/span>
\n<<\/span>head<\/span>><\/span><\/span>
\n <<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>utf-8"<\/span><\/span> \/><\/span><\/span>
\n<\/<\/span>head<\/span>><\/span><\/span>
\n<<\/span>body<\/span>><\/span><\/span>
\n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>module"<\/span><\/span>><\/span><\/span>
\n import<\/span> {<\/span> World,<\/span> Body,<\/span> Box,<\/span> Sphere,<\/span> Plane,<\/span> Vec3 }<\/span> from<\/span> 'https:\/\/cdn.jsdelivr.net\/npm\/cannon-es@0.20.0\/dist\/cannon-es.js'<\/span><\/p>\n

const<\/span> world =<\/span> new<\/span> World<\/span>(<\/span>)<\/span>
\n world.<\/span>gravity.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> –<\/span>9.82<\/span>,<\/span> 0<\/span>)<\/span>
\n console.<\/span>log<\/span>(<\/span>'cannon-es \u5df2\u52a0\u8f7d'<\/span>)<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n<\/<\/span>body<\/span>><\/span><\/span>
\n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

\n

\u4e8c\u3001\u6838\u5fc3\u6982\u5ff5<\/h3>\n

2.1 \u7269\u7406\u4e16\u754c (World)<\/h4>\n

\u4e16\u754c\u662f\u6240\u6709\u7269\u7406\u5bf9\u8c61\u7684\u5bb9\u5668，\u7ba1\u7406\u91cd\u529b\u3001\u78b0\u649e\u68c0\u6d4b\u548c\u7ea6\u675f\u6c42\u89e3\u3002<\/p>\n

import<\/span> {<\/span> World,<\/span> Vec3 }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u521b\u5efa\u4e16\u754c<\/span>
\nconst<\/span> world =<\/span> new<\/span> World<\/span>(<\/span>)<\/span><\/p>\n

\/\/ \u8bbe\u7f6e\u91cd\u529b（\u9ed8\u8ba4 (0, -9.82, 0)）<\/span>
\nworld.<\/span>gravity.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> –<\/span>9.82<\/span>,<\/span> 0<\/span>)<\/span><\/p>\n

\/\/ \u5141\u8bb8\u7269\u4f53\u4f11\u7720（\u63d0\u5347\u6027\u80fd）<\/span>
\nworld.<\/span>allowSleep =<\/span> true<\/span><\/p>\n

\/\/ \u8bbe\u7f6e\u6c42\u89e3\u5668\u8fed\u4ee3\u6b21\u6570（\u7cbe\u5ea6\u4e0e\u6027\u80fd\u7684\u6743\u8861，\u9ed8\u8ba4 10）<\/span>
\nworld.<\/span>solver.<\/span>iterations =<\/span> 10<\/span><\/p>\n

\/\/ \u8bbe\u7f6e\u5bb9\u5dee（\u9ed8\u8ba4 0.001）<\/span>
\nworld.<\/span>solver.<\/span>tolerance =<\/span> 0.001<\/span><\/p>\n

2.2 \u521a\u4f53 (Body)<\/h4>\n

\u521a\u4f53\u662f\u7269\u7406\u6a21\u62df\u7684\u57fa\u672c\u5355\u4f4d，\u5305\u542b\u8d28\u91cf\u3001\u5f62\u72b6\u548c\u4f4d\u7f6e\u7b49\u4fe1\u606f\u3002<\/p>\n

import<\/span> {<\/span> Body,<\/span> Box,<\/span> Vec3 }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u521b\u5efa\u521a\u4f53<\/span>
\nconst<\/span> body =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span>
\n mass<\/span>:<\/span> 1<\/span>,<\/span> \/\/ \u8d28\u91cf（0 \u4e3a\u9759\u6001\u7269\u4f53）<\/span>
\n position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 5<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> \/\/ \u521d\u59cb\u4f4d\u7f6e<\/span>
\n velocity<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> \/\/ \u521d\u59cb\u901f\u5ea6<\/span>
\n angularVelocity<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> \/\/ \u521d\u59cb\u89d2\u901f\u5ea6<\/span>
\n shape<\/span>:<\/span> new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>1<\/span>,<\/span> 1<\/span>,<\/span> 1<\/span>)<\/span>)<\/span>,<\/span> \/\/ \u53ef\u76f4\u63a5\u4f20\u5165\u5f62\u72b6<\/span>
\n}<\/span>)<\/span><\/p>\n

\/\/ \u6216\u4f7f\u7528 setter<\/span>
\nbody.<\/span>mass =<\/span> 1<\/span>
\nbody.<\/span>position.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> 5<\/span>,<\/span> 0<\/span>)<\/span><\/p>\n

\/\/ \u6dfb\u52a0\u5f62\u72b6<\/span>
\nconst<\/span> boxShape =<\/span> new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0.5<\/span>,<\/span> 0.5<\/span>,<\/span> 0.5<\/span>)<\/span>)<\/span>
\nbody.<\/span>addShape<\/span>(<\/span>boxShape)<\/span><\/p>\n

\/\/ \u6dfb\u52a0\u7403\u4f53\u5f62\u72b6<\/span>
\nimport<\/span> {<\/span> Sphere }<\/span> from<\/span> 'cannon-es'<\/span>
\nconst<\/span> sphereShape =<\/span> new<\/span> Sphere<\/span>(<\/span>0.5<\/span>)<\/span>
\nbody.<\/span>addShape<\/span>(<\/span>sphereShape)<\/span><\/p>\n

\/\/ \u5c06\u521a\u4f53\u6dfb\u52a0\u5230\u4e16\u754c<\/span>
\nworld.<\/span>addBody<\/span>(<\/span>body)<\/span><\/p>\n

Body \u5e38\u7528\u5c5e\u6027<\/h5>\n\n\u5c5e\u6027\u7c7b\u578b\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n
mass<\/td>\nnumber<\/td>\n\u8d28\u91cf，0 \u8868\u793a\u9759\u6001<\/td>\n<\/tr>\n
position<\/td>\nVec3<\/td>\n\u4f4d\u7f6e<\/td>\n<\/tr>\n
quaternion<\/td>\nQuaternion<\/td>\n\u65cb\u8f6c（\u56db\u5143\u6570）<\/td>\n<\/tr>\n
velocity<\/td>\nVec3<\/td>\n\u7ebf\u901f\u5ea6<\/td>\n<\/tr>\n
angularVelocity<\/td>\nVec3<\/td>\n\u89d2\u901f\u5ea6<\/td>\n<\/tr>\n
force<\/td>\nVec3<\/td>\n\u5408\u529b<\/td>\n<\/tr>\n
torque<\/td>\nVec3<\/td>\n\u5408\u529b\u77e9<\/td>\n<\/tr>\n
type<\/td>\nBodyType<\/td>\n\u521a\u4f53\u7c7b\u578b：DYNAMIC\u3001STATIC\u3001KINEMATIC<\/td>\n<\/tr>\n
shape<\/td>\nShape<\/td>\n\u78b0\u649e\u5f62\u72b6<\/td>\n<\/tr>\n
material<\/td>\nMaterial<\/td>\n\u6750\u8d28\u5c5e\u6027<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

2.3 \u78b0\u649e\u5f62\u72b6 (Shape)<\/h4>\n

cannon-es \u652f\u6301\u591a\u79cd\u78b0\u649e\u5f62\u72b6：<\/p>\n

import<\/span> {<\/span> Box,<\/span> Sphere,<\/span> Plane,<\/span> Cylinder,<\/span> Trimesh,<\/span> Cone }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u76d2\u5b50：\u534a\u957f\u5bbd\u9ad8<\/span>
\nconst<\/span> box =<\/span> new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0.5<\/span>,<\/span> 0.5<\/span>,<\/span> 0.5<\/span>)<\/span>)<\/span><\/p>\n

\/\/ \u7403\u4f53：\u534a\u5f84<\/span>
\nconst<\/span> sphere =<\/span> new<\/span> Sphere<\/span>(<\/span>0.5<\/span>)<\/span><\/p>\n

\/\/ \u5e73\u9762：\u65e0\u9650\u5927\u5e73\u9762<\/span>
\nconst<\/span> plane =<\/span> new<\/span> Plane<\/span>(<\/span>)<\/span><\/p>\n

\/\/ \u5706\u67f1\u4f53：\u534a\u5f84\u3001\u9ad8\u5ea6\u3001\u5206\u6bb5\u6570<\/span>
\nconst<\/span> cylinder =<\/span> new<\/span> Cylinder<\/span>(<\/span>0.5<\/span>,<\/span> 0.5<\/span>,<\/span> 1<\/span>,<\/span> 8<\/span>)<\/span><\/p>\n

\/\/ \u5706\u9525\u4f53：\u534a\u5f84\u3001\u9ad8\u5ea6\u3001\u5206\u6bb5\u6570<\/span>
\nconst<\/span> cone =<\/span> new<\/span> Cone<\/span>(<\/span>0.5<\/span>,<\/span> 1<\/span>,<\/span> 8<\/span>)<\/span><\/p>\n

\/\/ \u4e09\u89d2\u7f51\u683c（\u590d\u6742\u5f62\u72b6）<\/span>
\nconst<\/span> vertices =<\/span> [<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span> 1<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span> 0<\/span>,<\/span>1<\/span>,<\/span>0<\/span>]<\/span> \/\/ \u9876\u70b9\u6570\u7ec4<\/span>
\nconst<\/span> indices =<\/span> [<\/span>0<\/span>,<\/span>1<\/span>,<\/span>2<\/span>]<\/span> \/\/ \u7d22\u5f15\u6570\u7ec4<\/span>
\nconst<\/span> trimesh =<\/span> new<\/span> Trimesh<\/span>(<\/span>vertices,<\/span> indices)<\/span><\/p>\n

2.4 \u6750\u8d28 (Material) \u4e0e\u63a5\u89e6\u6750\u8d28 (ContactMaterial)<\/h4>\n

\u6750\u8d28\u5b9a\u4e49\u4e86\u7269\u4f53\u7684\u7269\u7406\u5c5e\u6027（\u6469\u64e6\u3001\u6062\u590d\u7cfb\u6570\u7b49）\u3002<\/p>\n

import<\/span> {<\/span> Material,<\/span> ContactMaterial }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u521b\u5efa\u6750\u8d28<\/span>
\nconst<\/span> groundMaterial =<\/span> new<\/span> Material<\/span>(<\/span>'ground'<\/span>)<\/span>
\nconst<\/span> ballMaterial =<\/span> new<\/span> Material<\/span>(<\/span>'ball'<\/span>)<\/span><\/p>\n

\/\/ \u8bbe\u7f6e\u6750\u8d28\u5c5e\u6027<\/span>
\ngroundMaterial.<\/span>friction =<\/span> 0.3<\/span> \/\/ \u6469\u64e6\u7cfb\u6570<\/span>
\ngroundMaterial.<\/span>restitution =<\/span> 0.0<\/span> \/\/ \u5f39\u6027\u7cfb\u6570（\u53cd\u5f39）<\/span><\/p>\n

ballMaterial.<\/span>friction =<\/span> 0.1<\/span>
\nballMaterial.<\/span>restitution =<\/span> 0.8<\/span><\/p>\n

\/\/ \u521b\u5efa\u63a5\u89e6\u6750\u8d28（\u5b9a\u4e49\u4e24\u79cd\u6750\u8d28\u4e4b\u95f4\u7684\u78b0\u649e\u884c\u4e3a）<\/span>
\nconst<\/span> contactMat =<\/span> new<\/span> ContactMaterial<\/span>(<\/span>groundMaterial,<\/span> ballMaterial,<\/span> {<\/span>
\n friction<\/span>:<\/span> 0.3<\/span>,<\/span>
\n restitution<\/span>:<\/span> 0.7<\/span>,<\/span>
\n}<\/span>)<\/span><\/p>\n

world.<\/span>addContactMaterial<\/span>(<\/span>contactMat)<\/span><\/p>\n

\/\/ \u5c06\u6750\u8d28\u8d4b\u7ed9\u521a\u4f53<\/span>
\nconst<\/span> groundBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 0<\/span> }<\/span>)<\/span>
\ngroundBody.<\/span>material =<\/span> groundMaterial<\/p>\n

const<\/span> ballBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 1<\/span> }<\/span>)<\/span>
\nballBody.<\/span>material =<\/span> ballMaterial<\/p>\n

\n

\u4e09\u3001\u57fa\u672c\u64cd\u4f5c<\/h3>\n

3.1 \u6dfb\u52a0\u7269\u4f53\u5230\u4e16\u754c<\/h4>\n

\/\/ \u521b\u5efa\u5730\u9762（\u9759\u6001）<\/span>
\nconst<\/span> groundBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 0<\/span> }<\/span>)<\/span>
\ngroundBody.<\/span>addShape<\/span>(<\/span>new<\/span> Plane<\/span>(<\/span>)<\/span>)<\/span>
\ngroundBody.<\/span>quaternion.<\/span>setFromAxisAngle<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>1<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> –<\/span>Math.<\/span>PI<\/span> \/<\/span> 2<\/span>)<\/span>
\nworld.<\/span>addBody<\/span>(<\/span>groundBody)<\/span><\/p>\n

\/\/ \u521b\u5efa\u7403\u4f53（\u52a8\u6001）<\/span>
\nconst<\/span> sphereBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 1<\/span>,<\/span> position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 5<\/span>,<\/span> 0<\/span>)<\/span> }<\/span>)<\/span>
\nsphereBody.<\/span>addShape<\/span>(<\/span>new<\/span> Sphere<\/span>(<\/span>0.5<\/span>)<\/span>)<\/span>
\nworld.<\/span>addBody<\/span>(<\/span>sphereBody)<\/span><\/p>\n

\/\/ \u521b\u5efa\u7acb\u65b9\u4f53（\u52a8\u6001）<\/span>
\nconst<\/span> boxBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 1<\/span>,<\/span> position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>2<\/span>,<\/span> 5<\/span>,<\/span> 0<\/span>)<\/span> }<\/span>)<\/span>
\nboxBody.<\/span>addShape<\/span>(<\/span>new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0.5<\/span>,<\/span> 0.5<\/span>,<\/span> 0.5<\/span>)<\/span>)<\/span>)<\/span>
\nworld.<\/span>addBody<\/span>(<\/span>boxBody)<\/span><\/p>\n

3.2 \u65bd\u52a0\u529b\u4e0e\u51b2\u91cf<\/h4>\n

\/\/ \u65bd\u52a0\u529b（\u6301\u7eed\u4f5c\u7528）<\/span>
\nbody.<\/span>applyForce<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> –<\/span>10<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> body.<\/span>position)<\/span><\/p>\n

\/\/ \u65bd\u52a0\u51b2\u91cf（\u77ac\u95f4\u4f5c\u7528）<\/span>
\nbody.<\/span>applyImpulse<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 5<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> body.<\/span>position)<\/span><\/p>\n

\/\/ \u65bd\u52a0\u5c40\u90e8\u529b<\/span>
\nbody.<\/span>applyLocalForce<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> –<\/span>10<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>)<\/span><\/p>\n

\/\/ \u65bd\u52a0\u5c40\u90e8\u51b2\u91cf<\/span>
\nbody.<\/span>applyLocalImpulse<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 5<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>)<\/span><\/p>\n

\/\/ \u8bbe\u7f6e\u901f\u5ea6<\/span>
\nbody.<\/span>velocity.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> 10<\/span>,<\/span> 0<\/span>)<\/span>
\nbody.<\/span>angularVelocity.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>)<\/span><\/p>\n

3.3 \u66f4\u65b0\u7269\u7406\u4e16\u754c<\/h4>\n

\/\/ \u56fa\u5b9a\u65f6\u95f4\u6b65\u957f（\u63a8\u8350）<\/span>
\nconst<\/span> fixedTimeStep =<\/span> 1<\/span> \/<\/span> 60<\/span>
\nconst<\/span> maxSubSteps =<\/span> 3<\/span><\/p>\n

function<\/span> animate<\/span>(<\/span>)<\/span> {<\/span>
\n requestAnimationFrame<\/span>(<\/span>animate)<\/span><\/p>\n

\/\/ \u6b65\u8fdb\u7269\u7406\u4e16\u754c<\/span>
\n world.<\/span>step<\/span>(<\/span>fixedTimeStep,<\/span> undefined<\/span>,<\/span> maxSubSteps)<\/span><\/p>\n

\/\/ \u83b7\u53d6\u521a\u4f53\u4f4d\u7f6e\u7528\u4e8e\u6e32\u67d3<\/span>
\n const<\/span> pos =<\/span> body.<\/span>position
\n const<\/span> quat =<\/span> body.<\/span>quaternion
\n \/\/ \u66f4\u65b0 Three.js \/ Babylon.js \/ \u5176\u4ed6\u6e32\u67d3\u5668…<\/span>
\n}<\/span><\/p>\n

3.4 \u79fb\u9664\u7269\u4f53<\/h4>\n

world.<\/span>removeBody<\/span>(<\/span>body)<\/span><\/p>\n

\/\/ \u79fb\u9664\u63a5\u89e6\u6750\u8d28<\/span>
\nworld.<\/span>removeContactMaterial<\/span>(<\/span>contactMat)<\/span><\/p>\n

\/\/ \u6e05\u7a7a\u6240\u6709\u7269\u4f53<\/span>
\nworld.<\/span>bodies.<\/span>forEach<\/span>(<\/span>b<\/span> =><\/span> world.<\/span>removeBody<\/span>(<\/span>b)<\/span>)<\/span><\/p>\n

\n

\u56db\u3001\u78b0\u649e\u68c0\u6d4b\u4e0e\u4e8b\u4ef6<\/h3>\n

4.1 \u78b0\u649e\u4e8b\u4ef6<\/h4>\n

\/\/ \u78b0\u649e\u5f00\u59cb<\/span>
\nworld.<\/span>addEventListener<\/span>(<\/span>'postStep'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n \/\/ \u6bcf\u6b21\u6b65\u8fdb\u540e\u68c0\u67e5\u78b0\u649e<\/span>
\n}<\/span>)<\/span><\/p>\n

\/\/ \u66f4\u7cbe\u786e\u7684\u78b0\u649e\u4e8b\u4ef6\u76d1\u542c<\/span>
\nbody.<\/span>addEventListener<\/span>(<\/span>'collide'<\/span>,<\/span> (<\/span>event<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> {<\/span> body<\/span>:<\/span> otherBody,<\/span> contact }<\/span> =<\/span> event<\/p>\n

console.<\/span>log<\/span>(<\/span>'\u78b0\u649e\u53d1\u751f！'<\/span>)<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u78b0\u649e\u7269\u4f53:'<\/span>,<\/span> otherBody)<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u78b0\u649e\u70b9:'<\/span>,<\/span> contact.<\/span>bi.<\/span>position)<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u6cd5\u7ebf\u65b9\u5411:'<\/span>,<\/span> contact.<\/span>ni)<\/span><\/p>\n

\/\/ \u83b7\u53d6\u78b0\u649e\u51b2\u51fb\u529b<\/span>
\n const<\/span> impulse =<\/span> contact.<\/span>getImpactVelocityAlongNormal<\/span>(<\/span>)<\/span>
\n if<\/span> (<\/span>Math.<\/span>abs<\/span>(<\/span>impulse)<\/span> ><\/span> 5<\/span>)<\/span> {<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u5f3a\u529b\u78b0\u649e！'<\/span>)<\/span>
\n }<\/span>
\n}<\/span>)<\/span><\/p>\n

4.2 \u78b0\u649e\u68c0\u6d4b\u67e5\u8be2（\u5c04\u7ebf\u68c0\u6d4b）<\/h4>\n

import<\/span> {<\/span> Ray,<\/span> RaycastResult }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u521b\u5efa\u5c04\u7ebf<\/span>
\nconst<\/span> ray =<\/span> new<\/span> Ray<\/span>(<\/span>)<\/span>
\nray.<\/span>from.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> 10<\/span>,<\/span> 0<\/span>)<\/span>
\nray.<\/span>to.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> –<\/span>10<\/span>,<\/span> 0<\/span>)<\/span><\/p>\n

\/\/ \u6267\u884c\u5c04\u7ebf\u68c0\u6d4b<\/span>
\nconst<\/span> result =<\/span> new<\/span> RaycastResult<\/span>(<\/span>)<\/span>
\nray.<\/span>intersectWorld<\/span>(<\/span>world,<\/span> result)<\/span><\/p>\n

if<\/span> (<\/span>result.<\/span>hasHit)<\/span> {<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u5c04\u7ebf\u51fb\u4e2d:'<\/span>,<\/span> result.<\/span>body)<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u51fb\u4e2d\u70b9:'<\/span>,<\/span> result.<\/span>hitPointWorld)<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u6cd5\u7ebf:'<\/span>,<\/span> result.<\/span>hitNormalWorld)<\/span>
\n}<\/span><\/p>\n

4.3 \u91cd\u53e0\u68c0\u6d4b<\/h4>\n

\/\/ \u68c0\u6d4b\u4e24\u4e2a\u5f62\u72b6\u662f\u5426\u91cd\u53e0<\/span>
\nconst<\/span> overlap =<\/span> body1.<\/span>overlaps<\/span>(<\/span>body2)<\/span>
\nif<\/span> (<\/span>overlap)<\/span> {<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u4e24\u4e2a\u7269\u4f53\u91cd\u53e0！'<\/span>)<\/span>
\n}<\/span><\/p>\n

\/\/ \u68c0\u6d4b\u4e16\u754c\u4e2d\u7684\u6240\u6709\u91cd\u53e0（\u9700\u8981\u542f\u7528\u78b0\u649e\u68c0\u6d4b）<\/span>
\nworld.<\/span>bodies.<\/span>forEach<\/span>(<\/span>(<\/span>b1,<\/span> i<\/span>)<\/span> =><\/span> {<\/span>
\n for<\/span> (<\/span>let<\/span> j =<\/span> i +<\/span> 1<\/span>;<\/span> j <<\/span> world.<\/span>bodies.<\/span>length;<\/span> j++<\/span>)<\/span> {<\/span>
\n const<\/span> b2 =<\/span> world.<\/span>bodies[<\/span>j]<\/span>
\n if<\/span> (<\/span>b1.<\/span>overlaps<\/span>(<\/span>b2)<\/span>)<\/span> {<\/span>
\n console.<\/span>log<\/span>(<\/span>`<\/span>${<\/span>b1.<\/span>id}<\/span><\/span> \u4e0e <\/span>${<\/span>b2.<\/span>id}<\/span><\/span> \u91cd\u53e0<\/span>`<\/span><\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n}<\/span>)<\/span><\/p>\n

\n

\u4e94\u3001\u7ea6\u675f (Constraint)<\/h3>\n

\u7ea6\u675f\u7528\u4e8e\u9650\u5236\u4e24\u4e2a\u521a\u4f53\u4e4b\u95f4\u7684\u76f8\u5bf9\u8fd0\u52a8\u3002<\/p>\n

import<\/span> {<\/span> PointToPointConstraint,<\/span> HingeConstraint,<\/span> ConeTwistConstraint,<\/span> DistanceConstraint }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u70b9\u5bf9\u70b9\u7ea6\u675f（\u94f0\u94fe\/\u7403\u5173\u8282）<\/span>
\nconst<\/span> p2p =<\/span> new<\/span> PointToPointConstraint<\/span>(<\/span>bodyA,<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> bodyB,<\/span> new<\/span> Vec3<\/span>(<\/span>1<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>)<\/span>
\nworld.<\/span>addConstraint<\/span>(<\/span>p2p)<\/span><\/p>\n

\/\/ \u8ddd\u79bb\u7ea6\u675f（\u4fdd\u6301\u56fa\u5b9a\u8ddd\u79bb）<\/span>
\nconst<\/span> distance =<\/span> new<\/span> DistanceConstraint<\/span>(<\/span>bodyA,<\/span> bodyB,<\/span> {<\/span> distance<\/span>:<\/span> 2<\/span> }<\/span>)<\/span>
\nworld.<\/span>addConstraint<\/span>(<\/span>distance)<\/span><\/p>\n

\/\/ \u94f0\u94fe\u7ea6\u675f（\u7c7b\u4f3c\u95e8\u8f74）<\/span>
\nconst<\/span> hinge =<\/span> new<\/span> HingeConstraint<\/span>(<\/span>bodyA,<\/span> bodyB,<\/span> {<\/span>
\n pivotA<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n axisA<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n pivotB<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n axisB<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n}<\/span>)<\/span>
\nworld.<\/span>addConstraint<\/span>(<\/span>hinge)<\/span><\/p>\n

\/\/ \u5706\u9525-\u626d\u8f6c\u7ea6\u675f（\u7c7b\u4f3c\u80a9\u8180\u5173\u8282）<\/span>
\nconst<\/span> coneTwist =<\/span> new<\/span> ConeTwistConstraint<\/span>(<\/span>bodyA,<\/span> bodyB,<\/span> {<\/span>
\n pivotA<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n axisA<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n pivotB<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n axisB<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n angle<\/span>:<\/span> Math.<\/span>PI<\/span> \/<\/span> 4<\/span>,<\/span>
\n}<\/span>)<\/span>
\nworld.<\/span>addConstraint<\/span>(<\/span>coneTwist)<\/span><\/p>\n

\/\/ \u79fb\u9664\u7ea6\u675f<\/span>
\nworld.<\/span>removeConstraint<\/span>(<\/span>p2p)<\/span><\/p>\n

\n

\u516d\u3001\u9ad8\u7ea7\u529f\u80fd<\/h3>\n

6.1 \u89e6\u53d1\u5668 (Trigger)<\/h4>\n

\u901a\u8fc7\u68c0\u6d4b\u91cd\u53e0\u5b9e\u73b0\u89e6\u53d1\u5668\u6548\u679c\u3002<\/p>\n

\/\/ \u8bbe\u7f6e\u4e00\u4e2a\u89e6\u53d1\u5668\u533a\u57df（\u9759\u6001，\u4e0d\u53ef\u89c1）<\/span>
\nconst<\/span> triggerBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 0<\/span>,<\/span> position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>)<\/span> }<\/span>)<\/span>
\ntriggerBody.<\/span>addShape<\/span>(<\/span>new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>2<\/span>,<\/span> 2<\/span>,<\/span> 2<\/span>)<\/span>)<\/span>)<\/span>
\ntriggerBody.<\/span>collisionFilterGroup =<\/span> 2<\/span>
\ntriggerBody.<\/span>collisionFilterMask =<\/span> 1<\/span>
\nworld.<\/span>addBody<\/span>(<\/span>triggerBody)<\/span><\/p>\n

\/\/ \u5728\u78b0\u649e\u4e8b\u4ef6\u4e2d\u68c0\u6d4b<\/span>
\ntriggerBody.<\/span>addEventListener<\/span>(<\/span>'collide'<\/span>,<\/span> (<\/span>event<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> other =<\/span> event.<\/span>body
\n if<\/span> (<\/span>other.<\/span>id !==<\/span> triggerBody.<\/span>id)<\/span> {<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u89e6\u53d1\u5668\u88ab\u89e6\u53d1！'<\/span>)<\/span>
\n \/\/ \u6267\u884c\u89e6\u53d1\u903b\u8f91：\u5f00\u95e8\u3001\u5f97\u5206\u3001\u4f20\u9001\u7b49<\/span>
\n }<\/span>
\n}<\/span>)<\/span><\/p>\n

6.2 \u78b0\u649e\u8fc7\u6ee4<\/h4>\n

\/\/ \u8bbe\u7f6e\u78b0\u649e\u7ec4\u548c\u63a9\u7801（\u6309\u4f4d\u8fd0\u7b97）<\/span>
\nconst<\/span> body1 =<\/span> new<\/span> Body<\/span>(<\/span>)<\/span>
\nbody1.<\/span>collisionFilterGroup =<\/span> 1<\/span> \/\/ \u5c5e\u4e8e\u7ec4 1<\/span>
\nbody1.<\/span>collisionFilterMask =<\/span> 2<\/span> |<\/span> 4<\/span> \/\/ \u4e0e\u7ec4 2 \u6216 4 \u78b0\u649e<\/span><\/p>\n

const<\/span> body2 =<\/span> new<\/span> Body<\/span>(<\/span>)<\/span>
\nbody2.<\/span>collisionFilterGroup =<\/span> 2<\/span>
\nbody2.<\/span>collisionFilterMask =<\/span> 1<\/span> \/\/ \u4e0e\u7ec4 1 \u78b0\u649e<\/span><\/p>\n

const<\/span> body3 =<\/span> new<\/span> Body<\/span>(<\/span>)<\/span>
\nbody3.<\/span>collisionFilterGroup =<\/span> 4<\/span>
\nbody3.<\/span>collisionFilterMask =<\/span> 0<\/span> \/\/ \u4e0d\u4e0e\u4efb\u4f55\u7ec4\u78b0\u649e<\/span><\/p>\n

6.3 \u8fd0\u52a8\u5b66\u7269\u4f53<\/h4>\n

\/\/ \u8fd0\u52a8\u5b66\u7269\u4f53：\u4f4d\u7f6e\u7531\u4ee3\u7801\u63a7\u5236，\u4f46\u80fd\u63a8\u52a8\u5176\u4ed6\u52a8\u6001\u7269\u4f53<\/span>
\nconst<\/span> kinematicBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span>
\n mass<\/span>:<\/span> 0<\/span>,<\/span>
\n type<\/span>:<\/span> Body.<\/span>KINEMATIC<\/span>,<\/span>
\n position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>0<\/span>,<\/span> 2<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n}<\/span>)<\/span>
\nkinematicBody.<\/span>addShape<\/span>(<\/span>new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>1<\/span>,<\/span> 1<\/span>,<\/span> 1<\/span>)<\/span>)<\/span>)<\/span>
\nworld.<\/span>addBody<\/span>(<\/span>kinematicBody)<\/span><\/p>\n

\/\/ \u66f4\u65b0\u4f4d\u7f6e（\u6bcf\u5e27\u8c03\u7528）<\/span>
\nkinematicBody.<\/span>position.<\/span>x +=<\/span> 0.01<\/span>
\nkinematicBody.<\/span>velocity.<\/span>set<\/span>(<\/span>0.01<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span> \/\/ \u5fc5\u987b\u8bbe\u7f6e\u901f\u5ea6\u4f7f\u78b0\u649e\u6709\u6548<\/span><\/p>\n

6.4 \u4f11\u7720 (Sleep)<\/h4>\n

\/\/ \u5168\u5c40\u5f00\u542f\u4f11\u7720<\/span>
\nworld.<\/span>allowSleep =<\/span> true<\/span><\/p>\n

\/\/ \u8bbe\u7f6e\u4f11\u7720\u53c2\u6570<\/span>
\nworld.<\/span>sleepTimeLimit =<\/span> 0.5<\/span> \/\/ \u9759\u6b62\u591a\u4e45\u540e\u4f11\u7720（\u79d2）<\/span>
\nworld.<\/span>sleepSpeedLimit =<\/span> 0.1<\/span> \/\/ \u901f\u5ea6\u4f4e\u4e8e\u6b64\u503c\u89c6\u4e3a\u9759\u6b62<\/span><\/p>\n

\/\/ \u5355\u4e2a\u7269\u4f53\u8bbe\u7f6e<\/span>
\nbody.<\/span>sleepSpeedLimit =<\/span> 0.05<\/span>
\nbody.<\/span>sleepTimeLimit =<\/span> 0.5<\/span><\/p>\n

\/\/ \u624b\u52a8\u5524\u9192<\/span>
\nbody.<\/span>wakeUp<\/span>(<\/span>)<\/span><\/p>\n

\/\/ \u5f3a\u5236\u4f11\u7720<\/span>
\nbody.<\/span>sleep<\/span>(<\/span>)<\/span><\/p>\n

\n

\u4e03\u3001\u5b8c\u6574\u793a\u4f8b<\/h3>\n

7.1 \u57fa\u7840 Falling Ball \u793a\u4f8b<\/h4>\n

<!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
\n<<\/span>html<\/span>><\/span><\/span>
\n<<\/span>head<\/span>><\/span><\/span>
\n <<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>utf-8"<\/span><\/span> \/><\/span><\/span>
\n <<\/span>title<\/span>><\/span><\/span>cannon-es \u57fa\u7840\u793a\u4f8b<\/<\/span>title<\/span>><\/span><\/span>
\n<\/<\/span>head<\/span>><\/span><\/span>
\n<<\/span>body<\/span>><\/span><\/span>
\n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>importmap"<\/span><\/span>><\/span><\/span>
\n {<\/span>
\n "imports"<\/span>:<\/span> {<\/span>
\n "cannon-es"<\/span>:<\/span> "https:\/\/cdn.jsdelivr.net\/npm\/cannon-es@0.20.0\/dist\/cannon-es.js"<\/span>
\n }<\/span>
\n }<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>module"<\/span><\/span>><\/span><\/span>
\n import<\/span> {<\/span> World,<\/span> Body,<\/span> Box,<\/span> Sphere,<\/span> Plane,<\/span> Vec3,<\/span> Material,<\/span> ContactMaterial }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ 1. \u521b\u5efa\u4e16\u754c<\/span>
\n const<\/span> world =<\/span> new<\/span> World<\/span>(<\/span>)<\/span>
\n world.<\/span>gravity.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> –<\/span>9.82<\/span>,<\/span> 0<\/span>)<\/span><\/p>\n

\/\/ 2. \u521b\u5efa\u6750\u8d28<\/span>
\n const<\/span> groundMat =<\/span> new<\/span> Material<\/span>(<\/span>'ground'<\/span>)<\/span>
\n const<\/span> ballMat =<\/span> new<\/span> Material<\/span>(<\/span>'ball'<\/span>)<\/span><\/p>\n

const<\/span> contactMat =<\/span> new<\/span> ContactMaterial<\/span>(<\/span>groundMat,<\/span> ballMat,<\/span> {<\/span>
\n friction<\/span>:<\/span> 0.3<\/span>,<\/span>
\n restitution<\/span>:<\/span> 0.5<\/span>,<\/span>
\n }<\/span>)<\/span>
\n world.<\/span>addContactMaterial<\/span>(<\/span>contactMat)<\/span><\/p>\n

\/\/ 3. \u521b\u5efa\u5730\u9762<\/span>
\n const<\/span> ground =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 0<\/span> }<\/span>)<\/span>
\n ground.<\/span>addShape<\/span>(<\/span>new<\/span> Plane<\/span>(<\/span>)<\/span>)<\/span>
\n ground.<\/span>quaternion.<\/span>setFromAxisAngle<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>1<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> –<\/span>Math.<\/span>PI<\/span> \/<\/span> 2<\/span>)<\/span>
\n ground.<\/span>material =<\/span> groundMat
\n world.<\/span>addBody<\/span>(<\/span>ground)<\/span><\/p>\n

\/\/ 4. \u521b\u5efa\u591a\u4e2a\u7403\u4f53<\/span>
\n const<\/span> balls =<\/span> [<\/span>]<\/span>
\n for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> 5<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n const<\/span> ball =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span>
\n mass<\/span>:<\/span> 1<\/span>,<\/span>
\n position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>i –<\/span> 2<\/span>,<\/span> 3<\/span> +<\/span> i *<\/span> 0.5<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n }<\/span>)<\/span>
\n ball.<\/span>addShape<\/span>(<\/span>new<\/span> Sphere<\/span>(<\/span>0.3<\/span>)<\/span>)<\/span>
\n ball.<\/span>material =<\/span> ballMat
\n world.<\/span>addBody<\/span>(<\/span>ball)<\/span>
\n balls.<\/span>push<\/span>(<\/span>ball)<\/span>
\n }<\/span><\/p>\n

\/\/ 5. \u521b\u5efa\u76d2\u5b50<\/span>
\n const<\/span> box =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span>
\n mass<\/span>:<\/span> 1<\/span>,<\/span>
\n position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>2<\/span>,<\/span> 4<\/span>,<\/span> 0<\/span>)<\/span>,<\/span>
\n }<\/span>)<\/span>
\n box.<\/span>addShape<\/span>(<\/span>new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0.4<\/span>,<\/span> 0.4<\/span>,<\/span> 0.4<\/span>)<\/span>)<\/span>)<\/span>
\n world.<\/span>addBody<\/span>(<\/span>box)<\/span><\/p>\n

\/\/ 6. \u7269\u7406\u5faa\u73af<\/span>
\n const<\/span> fixedTimeStep =<\/span> 1<\/span> \/<\/span> 60<\/span>
\n const<\/span> maxSubSteps =<\/span> 3<\/span><\/p>\n

function<\/span> physicsLoop<\/span>(<\/span>)<\/span> {<\/span>
\n requestAnimationFrame<\/span>(<\/span>physicsLoop)<\/span>
\n world.<\/span>step<\/span>(<\/span>fixedTimeStep,<\/span> undefined<\/span>,<\/span> maxSubSteps)<\/span><\/p>\n

\/\/ \u8f93\u51fa\u7403\u4f53\u4f4d\u7f6e<\/span>
\n balls.<\/span>forEach<\/span>(<\/span>(<\/span>b,<\/span> i<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>i ===<\/span> 0<\/span>)<\/span> {<\/span>
\n console.<\/span>log<\/span>(<\/span>`<\/span>\u7403\u4f53\u4f4d\u7f6e: (<\/span>${<\/span>b.<\/span>position.<\/span>x.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span>}<\/span><\/span>, <\/span>${<\/span>b.<\/span>position.<\/span>y.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span>}<\/span><\/span>, <\/span>${<\/span>b.<\/span>position.<\/span>z.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span>}<\/span><\/span>)<\/span>`<\/span><\/span>)<\/span>
\n }<\/span>
\n }<\/span>)<\/span>
\n }<\/span><\/p>\n

physicsLoop<\/span>(<\/span>)<\/span><\/p>\n

\/\/ 7. \u65bd\u52a0\u51b2\u91cf\u6f14\u793a（3\u79d2\u540e）<\/span>
\n setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n balls[<\/span>0<\/span>]<\/span>.<\/span>applyImpulse<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>2<\/span>,<\/span> 5<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> balls[<\/span>0<\/span>]<\/span>.<\/span>position)<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u51b2\u91cf\u5df2\u65bd\u52a0！'<\/span>)<\/span>
\n }<\/span>,<\/span> 3000<\/span>)<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>'\u7269\u7406\u6a21\u62df\u5df2\u542f\u52a8！'<\/span>)<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n<\/<\/span>body<\/span>><\/span><\/span>
\n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

7.2 \u5b8c\u6574 HTML \u793a\u4f8b（\u5e26\u53ef\u89c6\u5316）<\/h4>\n

<!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
\n<<\/span>html<\/span>><\/span><\/span>
\n<<\/span>head<\/span>><\/span><\/span>
\n <<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>utf-8"<\/span><\/span> \/><\/span><\/span>
\n <<\/span>title<\/span>><\/span><\/span>cannon-es \u5b8c\u6574\u793a\u4f8b<\/<\/span>title<\/span>><\/span><\/span>
\n <<\/span>style<\/span>><\/span><\/span>
\n body<\/span> {<\/span> margin<\/span>:<\/span> 0;<\/span> overflow<\/span>:<\/span> hidden;<\/span> font-family<\/span>:<\/span> Arial,<\/span> sans-serif;<\/span> }<\/span>
\n #info<\/span> {<\/span>
\n position<\/span>:<\/span> absolute;<\/span>
\n top<\/span>:<\/span> 20px;<\/span>
\n left<\/span>:<\/span> 50%;<\/span>
\n transform<\/span>:<\/span> translateX<\/span>(<\/span>-50%)<\/span>;<\/span>
\n color<\/span>:<\/span> #fff;<\/span>
\n background<\/span>:<\/span> rgba<\/span>(<\/span>0,<\/span>0,<\/span>0,<\/span>0.7)<\/span>;<\/span>
\n padding<\/span>:<\/span> 10px 20px;<\/span>
\n border-radius<\/span>:<\/span> 8px;<\/span>
\n z-index<\/span>:<\/span> 10;<\/span>
\n pointer-events<\/span>:<\/span> none;<\/span>
\n }<\/span>
\n <\/span><\/span><\/<\/span>style<\/span>><\/span><\/span>
\n<\/<\/span>head<\/span>><\/span><\/span>
\n<<\/span>body<\/span>><\/span><\/span>
\n <<\/span>div<\/span> id<\/span>=<\/span>"<\/span>info"<\/span><\/span>><\/span><\/span>cannon-es \u7269\u7406\u6a21\u62df | \u70b9\u51fb\u753b\u9762\u65bd\u52a0\u51b2\u91cf<\/<\/span>div<\/span>><\/span><\/span><\/p>\n

<!– \u4f7f\u7528 importmap \u5f15\u5165 cannon-es –><\/span>
\n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>importmap"<\/span><\/span>><\/span><\/span>
\n {<\/span>
\n "imports"<\/span>:<\/span> {<\/span>
\n "cannon-es"<\/span>:<\/span> "https:\/\/cdn.jsdelivr.net\/npm\/cannon-es@0.20.0\/dist\/cannon-es.js"<\/span>
\n }<\/span>
\n }<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span><\/p>\n

<!– \u4f7f\u7528 Three.js \u8fdb\u884c\u53ef\u89c6\u5316 –><\/span>
\n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>importmap"<\/span><\/span>><\/span><\/span>
\n {<\/span>
\n "imports"<\/span>:<\/span> {<\/span>
\n "three"<\/span>:<\/span> "https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/build\/three.module.js"<\/span>,<\/span>
\n "three\/addons\/"<\/span>:<\/span> "https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/examples\/jsm\/"<\/span>
\n }<\/span>
\n }<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span><\/p>\n

<<\/span>script<\/span> type<\/span>=<\/span>"<\/span>module"<\/span><\/span>><\/span><\/span>
\n \/\/ \u5bfc\u5165 cannon-es<\/span>
\n import<\/span> {<\/span> World,<\/span> Body,<\/span> Box,<\/span> Sphere,<\/span> Plane,<\/span> Vec3,<\/span> Material,<\/span> ContactMaterial }<\/span> from<\/span> 'cannon-es'<\/span><\/p>\n

\/\/ \u5bfc\u5165 Three.js<\/span>
\n import<\/span> *<\/span> as<\/span> THREE<\/span> from<\/span> 'three'<\/span>
\n import<\/span> {<\/span> OrbitControls }<\/span> from<\/span> 'three\/addons\/controls\/OrbitControls.js'<\/span>
\n import<\/span> {<\/span> CSS2DRenderer,<\/span> CSS2DObject }<\/span> from<\/span> 'three\/addons\/renderers\/CSS2DRenderer.js'<\/span><\/p>\n

\/\/ ========== 1. \u521b\u5efa\u7269\u7406\u4e16\u754c ==========<\/span>
\n const<\/span> world =<\/span> new<\/span> World<\/span>(<\/span>)<\/span>
\n world.<\/span>gravity.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> –<\/span>9.82<\/span>,<\/span> 0<\/span>)<\/span>
\n world.<\/span>allowSleep =<\/span> true<\/span><\/p>\n

\/\/ ========== 2. \u521b\u5efa\u6750\u8d28 ==========<\/span>
\n const<\/span> groundMat =<\/span> new<\/span> Material<\/span>(<\/span>'ground'<\/span>)<\/span>
\n const<\/span> boxMat =<\/span> new<\/span> Material<\/span>(<\/span>'box'<\/span>)<\/span>
\n const<\/span> ballMat =<\/span> new<\/span> Material<\/span>(<\/span>'ball'<\/span>)<\/span><\/p>\n

const<\/span> contactMat =<\/span> new<\/span> ContactMaterial<\/span>(<\/span>groundMat,<\/span> boxMat,<\/span> {<\/span>
\n friction<\/span>:<\/span> 0.4<\/span>,<\/span>
\n restitution<\/span>:<\/span> 0.3<\/span>,<\/span>
\n }<\/span>)<\/span>
\n world.<\/span>addContactMaterial<\/span>(<\/span>contactMat)<\/span><\/p>\n

const<\/span> contactMatBall =<\/span> new<\/span> ContactMaterial<\/span>(<\/span>groundMat,<\/span> ballMat,<\/span> {<\/span>
\n friction<\/span>:<\/span> 0.2<\/span>,<\/span>
\n restitution<\/span>:<\/span> 0.6<\/span>,<\/span>
\n }<\/span>)<\/span>
\n world.<\/span>addContactMaterial<\/span>(<\/span>contactMatBall)<\/span><\/p>\n

\/\/ ========== 3. \u521b\u5efa Three.js \u573a\u666f ==========<\/span>
\n const<\/span> scene =<\/span> new<\/span> THREE.<\/span>Scene<\/span>(<\/span>)<\/span>
\n scene.<\/span>background =<\/span> new<\/span> THREE.<\/span>Color<\/span>(<\/span>0x1a1a2e<\/span>)<\/span><\/p>\n

const<\/span> camera =<\/span> new<\/span> THREE.<\/span>PerspectiveCamera<\/span>(<\/span>60<\/span>,<\/span> window.<\/span>innerWidth \/<\/span> window.<\/span>innerHeight,<\/span> 0.1<\/span>,<\/span> 100<\/span>)<\/span>
\n camera.<\/span>position.<\/span>set<\/span>(<\/span>8<\/span>,<\/span> 6<\/span>,<\/span> 10<\/span>)<\/span>
\n camera.<\/span>lookAt<\/span>(<\/span>0<\/span>,<\/span> 2<\/span>,<\/span> 0<\/span>)<\/span><\/p>\n

const<\/span> renderer =<\/span> new<\/span> THREE.<\/span>WebGLRenderer<\/span>(<\/span>{<\/span> antialias<\/span>:<\/span> true<\/span> }<\/span>)<\/span>
\n renderer.<\/span>setSize<\/span>(<\/span>window.<\/span>innerWidth,<\/span> window.<\/span>innerHeight)<\/span>
\n renderer.<\/span>shadowMap.<\/span>enabled =<\/span> true<\/span>
\n renderer.<\/span>shadowMap.<\/span>type =<\/span> THREE<\/span>.<\/span>PCFSoftShadowMap
\n document.<\/span>body.<\/span>appendChild<\/span>(<\/span>renderer.<\/span>domElement)<\/span><\/p>\n

const<\/span> controls =<\/span> new<\/span> OrbitControls<\/span>(<\/span>camera,<\/span> renderer.<\/span>domElement)<\/span>
\n controls.<\/span>target.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> 2<\/span>,<\/span> 0<\/span>)<\/span>
\n controls.<\/span>update<\/span>(<\/span>)<\/span><\/p>\n

\/\/ \u5149\u7167<\/span>
\n const<\/span> ambientLight =<\/span> new<\/span> THREE.<\/span>AmbientLight<\/span>(<\/span>0x404060<\/span>)<\/span>
\n scene.<\/span>add<\/span>(<\/span>ambientLight)<\/span><\/p>\n

const<\/span> dirLight =<\/span> new<\/span> THREE.<\/span>DirectionalLight<\/span>(<\/span>0xffffff<\/span>,<\/span> 1.5<\/span>)<\/span>
\n dirLight.<\/span>position.<\/span>set<\/span>(<\/span>5<\/span>,<\/span> 12<\/span>,<\/span> 8<\/span>)<\/span>
\n dirLight.<\/span>castShadow =<\/span> true<\/span>
\n dirLight.<\/span>shadow.<\/span>mapSize.<\/span>width =<\/span> 2048<\/span>
\n dirLight.<\/span>shadow.<\/span>mapSize.<\/span>height =<\/span> 2048<\/span>
\n scene.<\/span>add<\/span>(<\/span>dirLight)<\/span><\/p>\n

const<\/span> fillLight =<\/span> new<\/span> THREE.<\/span>DirectionalLight<\/span>(<\/span>0x8888ff<\/span>,<\/span> 0.5<\/span>)<\/span>
\n fillLight.<\/span>position.<\/span>set<\/span>(<\/span>–<\/span>5<\/span>,<\/span> 5<\/span>,<\/span> –<\/span>5<\/span>)<\/span>
\n scene.<\/span>add<\/span>(<\/span>fillLight)<\/span><\/p>\n

\/\/ ========== 4. \u521b\u5efa\u5730\u9762 ==========<\/span>
\n \/\/ \u7269\u7406\u5730\u9762<\/span>
\n const<\/span> groundBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 0<\/span> }<\/span>)<\/span>
\n groundBody.<\/span>addShape<\/span>(<\/span>new<\/span> Plane<\/span>(<\/span>)<\/span>)<\/span>
\n groundBody.<\/span>quaternion.<\/span>setFromAxisAngle<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>1<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> –<\/span>Math.<\/span>PI<\/span> \/<\/span> 2<\/span>)<\/span>
\n groundBody.<\/span>material =<\/span> groundMat
\n world.<\/span>addBody<\/span>(<\/span>groundBody)<\/span><\/p>\n

\/\/ \u53ef\u89c6\u5316\u5730\u9762<\/span>
\n const<\/span> groundGeo =<\/span> new<\/span> THREE.<\/span>PlaneGeometry<\/span>(<\/span>20<\/span>,<\/span> 20<\/span>)<\/span>
\n const<\/span> groundMat3 =<\/span> new<\/span> THREE.<\/span>MeshStandardMaterial<\/span>(<\/span>{<\/span>
\n color<\/span>:<\/span> 0x3a3a5a<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.8<\/span>,<\/span>
\n metalness<\/span>:<\/span> 0.1<\/span>,<\/span>
\n }<\/span>)<\/span>
\n const<\/span> groundMesh =<\/span> new<\/span> THREE.<\/span>Mesh<\/span>(<\/span>groundGeo,<\/span> groundMat3)<\/span>
\n groundMesh.<\/span>rotation.<\/span>x =<\/span> –<\/span>Math.<\/span>PI<\/span> \/<\/span> 2<\/span>
\n groundMesh.<\/span>position.<\/span>y =<\/span> –<\/span>0.01<\/span>
\n groundMesh.<\/span>receiveShadow =<\/span> true<\/span>
\n scene.<\/span>add<\/span>(<\/span>groundMesh)<\/span><\/p>\n

\/\/ \u7f51\u683c\u8f85\u52a9\u7ebf<\/span>
\n const<\/span> gridHelper =<\/span> new<\/span> THREE.<\/span>GridHelper<\/span>(<\/span>20<\/span>,<\/span> 20<\/span>,<\/span> 0x6666aa<\/span>,<\/span> 0x444466<\/span>)<\/span>
\n gridHelper.<\/span>position.<\/span>y =<\/span> 0<\/span>
\n scene.<\/span>add<\/span>(<\/span>gridHelper)<\/span><\/p>\n

\/\/ ========== 5. \u521b\u5efa\u7269\u7406\u7269\u4f53\u4e0e\u53ef\u89c6\u5316\u6620\u5c04 ==========<\/span>
\n const<\/span> physicsToVisual =<\/span> new<\/span> Map<\/span>(<\/span>)<\/span><\/p>\n

function<\/span> createPhysicalObject<\/span>(<\/span>body,<\/span> mesh<\/span>)<\/span> {<\/span>
\n physicsToVisual.<\/span>set<\/span>(<\/span>body,<\/span> mesh)<\/span>
\n mesh.<\/span>castShadow =<\/span> true<\/span>
\n mesh.<\/span>receiveShadow =<\/span> true<\/span>
\n scene.<\/span>add<\/span>(<\/span>mesh)<\/span>
\n world.<\/span>addBody<\/span>(<\/span>body)<\/span>
\n return<\/span> {<\/span> body,<\/span> mesh }<\/span>
\n }<\/span><\/p>\n

\/\/ 5.1 \u521b\u5efa\u76d2\u5b50\u5806<\/span>
\n const<\/span> boxPositions =<\/span> [<\/span>
\n [<\/span>–<\/span>2.5<\/span>,<\/span> 0.5<\/span>,<\/span> 0<\/span>]<\/span>,<\/span>
\n [<\/span>–<\/span>1.5<\/span>,<\/span> 1.0<\/span>,<\/span> 0<\/span>]<\/span>,<\/span>
\n [<\/span>–<\/span>0.5<\/span>,<\/span> 1.5<\/span>,<\/span> 0<\/span>]<\/span>,<\/span>
\n [<\/span>0.5<\/span>,<\/span> 2.0<\/span>,<\/span> 0<\/span>]<\/span>,<\/span>
\n [<\/span>1.5<\/span>,<\/span> 2.5<\/span>,<\/span> 0<\/span>]<\/span>,<\/span>
\n ]<\/span><\/p>\n

boxPositions.<\/span>forEach<\/span>(<\/span>(<\/span>pos,<\/span> i<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> size =<\/span> 0.5<\/span> +<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 0.2<\/span>
\n const<\/span> body =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span>
\n mass<\/span>:<\/span> 1<\/span>,<\/span>
\n position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>pos[<\/span>0<\/span>]<\/span>,<\/span> pos[<\/span>1<\/span>]<\/span>,<\/span> pos[<\/span>2<\/span>]<\/span>)<\/span>,<\/span>
\n shape<\/span>:<\/span> new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>size,<\/span> size,<\/span> size)<\/span>)<\/span>,<\/span>
\n material<\/span>:<\/span> boxMat,<\/span>
\n }<\/span>)<\/span>
\n const<\/span> geo =<\/span> new<\/span> THREE.<\/span>BoxGeometry<\/span>(<\/span>size *<\/span> 2<\/span>,<\/span> size *<\/span> 2<\/span>,<\/span> size *<\/span> 2<\/span>)<\/span>
\n const<\/span> mat =<\/span> new<\/span> THREE.<\/span>MeshStandardMaterial<\/span>(<\/span>{<\/span>
\n color<\/span>:<\/span> new<\/span> THREE.<\/span>Color<\/span>(<\/span>)<\/span>.<\/span>setHSL<\/span>(<\/span>0.6<\/span> +<\/span> i *<\/span> 0.05<\/span>,<\/span> 0.7<\/span>,<\/span> 0.5<\/span>)<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.3<\/span>,<\/span>
\n metalness<\/span>:<\/span> 0.2<\/span>,<\/span>
\n }<\/span>)<\/span>
\n const<\/span> mesh =<\/span> new<\/span> THREE.<\/span>Mesh<\/span>(<\/span>geo,<\/span> mat)<\/span>
\n createPhysicalObject<\/span>(<\/span>body,<\/span> mesh)<\/span>
\n }<\/span>)<\/span><\/p>\n

\/\/ 5.2 \u521b\u5efa\u7403\u4f53<\/span>
\n const<\/span> spherePositions =<\/span> [<\/span>
\n [<\/span>–<\/span>3<\/span>,<\/span> 1.5<\/span>,<\/span> 2.5<\/span>]<\/span>,<\/span>
\n [<\/span>0<\/span>,<\/span> 2.0<\/span>,<\/span> 3.0<\/span>]<\/span>,<\/span>
\n [<\/span>3<\/span>,<\/span> 1.5<\/span>,<\/span> 2.5<\/span>]<\/span>,<\/span>
\n ]<\/span><\/p>\n

spherePositions.<\/span>forEach<\/span>(<\/span>(<\/span>pos,<\/span> i<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> radius =<\/span> 0.4<\/span> +<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 0.2<\/span>
\n const<\/span> body =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span>
\n mass<\/span>:<\/span> 1<\/span>,<\/span>
\n position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>pos[<\/span>0<\/span>]<\/span>,<\/span> pos[<\/span>1<\/span>]<\/span>,<\/span> pos[<\/span>2<\/span>]<\/span>)<\/span>,<\/span>
\n shape<\/span>:<\/span> new<\/span> Sphere<\/span>(<\/span>radius)<\/span>,<\/span>
\n material<\/span>:<\/span> ballMat,<\/span>
\n }<\/span>)<\/span>
\n const<\/span> geo =<\/span> new<\/span> THREE.<\/span>SphereGeometry<\/span>(<\/span>radius,<\/span> 32<\/span>,<\/span> 32<\/span>)<\/span>
\n const<\/span> mat =<\/span> new<\/span> THREE.<\/span>MeshStandardMaterial<\/span>(<\/span>{<\/span>
\n color<\/span>:<\/span> new<\/span> THREE.<\/span>Color<\/span>(<\/span>)<\/span>.<\/span>setHSL<\/span>(<\/span>0.95<\/span> +<\/span> i *<\/span> 0.05<\/span>,<\/span> 0.8<\/span>,<\/span> 0.6<\/span>)<\/span>,<\/span>
\n roughness<\/span>:<\/span> 0.2<\/span>,<\/span>
\n metalness<\/span>:<\/span> 0.3<\/span>,<\/span>
\n }<\/span>)<\/span>
\n const<\/span> mesh =<\/span> new<\/span> THREE.<\/span>Mesh<\/span>(<\/span>geo,<\/span> mat)<\/span>
\n createPhysicalObject<\/span>(<\/span>body,<\/span> mesh)<\/span>
\n }<\/span>)<\/span><\/p>\n

\/\/ 5.3 \u521b\u5efa\u9759\u6001\u5899（\u4f5c\u4e3a\u969c\u788d\u7269）<\/span>
\n const<\/span> wallBody =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 0<\/span>,<\/span> position<\/span>:<\/span> new<\/span> Vec3<\/span>(<\/span>4<\/span>,<\/span> 0.5<\/span>,<\/span> –<\/span>1<\/span>)<\/span> }<\/span>)<\/span>
\n wallBody.<\/span>addShape<\/span>(<\/span>new<\/span> Box<\/span>(<\/span>new<\/span> Vec3<\/span>(<\/span>0.2<\/span>,<\/span> 0.5<\/span>,<\/span> 1.5<\/span>)<\/span>)<\/span>)<\/span>
\n wallBody.<\/span>material =<\/span> groundMat
\n world.<\/span>addBody<\/span>(<\/span>wallBody)<\/span><\/p>\n

const<\/span> wallMesh =<\/span> new<\/span> THREE.<\/span>Mesh<\/span>(<\/span>
\n new<\/span> THREE.<\/span>BoxGeometry<\/span>(<\/span>0.4<\/span>,<\/span> 1<\/span>,<\/span> 3<\/span>)<\/span>,<\/span>
\n new<\/span> THREE.<\/span>MeshStandardMaterial<\/span>(<\/span>{<\/span> color<\/span>:<\/span> 0x666688<\/span>,<\/span> roughness<\/span>:<\/span> 0.7<\/span> }<\/span>)<\/span>
\n )<\/span>
\n wallMesh.<\/span>position.<\/span>set<\/span>(<\/span>4<\/span>,<\/span> 0.5<\/span>,<\/span> –<\/span>1<\/span>)<\/span>
\n wallMesh.<\/span>castShadow =<\/span> true<\/span>
\n wallMesh.<\/span>receiveShadow =<\/span> true<\/span>
\n scene.<\/span>add<\/span>(<\/span>wallMesh)<\/span><\/p>\n

\/\/ ========== 6. \u9f20\u6807\u4ea4\u4e92 ==========<\/span>
\n const<\/span> raycaster =<\/span> new<\/span> THREE.<\/span>Raycaster<\/span>(<\/span>)<\/span>
\n const<\/span> pointer =<\/span> new<\/span> THREE.<\/span>Vector2<\/span>(<\/span>)<\/span><\/p>\n

renderer.<\/span>domElement.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> (<\/span>event<\/span>)<\/span> =><\/span> {<\/span>
\n pointer.<\/span>x =<\/span> (<\/span>event.<\/span>clientX \/<\/span> window.<\/span>innerWidth)<\/span> *<\/span> 2<\/span> –<\/span> 1<\/span>
\n pointer.<\/span>y =<\/span> –<\/span>(<\/span>event.<\/span>clientY \/<\/span> window.<\/span>innerHeight)<\/span> *<\/span> 2<\/span> +<\/span> 1<\/span><\/p>\n

raycaster.<\/span>setFromCamera<\/span>(<\/span>pointer,<\/span> camera)<\/span><\/p>\n

\/\/ \u68c0\u6d4b\u70b9\u51fb\u5230\u7684\u7269\u4f53<\/span>
\n const<\/span> meshes =<\/span> Array.<\/span>from<\/span>(<\/span>physicsToVisual.<\/span>values<\/span>(<\/span>)<\/span>)<\/span>
\n const<\/span> intersects =<\/span> raycaster.<\/span>intersectObjects<\/span>(<\/span>meshes)<\/span><\/p>\n

if<\/span> (<\/span>intersects.<\/span>length ><\/span> 0<\/span>)<\/span> {<\/span>
\n const<\/span> hitMesh =<\/span> intersects[<\/span>0<\/span>]<\/span>.<\/span>object
\n let<\/span> hitBody =<\/span> null<\/span>
\n for<\/span> (<\/span>const<\/span> [<\/span>body,<\/span> mesh]<\/span> of<\/span> physicsToVisual)<\/span> {<\/span>
\n if<\/span> (<\/span>mesh ===<\/span> hitMesh)<\/span> {<\/span>
\n hitBody =<\/span> body
\n break<\/span>
\n }<\/span>
\n }<\/span>
\n if<\/span> (<\/span>hitBody &&<\/span> hitBody.<\/span>mass ><\/span> 0<\/span>)<\/span> {<\/span>
\n \/\/ \u65bd\u52a0\u5411\u4e0a\u7684\u51b2\u91cf<\/span>
\n const<\/span> impulse =<\/span> new<\/span> Vec3<\/span>(<\/span>
\n (<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> –<\/span> 0.5<\/span>)<\/span> *<\/span> 2<\/span>,<\/span>
\n 5<\/span> +<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 3<\/span>,<\/span>
\n (<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> –<\/span> 0.5<\/span>)<\/span> *<\/span> 2<\/span>
\n )<\/span>
\n hitBody.<\/span>applyImpulse<\/span>(<\/span>impulse,<\/span> hitBody.<\/span>position)<\/span>
\n hitBody.<\/span>wakeUp<\/span>(<\/span>)<\/span><\/p>\n

\/\/ \u95ea\u70c1\u53cd\u9988<\/span>
\n if<\/span> (<\/span>hitMesh.<\/span>material)<\/span> {<\/span>
\n const<\/span> origColor =<\/span> hitMesh.<\/span>material.<\/span>color.<\/span>clone<\/span>(<\/span>)<\/span>
\n hitMesh.<\/span>material.<\/span>color.<\/span>setHex<\/span>(<\/span>0xffffff<\/span>)<\/span>
\n setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n hitMesh.<\/span>material.<\/span>color.<\/span>copy<\/span>(<\/span>origColor)<\/span>
\n }<\/span>,<\/span> 100<\/span>)<\/span>
\n }<\/span>
\n }<\/span>
\n }<\/span>
\n }<\/span>)<\/span><\/p>\n

\/\/ \u952e\u76d8：\u6309 R \u91cd\u7f6e\u573a\u666f<\/span>
\n window.<\/span>addEventListener<\/span>(<\/span>'keydown'<\/span>,<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>e.<\/span>key ===<\/span> 'r'<\/span> ||<\/span> e.<\/span>key ===<\/span> 'R'<\/span>)<\/span> {<\/span>
\n \/\/ \u79fb\u9664\u6240\u6709\u52a8\u6001\u7269\u4f53<\/span>
\n const<\/span> toRemove =<\/span> [<\/span>]<\/span>
\n for<\/span> (<\/span>const<\/span> [<\/span>body,<\/span> mesh]<\/span> of<\/span> physicsToVisual)<\/span> {<\/span>
\n if<\/span> (<\/span>body.<\/span>mass ><\/span> 0<\/span>)<\/span> {<\/span>
\n world.<\/span>removeBody<\/span>(<\/span>body)<\/span>
\n scene.<\/span>remove<\/span>(<\/span>mesh)<\/span>
\n toRemove.<\/span>push<\/span>(<\/span>body)<\/span>
\n }<\/span>
\n }<\/span>
\n toRemove.<\/span>forEach<\/span>(<\/span>b<\/span> =><\/span> physicsToVisual.<\/span>delete<\/span>(<\/span>b)<\/span>)<\/span><\/p>\n

\/\/ \u91cd\u65b0\u521b\u5efa\u7269\u4f53…<\/span>
\n \/\/ \u6b64\u5904\u7b80\u5316\u4e3a\u91cd\u65b0\u52a0\u8f7d\u9875\u9762<\/span>
\n window.<\/span>location.<\/span>reload<\/span>(<\/span>)<\/span>
\n }<\/span>
\n }<\/span>)<\/span><\/p>\n

\/\/ ========== 7. \u7269\u7406\u4e0e\u6e32\u67d3\u540c\u6b65 ==========<\/span>
\n const<\/span> fixedTimeStep =<\/span> 1<\/span> \/<\/span> 60<\/span>
\n const<\/span> maxSubSteps =<\/span> 3<\/span><\/p>\n

function<\/span> animate<\/span>(<\/span>)<\/span> {<\/span>
\n requestAnimationFrame<\/span>(<\/span>animate)<\/span><\/p>\n

\/\/ \u6b65\u8fdb\u7269\u7406<\/span>
\n world.<\/span>step<\/span>(<\/span>fixedTimeStep,<\/span> undefined<\/span>,<\/span> maxSubSteps)<\/span><\/p>\n

\/\/ \u540c\u6b65\u7269\u7406\u5230\u53ef\u89c6\u5316<\/span>
\n for<\/span> (<\/span>const<\/span> [<\/span>body,<\/span> mesh]<\/span> of<\/span> physicsToVisual)<\/span> {<\/span>
\n mesh.<\/span>position.<\/span>copy<\/span>(<\/span>body.<\/span>position)<\/span>
\n mesh.<\/span>quaternion.<\/span>copy<\/span>(<\/span>body.<\/span>quaternion)<\/span>
\n }<\/span><\/p>\n

controls.<\/span>update<\/span>(<\/span>)<\/span>
\n renderer.<\/span>render<\/span>(<\/span>scene,<\/span> camera)<\/span>
\n }<\/span><\/p>\n

animate<\/span>(<\/span>)<\/span><\/p>\n

\/\/ ========== 8. \u7a97\u53e3\u81ea\u9002\u5e94 ==========<\/span>
\n window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n camera.<\/span>aspect =<\/span> window.<\/span>innerWidth \/<\/span> window.<\/span>innerHeight
\n camera.<\/span>updateProjectionMatrix<\/span>(<\/span>)<\/span>
\n renderer.<\/span>setSize<\/span>(<\/span>window.<\/span>innerWidth,<\/span> window.<\/span>innerHeight)<\/span>
\n }<\/span>)<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>'🚀 cannon-es \u5b8c\u6574\u793a\u4f8b\u5df2\u542f\u52a8！'<\/span>)<\/span>
\n console.<\/span>log<\/span>(<\/span>'💡 \u70b9\u51fb\u7269\u4f53\u65bd\u52a0\u51b2\u91cf | \u6309 R \u91cd\u7f6e\u573a\u666f'<\/span>)<\/span>
\n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n<\/<\/span>body<\/span>><\/span><\/span>
\n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

\n

\u516b\u3001\u6027\u80fd\u4f18\u5316<\/h3>\n

8.1 \u542f\u7528\u4f11\u7720<\/h4>\n

world.<\/span>allowSleep =<\/span> true<\/span>
\nworld.<\/span>sleepTimeLimit =<\/span> 0.5<\/span>
\nworld.<\/span>sleepSpeedLimit =<\/span> 0.1<\/span><\/p>\n

8.2 \u51cf\u5c11\u6c42\u89e3\u5668\u8fed\u4ee3\u6b21\u6570<\/h4>\n

world.<\/span>solver.<\/span>iterations =<\/span> 5<\/span> \/\/ \u9ed8\u8ba4 10，\u964d\u4f4e\u53ef\u63d0\u5347\u6027\u80fd\u4f46\u7cbe\u5ea6\u4e0b\u964d<\/span><\/p>\n

8.3 \u4f7f\u7528\u5bbd\u9636\u6bb5\u78b0\u649e\u8fc7\u6ee4<\/h4>\n

\/\/ \u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u78b0\u649e\u68c0\u6d4b<\/span>
\nbody.<\/span>collisionFilterGroup =<\/span> 1<\/span>
\nbody.<\/span>collisionFilterMask =<\/span> 2<\/span> \/\/ \u53ea\u4e0e\u7ec4 2 \u78b0\u649e<\/span><\/p>\n

8.4 \u6279\u91cf\u64cd\u4f5c<\/h4>\n

\/\/ \u6279\u91cf\u6dfb\u52a0\u7269\u4f53\u65f6\u6682\u505c\u4e16\u754c<\/span>
\nworld.<\/span>broadphase.<\/span>useBoundingBoxes =<\/span> true<\/span> \/\/ \u4f7f\u7528 AABB \u52a0\u901f<\/span><\/p>\n

\/\/ \u6279\u91cf\u6dfb\u52a0<\/span>
\nconst<\/span> bodies =<\/span> [<\/span>]<\/span>
\nfor<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> 100<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n const<\/span> b =<\/span> new<\/span> Body<\/span>(<\/span>{<\/span> mass<\/span>:<\/span> 1<\/span> }<\/span>)<\/span>
\n \/\/ … \u914d\u7f6e<\/span>
\n bodies.<\/span>push<\/span>(<\/span>b)<\/span>
\n}<\/span>
\nbodies.<\/span>forEach<\/span>(<\/span>b<\/span> =><\/span> world.<\/span>addBody<\/span>(<\/span>b)<\/span>)<\/span><\/p>\n

8.5 \u964d\u4f4e\u78b0\u649e\u68c0\u6d4b\u7cbe\u5ea6<\/h4>\n

\/\/ \u589e\u52a0\u5bb9\u5dee，\u51cf\u5c11\u68c0\u6d4b\u6b21\u6570<\/span>
\nworld.<\/span>solver.<\/span>tolerance =<\/span> 0.01<\/span> \/\/ \u9ed8\u8ba4 0.001<\/span><\/p>\n

8.6 \u4f7f\u7528 WASM（\u5b9e\u9a8c\u6027）<\/h4>\n

cannon-es \u76ee\u524d\u4e0d\u539f\u751f\u652f\u6301 WASM，\u4f46\u53ef\u4ee5\u8003\u8651\u4f7f\u7528 cannon-es \u7684 C++ \u5206\u652f\u6216\u7b49\u5f85\u672a\u6765\u66f4\u65b0\u3002<\/p>\n

\n

\u4e5d\u3001\u5e38\u89c1\u95ee\u9898\u4e0e\u8c03\u8bd5<\/h3>\n

9.1 \u7269\u4f53\u7a7f\u900f\u5730\u9762<\/h4>\n

\/\/ \u589e\u52a0\u6c42\u89e3\u5668\u8fed\u4ee3\u6b21\u6570<\/span>
\nworld.<\/span>solver.<\/span>iterations =<\/span> 15<\/span><\/p>\n

\/\/ \u51cf\u5c0f\u65f6\u95f4\u6b65\u957f<\/span>
\nworld.<\/span>step<\/span>(<\/span>1<\/span> \/<\/span> 120<\/span>,<\/span> undefined<\/span>,<\/span> 5<\/span>)<\/span><\/p>\n

\/\/ \u68c0\u67e5\u8d28\u91cf\u662f\u5426\u5408\u7406<\/span>
\nbody.<\/span>mass =<\/span> 1<\/span> \/\/ \u8d28\u91cf\u8fc7\u5927\u4f1a\u5bfc\u81f4\u7a7f\u900f<\/span><\/p>\n

9.2 \u7269\u4f53\u6296\u52a8<\/h4>\n

\/\/ \u589e\u52a0\u963b\u5c3c<\/span>
\nbody.<\/span>linearDamping =<\/span> 0.01<\/span>
\nbody.<\/span>angularDamping =<\/span> 0.01<\/span><\/p>\n

\/\/ \u964d\u4f4e\u6c42\u89e3\u5668\u5bb9\u5dee<\/span>
\nworld.<\/span>solver.<\/span>tolerance =<\/span> 0.0001<\/span><\/p>\n

9.3 \u8c03\u8bd5\u53ef\u89c6\u5316<\/h4>\n

\/\/ \u4f7f\u7528 cannon-es-debugger（\u9700\u8981\u5355\u72ec\u5b89\u88c5）<\/span>
\n\/\/ yarn add cannon-es-debugger<\/span><\/p>\n

\/\/ \u6216\u624b\u52a8\u7ed8\u5236\u78b0\u649e\u4f53<\/span>
\nimport<\/span> {<\/span> Body,<\/span> Vec3 }<\/span> from<\/span> 'cannon-es'<\/span>
\n\/\/ \u4f7f\u7528 Three.js \u8f85\u52a9\u7ebf<\/span>
\nconst<\/span> helper =<\/span> new<\/span> THREE.<\/span>BoxHelper<\/span>(<\/span>mesh)<\/span>
\nscene.<\/span>add<\/span>(<\/span>helper)<\/span><\/p>\n

9.4 \u5e38\u89c1\u9519\u8bef<\/h4>\n\n\u9519\u8bef\u89e3\u51b3\u65b9\u6848<\/tr>\n\n\n\n\n\n
Cannot read property 'quaternion' of undefined<\/td>\n\u786e\u4fdd body \u5df2\u6dfb\u52a0\u5230 world<\/td>\n<\/tr>\n
\u7269\u4f53\u98de\u51fa\u53bb<\/td>\n\u68c0\u67e5\u8d28\u91cf\u662f\u5426\u5408\u7406，\u6216\u7ea6\u675f\u662f\u5426\u8fc7\u5f3a<\/td>\n<\/tr>\n
\u78b0\u649e\u4e8b\u4ef6\u4e0d\u89e6\u53d1<\/td>\n\u68c0\u67e5\u78b0\u649e\u8fc7\u6ee4\u63a9\u7801\u8bbe\u7f6e<\/td>\n<\/tr>\n
\u6027\u80fd\u4e0b\u964d<\/td>\n\u51cf\u5c11\u7269\u4f53\u6570\u91cf，\u542f\u7528\u4f11\u7720，\u964d\u4f4e\u8fed\u4ee3\u6b21\u6570<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

\u5341\u3001API \u901f\u67e5<\/h3>\n

World<\/h4>\n\n\u65b9\u6cd5\/\u5c5e\u6027\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n\n\n
world.gravity<\/td>\n\u91cd\u529b\u5411\u91cf<\/td>\n<\/tr>\n
world.addBody(body)<\/td>\n\u6dfb\u52a0\u521a\u4f53<\/td>\n<\/tr>\n
world.removeBody(body)<\/td>\n\u79fb\u9664\u521a\u4f53<\/td>\n<\/tr>\n
world.addConstraint(constraint)<\/td>\n\u6dfb\u52a0\u7ea6\u675f<\/td>\n<\/tr>\n
world.removeConstraint(constraint)<\/td>\n\u79fb\u9664\u7ea6\u675f<\/td>\n<\/tr>\n
world.addContactMaterial(mat)<\/td>\n\u6dfb\u52a0\u63a5\u89e6\u6750\u8d28<\/td>\n<\/tr>\n
world.removeContactMaterial(mat)<\/td>\n\u79fb\u9664\u63a5\u89e6\u6750\u8d28<\/td>\n<\/tr>\n
world.step(dt, time, maxSubSteps)<\/td>\n\u6b65\u8fdb\u7269\u7406<\/td>\n<\/tr>\n
world.bodies<\/td>\n\u6240\u6709\u521a\u4f53\u6570\u7ec4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Body<\/h4>\n\n\u65b9\u6cd5\/\u5c5e\u6027\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
body.mass<\/td>\n\u8d28\u91cf<\/td>\n<\/tr>\n
body.position<\/td>\n\u4f4d\u7f6e (Vec3)<\/td>\n<\/tr>\n
body.quaternion<\/td>\n\u65cb\u8f6c (Quaternion)<\/td>\n<\/tr>\n
body.velocity<\/td>\n\u7ebf\u901f\u5ea6 (Vec3)<\/td>\n<\/tr>\n
body.angularVelocity<\/td>\n\u89d2\u901f\u5ea6 (Vec3)<\/td>\n<\/tr>\n
body.addShape(shape)<\/td>\n\u6dfb\u52a0\u78b0\u649e\u5f62\u72b6<\/td>\n<\/tr>\n
body.removeShape(shape)<\/td>\n\u79fb\u9664\u78b0\u649e\u5f62\u72b6<\/td>\n<\/tr>\n
body.applyForce(force, point)<\/td>\n\u65bd\u52a0\u529b<\/td>\n<\/tr>\n
body.applyImpulse(impulse, point)<\/td>\n\u65bd\u52a0\u51b2\u91cf<\/td>\n<\/tr>\n
body.wakeUp()<\/td>\n\u5524\u9192\u7269\u4f53<\/td>\n<\/tr>\n
body.sleep()<\/td>\n\u4f11\u7720\u7269\u4f53<\/td>\n<\/tr>\n
body.overlaps(other)<\/td>\n\u68c0\u6d4b\u91cd\u53e0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Shape<\/h4>\n\n\u5f62\u72b6\u6784\u9020\u51fd\u6570\u53c2\u6570<\/tr>\n\n\n\n\n\n\n\n
Box(halfExtents)<\/td>\nVec3 \u534a\u957f\u5bbd\u9ad8<\/td>\n<\/tr>\n
Sphere(radius)<\/td>\nnumber \u534a\u5f84<\/td>\n<\/tr>\n
Plane()<\/td>\n\u65e0<\/td>\n<\/tr>\n
Cylinder(radiusTop, radiusBottom, height, numSegments)<\/td>\n\u4e0a\u4e0b\u534a\u5f84\u3001\u9ad8\u5ea6\u3001\u5206\u6bb5\u6570<\/td>\n<\/tr>\n
Cone(radius, height, numSegments)<\/td>\n\u534a\u5f84\u3001\u9ad8\u5ea6\u3001\u5206\u6bb5\u6570<\/td>\n<\/tr>\n
Trimesh(vertices, indices)<\/td>\n\u9876\u70b9\u6570\u7ec4\u3001\u7d22\u5f15\u6570\u7ec4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

\u5341\u4e00\u3001\u8d44\u6e90\u4e0e\u53c2\u8003<\/h3>\n
    \n
  • \u5b98\u65b9\u4ed3\u5e93: https:\/\/github.com\/pmndrs\/cannon-es<\/li>\n
  • API \u6587\u6863: https:\/\/pmndrs.github.io\/cannon-es\/docs\/<\/li>\n
  • \u793a\u4f8b\u96c6\u5408: https:\/\/github.com\/pmndrs\/cannon-es\/tree\/main\/examples<\/li>\n
  • Three.js \u96c6\u6210: https:\/\/github.com\/pmndrs\/cannon-es\/tree\/main\/examples\/threejs<\/li>\n<\/ul>\n
    \n

    \u5341\u4e8c\u3001\u7248\u672c\u5386\u53f2<\/h3>\n\n\u7248\u672c\u4e3b\u8981\u53d8\u5316<\/tr>\n\n\n\n\n\n
    v0.20.0<\/td>\n\u4fee\u590d\u5927\u91cf bug，\u6539\u8fdb TypeScript \u652f\u6301<\/td>\n<\/tr>\n
    v0.19.0<\/td>\n\u65b0\u589e Trimesh \u652f\u6301，\u4f18\u5316\u6027\u80fd<\/td>\n<\/tr>\n
    v0.18.0<\/td>\n\u91cd\u6784\u7ea6\u675f\u7cfb\u7edf，\u6539\u8fdb API<\/td>\n<\/tr>\n
    v0.17.0<\/td>\n\u521d\u59cb ESM \u91cd\u6784\u7248\u672c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n

    \u7ed3\u8bed<\/h3>\n

    cannon-es \u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u4e14\u6613\u4e8e\u4f7f\u7528\u7684 3D \u7269\u7406\u5f15\u64ce\u3002\u901a\u8fc7\u672c\u6307\u5357，\u4f60\u5e94\u8be5\u80fd\u591f\u5feb\u901f\u4e0a\u624b\u5e76\u6784\u5efa\u590d\u6742\u7684\u7269\u7406\u573a\u666f\u3002\u5efa\u8bae\u4ece\u57fa\u7840\u793a\u4f8b\u5f00\u59cb，\u9010\u6b65\u63a2\u7d22\u9ad8\u7ea7\u529f\u80fd\u3002\u5982\u679c\u9047\u5230\u95ee\u9898，\u53ef\u4ee5\u67e5\u9605\u5b98\u65b9\u6587\u6863\u6216\u5728 GitHub \u63d0\u4ea4 issue\u3002<\/p>\n

    Happy Physics Coding! 🚀<\/p>\n","protected":false},"excerpt":{"rendered":"

    cannon-es \u4f7f\u7528\u6307\u5357
    \ncannon-es \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 3D \u7269\u7406\u5f15\u64ce，\u4e13\u4e3a Web \u73af\u5883\u8bbe\u8ba1\u3002\u5b83\u662f\u7ecf\u5178 cannon.js \u7684\u73b0\u4ee3\u5206\u652f，\u652f\u6301 ESM \u6a21\u5757\u5316\u3001TypeScript \u7c7b\u578b\u5b89\u5168，\u5e76\u6301\u7eed\u5408\u5e76\u793e\u533a\u6539\u8fdb\u3002\u4e00\u3001\u5b89\u88c5\u4e0e\u5f15\u5165
    \n1.1 Node.js \/ \u6784\u5efa\u5de5\u5177\u73af\u5883
    \nyarn add cannon-es
    \n# \u6216
    \nnpm install cannon-es\/\/ \u6309\u9700\u5f15\u5165（\u63a8\u8350，\u652f\u6301 tree sh<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2477,964,187,87,190],"topic":[],"class_list":["post-94269","post","type-post","status-publish","format-standard","hentry","category-server","tag-3d","tag-html5","tag-javascript","tag-87","tag-190"],"yoast_head":"\ncannon-es \u4f7f\u7528\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/94269.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"cannon-es \u4f7f\u7528\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"cannon-es \u4f7f\u7528\u6307\u5357 cannon-es \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 3D \u7269\u7406\u5f15\u64ce，\u4e13\u4e3a Web \u73af\u5883\u8bbe\u8ba1\u3002\u5b83\u662f\u7ecf\u5178 cannon.js \u7684\u73b0\u4ee3\u5206\u652f，\u652f\u6301 ESM \u6a21\u5757\u5316\u3001TypeScript \u7c7b\u578b\u5b89\u5168，\u5e76\u6301\u7eed\u5408\u5e76\u793e\u533a\u6539\u8fdb\u3002\u4e00\u3001\u5b89\u88c5\u4e0e\u5f15\u5165 1.1 Node.js \/ \u6784\u5efa\u5de5\u5177\u73af\u5883 yarn add cannon-es # \u6216 npm install cannon-es\/\/ \u6309\u9700\u5f15\u5165（\u63a8\u8350，\u652f\u6301 tree sh\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/94269.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-13T22:48:54+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/94269.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/94269.html\",\"name\":\"cannon-es \u4f7f\u7528\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-08-13T22:48:54+00:00\",\"dateModified\":\"2026-08-13T22:48:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/94269.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/94269.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/94269.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"cannon-es \u4f7f\u7528\u6307\u5357\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"cannon-es \u4f7f\u7528\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/94269.html","og_locale":"zh_CN","og_type":"article","og_title":"cannon-es \u4f7f\u7528\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"cannon-es \u4f7f\u7528\u6307\u5357 cannon-es \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 3D \u7269\u7406\u5f15\u64ce，\u4e13\u4e3a Web \u73af\u5883\u8bbe\u8ba1\u3002\u5b83\u662f\u7ecf\u5178 cannon.js \u7684\u73b0\u4ee3\u5206\u652f，\u652f\u6301 ESM \u6a21\u5757\u5316\u3001TypeScript \u7c7b\u578b\u5b89\u5168，\u5e76\u6301\u7eed\u5408\u5e76\u793e\u533a\u6539\u8fdb\u3002\u4e00\u3001\u5b89\u88c5\u4e0e\u5f15\u5165 1.1 Node.js \/ \u6784\u5efa\u5de5\u5177\u73af\u5883 yarn add cannon-es # \u6216 npm install cannon-es\/\/ \u6309\u9700\u5f15\u5165（\u63a8\u8350，\u652f\u6301 tree sh","og_url":"https:\/\/www.wsisp.com\/helps\/94269.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-08-13T22:48:54+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"11 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/94269.html","url":"https:\/\/www.wsisp.com\/helps\/94269.html","name":"cannon-es \u4f7f\u7528\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-08-13T22:48:54+00:00","dateModified":"2026-08-13T22:48:54+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/94269.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/94269.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/94269.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"cannon-es \u4f7f\u7528\u6307\u5357"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/94269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=94269"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/94269\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=94269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=94269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=94269"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=94269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}