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.第一、三人称漫游

    • 1. 键盘WASD按键状态记录
    • 2. W键控制角色模型运动
    • 3. 加速度(按键给玩家加速)
      • 4. 阻尼(玩家角色逐渐减速停止)
      • 5. 按键S退后运动
      • 6. 相机跟着玩家走(第三人称漫游)
      • 7. 鼠标左右拖动改变玩家视角
      • 8. 获取玩家(相机)正前方方向
      • 9. 鼠标上下移动只改变相机视角
      • 10. 玩家角色左右运动(叉乘)
      • 11. 鼠标滑动改变视角(指针锁定模式)
      • 12. 快捷键切换第一、第三人称
      • 13. 骨骼动画与运动状态关联
    • 9.漫游-八叉树碰撞检测

    • 10.CannonJS物理引擎

    • Three.js进阶教程
    • 8.第一、三人称漫游
    郭隆邦
    2023-09-03
    目录

    3. 加速度(按键给玩家加速)

    # 加速度(按键给玩家加速)

    上节课给大家讲解过,当你按下W键的时候,玩家角色模型,会运动,松开W键,人会停下来。但是这个运动效果是突然运动和突然停止,没有一个加速或减速的过程,本节课以W键为例,设置玩家加速过程,也就是当你按下W键以后,人的速度从0慢慢提升上来。

    const v = new THREE.Vector3(0, 0, 3);
    function render() {
        if (keyStates.W) {
            // 在间隔deltaTime时间内,玩家角色位移变化计算(速度*时间)
            const deltaPos = v.clone().multiplyScalar(deltaTime);
            player.position.add(deltaPos);//更新玩家角色的位置
        }
    }
    

    # 设置加速度

    // 用三维向量表示玩家角色(人)运动漫游速度
    const v = new THREE.Vector3(0, 0, 0);//初始速度设置为0
    const a = 12;//加速度:调节按键加速快慢
    // 渲染循环
    const clock = new THREE.Clock();
    function render() {
        const deltaTime = clock.getDelta();
        if (keyStates.W) {
            //先假设W键对应运动方向为z
            const front = new THREE.Vector3(0,0,1);
            // W键按下时候,速度随着时间增加
            v.add(front.multiplyScalar(a * deltaTime));
            // 在间隔deltaTime时间内,玩家角色位移变化计算(速度*时间)
            const deltaPos = v.clone().multiplyScalar(deltaTime);
            player.position.add(deltaPos);//更新玩家角色的位置
        }
        
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    render();
    

    # 限制最高速度

    执行上面代码,当你按下W键的时候,v会一直加速,这时候可以通过v.length()计算速度v的值,当然速度小一个临界值的时候,才增加速度v的大小。

    const vMax = 5;//限制玩家角色最大速度
    ...
    if (v.length() < vMax) {//限制最高速度
        // W键按下时候,速度随着时间增加
        v.add(front.multiplyScalar(a * deltaTime));
    }
    
    2. W键控制角色模型运动
    4. 阻尼(玩家角色逐渐减速停止)

    ← 2. W键控制角色模型运动 4. 阻尼(玩家角色逐渐减速停止)→

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