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.向量点乘、叉乘

    • 1. 向量点乘dot
    • 2. 点乘练习-计算三角形夹角
    • 3. 点乘判断物体在人前或人后
      • 4. 点乘判断是否在扇形内
      • 5. 向量叉乘cross
      • 6. 叉乘判断人左右
      • 7. 点乘判断平行向量方向异同
      • 8. 判断两个点是否在线段同一侧
      • 9. 叉乘计算三角形法线
      • 10. 叉乘计算三角形面积
      • 11. 练习—计算物体的表面积
      • 12. 点到直线的距离
    • 4.四元数、欧拉角(角度姿态)

    • 5.矩阵

    • 6.射线

    • 7.包围盒

    • 8.第一、三人称漫游

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

    • 10.CannonJS物理引擎

    • Three.js进阶教程
    • 3.向量点乘、叉乘
    郭隆邦
    2023-06-05
    目录

    3. 点乘判断物体在人前或人后

    # 点乘判断物体在人前或人后

    通过three.js向量Vector3点乘方法.dot()判断物体在人的前面还是后面。

    # 已知条件

    人的正前方沿着z轴负半轴方向

    // a向量:人的正前方沿着z轴负半轴
    const a = new THREE.Vector3(0,0,-1);
    

    人的位置和物体的位置

    person.position.set(0,0,2);//人位置
    mesh.position.set(2,0,-3);//物体位置
    

    # 创建一个人指向物体的向量

    物体坐标减去人坐标,创建一个人指向物体的向量

    const b = mesh.position.clone().sub(person.position);
    

    # 向量夹角与人前后关系判断

    // a向量:人的正前方
    const a = new THREE.Vector3(0,0,-1);
    // 人指向物体的向量
    const b = mesh.position.clone().sub(person.position);
    

    物体绕着人360挪动位置,你创建不同位置人指向物体的向量b,你会发现向量b与向量a的夹角处于0~180度之间。

    0 ~ 90度:物体在人的前方,人指向物体的向量b与人正前方向量a夹角处于0 ~ 90之间。

    90 ~ 180度:物体在人的后方,人指向物体的向量b与人正前方向量a夹角处于90 ~ 180之间。

    # 0~180度三角函数余弦值规律

    • 0~90度,余弦值大于0
    • 90~180度,余弦值小于0

    # 总结

    向量a和b夹角,在0~180度的范围内的前提下:

    当a和b点乘a.dot(b)大于0,意味着cos(θ)大于0,cos(θ)大于0意味着夹角θ是0~90度,θ是0~90度说明物体在人的前方。

    a和b点乘a.dot(b)小于0,意味着cos(θ)小于0,0~180度的范围内,cos(θ)小于0,意味着夹角θ是90~180度,θ是90~180度说明物体在人的后方。

    const dot = a.dot(b);//向量a和b点乘
    if (dot > 0) {
        console.log('物体在人前面');
    } else if (dot < 0) {
        console.log('物体在人后面');
    }
    

    # 调整物体到人后面测试代码

    调整物体挪到人后面测试代码判断是否正确

    mesh.position.set(2, 0, 5);
    
    2. 点乘练习-计算三角形夹角
    4. 点乘判断是否在扇形内

    ← 2. 点乘练习-计算三角形夹角 4. 点乘判断是否在扇形内→

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