相关文章推荐
灰常酷的显示器  ·  逢甲大學-企業管理學系·  1 年前    · 
高大的火龙果  ·  《货币信用论大纲》【价格目录书评正版】_中图 ...·  1 年前    · 
腼腆的松球  ·  华南师范大学邮箱服务·  2 年前    · 
腼腆的饭卡  ·  中国现代花鸟画全集_百度百科·  2 年前    · 
飞奔的马铃薯  ·  写主题公园的英语作文- 知乎·  2 年前    · 
小百科  ›  1. 物理引擎CannonJS简介和引入| Three.js中文网
物理引擎 教程 threejs 物理引擎
俊秀的手套
5 月前
Three.js中文网 Three.js中文网
首页
免费视频
(opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
(opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 1. 数学几何计算基础

  • 2.位移、速度、加速度(向量)

  • 3.向量点乘、叉乘

  • 4.四元数、欧拉角(角度姿态)

  • 5.矩阵

  • 6.射线

  • 7.包围盒

  • 8.第一、三人称漫游

  • 9.漫游-八叉树碰撞检测

  • 10.CannonJS物理引擎

    • 1. 物理引擎CannonJS简介和引入
      • 2. CannonJS自由落体计算
      • 3. 练习-threejs可视化cannon计算结果
      • 4. CannonJS模拟乒乓球下落反弹
      • 5. 练习-修改小球参数
      • 6. 练习-点按钮重复下落
      • 7. CannonJS碰撞事件,碰撞声音
      • 8. 长方体Box碰撞体(箱子下落)
      • 9. 练习题-外部gltf箱子模型
      • 10. 凸多面体ConvexPolyhedron
  • Three.js进阶教程
  • 10.CannonJS物理引擎
郭隆邦
2023-09-28
目录

1. 物理引擎CannonJS简介和引入

# 物理引擎CannonJS简介和引入

JavaScript物理模拟引擎还是比较多的,比如Ammo.js、Physi.js、Cannon.js,这些引擎虽然语法细节有差异,但是在3D应用中开发思路是相似的。

本课程就以Cannon.js为例给大家讲解 three.js 和 物理引擎 的结合。

# github资源cannon.js

github资源 cannon.js (opens new window) :https://github.com/schteppe/cannon.js

cannon.js 文档 :可以在本地静态服务器打开 cannon.js\docs\index.html 预览Canonjs引擎的文档。

cannon.js 案例 : cannon.js\examples\ 和 \demos\ 目录下可以看到一些cannonjs和three.js结合的一些小例子。

# github资源cannon-es

cannon-es 对 cannon.js 进行了重写,补充支持了ES6和Typescript语法。

不过除了es语法版本问题,也要注意一点就是 cannon-es 也改变了 cannon.js 部分API写法,这一点提醒大家,你查看别人文档或代码一定注意,别人用的 cannon.js 还是 cannon-es 。

github资源 cannon-es (opens new window) :https://github.com/dreammonkey/cannon-es

cannon-es在线文档 (opens new window) :https://pmndrs.github.io/cannon-es/docs/index.html

cannon-es在线案例 (opens new window) :https://pmndrs.github.io/cannon-es/

cannon-es 案例 : cannon-es\examples\ 目录下可以看到一些cannonjs和three.js结合的一些小例子。

本课程使用 cannon-es 给大家讲解CannonJS的使用。

# cannon-es安装和引入

在工程化开发的时候可以通过npm命令行安装cannon.js模块。

npm install --save cannon-es
// 某个API
import {World, Vec3} from "cannon-es";
// 全部API一次性引入
import * as CANNON from "cannon-es";

咱们课件中是在 .html 文件中直接引入的cannon-es,实际开发,用上面npm安装方式引入即可。

 <script type="importmap">
			"imports": {
        		"cannon-es": "../cannon-es/dist/cannon-es.js"
	</script>
  <script type="module">
    import * as CANNON from 'cannon-es';
    // 测试是否引入成功
    console.log('CANNON', CANNON.World); 
    import { World } from 'cannon-es';
    console.log('World', World);
  </script>
6. 简化碰撞体(提升八叉树计算性能)
2. CannonJS自由落体计算

6. 简化碰撞体(提升八叉树计算性能) 2. CannonJS自由落体计算 → Theme by Vdoing 豫ICP备16004767号-2

 
推荐文章
灰常酷的显示器  ·  逢甲大學-企業管理學系
1 年前
高大的火龙果  ·  《货币信用论大纲》【价格目录书评正版】_中图网(原中国图书网)
1 年前
腼腆的松球  ·  华南师范大学邮箱服务
2 年前
腼腆的饭卡  ·  中国现代花鸟画全集_百度百科
2 年前
飞奔的马铃薯  ·  写主题公园的英语作文- 知乎
2 年前
Link管理   ·   Sov5搜索   ·   小百科
小百科 - 百科知识指南