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-10-11
    目录

    5. 练习-修改小球参数

    # 练习-修改小球参数

    本节课不讲解新的CannonJS知识点,算是一个练习题,就是修改小球相关参数,更像生活中乒乓球下落的感觉。

    # 下落真实感问题

    生活中大家看到的乒乓球,一般也就是从一两米以内位置下落,咱们上节课直接放到了100m高度,自由下落时间肯定会比较长,你会感觉感觉不太真实,当然你可以把重力加速度增加到特别大,去减少下落时间。

    // 设置物理世界重力加速度
    // world.gravity.set(0, -9.8, 0);
    world.gravity.set(0, -1000, 0);
    

    不过一般写CannonJS参数时候,都尽量参考物理世界的规律,重力加速度没必要过于离谱,所以可以使用下面方式,改变小球下落高度和自身尺寸,更加接近生活中的情况。

    // 设置物理世界重力加速度
    world.gravity.set(0, -9.8, 0);
    

    # 修改的参数

    在上节课基础上,重新修改下落高度,对比下落效果差异(原来下来高度比较高,整体观看,会感觉很慢)。

    // 物理小球:对应threejs的网格小球
    body.position.y = 1;
    // 网格小球
    mesh.position.y = 1;
    

    小球尺寸修改,和生活乒乓球尺寸相近即可

    // 物理小球
    const body = new CANNON.Body({
        mass: 0.03,//自由下落,这里重量不影响,是否修改无所谓
        shape: new CANNON.Sphere(0.02)
    });
    // 网格小球
    const geometry = new THREE.SphereGeometry(0.02);
    

    相机可以距离原点更近一些

    //相机
    const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
    // camera.position.set(292, 223, 185);
    camera.position.set(3,3,3);
    // 网格地面
    const planeGeometry = new THREE.PlaneGeometry(2, 2);
    
    4. CannonJS模拟乒乓球下落反弹
    6. 练习-点按钮重复下落

    ← 4. CannonJS模拟乒乓球下落反弹 6. 练习-点按钮重复下落→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式