three.js 点乘判断平行向量方向异同

news2024/11/25 12:25:09

效果:

代码: 

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs"></div>
          <div>
            判断的前提是两个向量平行
              <el-button @click="judge">开始判断</el-button>{{ textList }}
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import {
  CSS2DObject,
  CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import TWEEN from "@tweenjs/tween.js";
import {
  CSS3DObject,
  CSS3DSprite,
  CSS3DRenderer,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
// TextGeometry 是一个附加组件,必须显式导入。 three/examples/jsm/geometries
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
// FontLoader 是一个附加组件,必须显式导入。
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
export default {
  data() {
    return {
      scene: null, // 场景对象
      camera: null, // 相机对象
      renderer: null, // 渲染器对象
      a: new this.$three.Vector3(10, 0, 0),
      b: new this.$three.Vector3(15, 0, 0),
      c: new this.$three.Vector3(-20, 0, 0),
      textList:[]
    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    /**
     * 如何判断物体是在人的前方还是后方
     * 思路:借助两个单位向量的点乘结果来判断的;
     */
    init() {
      // 创建场景对象
      this.scene = new this.$three.Scene();
      const axesHelper = new this.$three.AxesHelper(60);
      this.scene.add(axesHelper);
      // 创建相机对象
      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(25,25,25);
      this.camera.lookAt(0,0,0);
      let arr = [this.a, this.b, this.c];
      arr.forEach((item,index) => {
        let color = null;
        let name = "";
        if(index == 0) {
          color = 0xffffff;
          name = "A";
        } else if (index == 1) {
          color = 0xffccff;
          name = "B";
        } else {
          color = 0xffffaa;
          name = "C";
        }
        this.createArrow(item, color,name);
      })
      this.css3DRenderer = new CSS3DRenderer();
      this.css3DRenderer.setSize(1000,800);
      this.css3DRenderer.render(this.scene, this.camera);
      this.css3DRenderer.domElement.style.position = 'absolute';
      this.css3DRenderer.domElement.style.top = 0;
      this.css3DRenderer.domElement.style.pointerEvents = 'none';

      window.document.getElementById("threejs").appendChild(this.css3DRenderer.domElement);
      // 创建渲染器对象
      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(1000,800);
      this.renderer.render(this.scene, this.camera);
      window.document.getElementById("threejs").appendChild(this.renderer.domElement); 
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
        controls.addEventListener("change", () => {
          this.renderer.render(this.scene, this.camera);
        })
        this.renderFun();
    },
    createArrow(dir, color, name) {
      let arrow = new this.$three.ArrowHelper(dir.clone().normalize(), new this.$three.Vector3(0,0,0), dir.length(), color);
      arrow.name = name;
      this.scene.add(arrow);
    },
    renderFun() {
      this.css3DRenderer.render(this.scene, this.camera);
      requestAnimationFrame(this.renderFun); // 一定要设置这一句,否则,不渲染
    },
    judge() {
      let a = this.a.clone().normalize();
      let b = this.b.clone().normalize();
      let c = this.c.clone().normalize();
      let a_dot_b = a.clone().dot(b);
      let a_dot_c = a.clone().dot(c);
      let b_cos = Math.acos(a_dot_b);
      let c_cos = Math.acos(a_dot_c);
      let deg1 = this.$three.MathUtils.radToDeg(b_cos);
      let deg2 = this.$three.MathUtils.radToDeg(c_cos);
      this.textList = [];
      if(deg1 == 0) {
        this.textList.push('a和b同向');
      }
      if(deg2 == 180) {
        this.textList.push('a和c反向');
      }
    }
  },
};
</script>
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  width: 100%;

  .box-right {
    img {
      width: 500px;
      user-select: none;
    }
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1484345.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2025张宇考研数学,百度网盘视频课+36讲PDF讲义+真题

张宇老师的课属于幽默生动&#xff0c;会让一个文科生爱上数学&#xff0c;但是有的同学不知道在哪看&#xff0c;可以看一下&#xff1a;2025张宇考研数学全程网盘 docs.qq.com/doc/DTmtOa0Fzc0V3WElI 可以粘贴在浏览器 张宇30讲作为一本基础讲义&#xff1a;和教材…

6、wuzhicms代码审计

wuzhicms代码审计 前言 安装环境配置 服务器要求 Web服务器: apache/nginx/iis PHP环境要求:支持php5.2、php5.3、php5.4、php5.5、php5.6、php7.1 (推荐使用5.4或更高版本!) 数据库要求: Mysql5www/install文件夹即可进入安装页面 审计开始 首页文件index.php&#xff0c…

latex使用Bibtex添加参考文献指南(TeXstudio)

目录 参考链接 Bibtex 使用方法 编译方法 参考链接 https://www.cnblogs.com/whyaza/p/11803493.html &#xff08;Latex&#xff09;Latex TeXstudio Bibtex 使用指南 - 简书 Latex-bibtex使用方法-CSDN博客 Latex插入参考文献的两种方法—自动与手动_latex 参考文献-…

免费下载全网视频系列:一键下载央视视频

之前分享过全网视频下载工具下载视频不求人&#xff0c;免费下载全网视频&#xff0c;今天再分享几个下载央视视频的工具。 第一个是央视频4k下载器&#xff0c;比如下载这个视频https://www.yangshipin.cn/#/video/home?vidv0000313oqb&#xff0c;打开工具在命令行输入 v00…

Ubuntu将c++编译成.so文件并测试

一、准备cpp和h文件 创建test.cpp 在cpp中定义相加的函数funcAdd&#xff0c;给出函数的细节代码 #include <iostream> using namespace std;int funcAdd(int x, int y) {return xy; }创建test.h 在h中声明定义的函数&#xff0c;不需要任何细节 #ifndef __TEST__ #…

实验:依赖注入之构造器注入

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

文章总结(拉钩教育)

方法论 那对于我们专栏来说&#xff0c;在面对复杂的检索知识的时候&#xff0c;我更建议你通过理解记忆的方式进行学习。具体的方式有啥呢&#xff1f;我比较推荐问答的方式。也就是说&#xff0c;在学习每个知识点的时候&#xff0c;你可以一直问自己几个问题&#xff0c;比…

地信专业未来的前景如何,该怎么学习?

广大普通学校GIS专业学生&#xff0c;如果继续在GIS方向发展&#xff0c;而且走开发路线&#xff0c;结合我这几年面试以及带应届毕业生的经验&#xff0c;学习路线我有这几个方面的建议&#xff0c;仅供参考&#xff1a; 1.大一的时候要学好高数、线性代数和概率论&#xff0c…

STM32单片机示例:ETH_DP83848_DHCP_NonOS_Poll_F407

文章目录 目的基础说明主要配置关键代码示例演示示例链接关于中断总结 目的 以太网是比较常用到的功能&#xff0c;这篇文章讲演示在STM32F407上启用以太网功能&#xff0c;使之能够加入网络中&#xff0c;通过DHCP获得IP地址&#xff0c;可以被Ping通。 基础说明 STM32F407…

EI顶刊复现:基于氨储能技术的电转氨耦合风–光–火综合能源系统双层优化调度程序代码!

适用平台&#xff1a;MatlabYalmipCplex 程序首先提出电转氨耦合综合能源系统构型&#xff0c;并为燃煤机组出力、风光消纳和电转氨运行的经济性和稳定性的综合评价定义风–光–火–氨系统协调运行指标&#xff1b;进而构建以协调运行指标最大为上层目标、电转氨耦合风–光–火…

数据结构与算法:堆

朋友们大家好啊&#xff0c;本篇文章来到堆的内容&#xff0c;堆是一种完全二叉树&#xff0c;再介绍堆之前&#xff0c;我们首先对树进行讲解 树与堆 1.树的介绍1.1节点的分类 2.树的存储结构3.二叉树的概念和结构3.1 二叉树的特点3.2 特殊的二叉树3.3二叉树的存储结构 4.堆的…

(科目三)计算机基础及网络的应用

1.计算基础知识 计算机是20世纪人类最伟大的发明之一&#xff0c;它是由电子逻辑部件组成的一种能够存储信息、自动完成各种运算的逻辑设备。 世界上第一台数字电子计算机ENIAC于1946年诞生在美国的宾夕法尼亚大学&#xff0c;由约翰莫克里和普雷斯波艾克领导研制。 当前&am…

【SpringBoot】mybaitsPlus的多数据源配置

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;SpringBoot ⛺️稳重求进&#xff0c;晒太阳 mybatisPlus的多数据源配置 适用于多种场景&#xff1a;纯粹多库、 读写分离、 一主多从、 混合模式等 目前我们就来模拟一个纯粹多…

React-router的创建和第一个组件

需要先学react框架 首先&#xff1a;找到一个文件夹&#xff0c;在文件夹出打开cmd窗口&#xff0c;输入如下图的口令 npx create-react-app demo 然后等待安装 安装完成 接下来进入创建的demo实例 cd demo 然后可以用如下方式打开vscode code . 注意&#xff1a;不要忽略点号与…

监控与日志

一、监控 1、监控类型 从监控类型上划分&#xff0c;在 K8s 中可以分成四个不同的类型&#xff1a; ① 资源监控&#xff1a;这种监控主要关注于基础资源的使用情况&#xff0c;例如 CPU、内存、网络等。通常使用数值或百分比等单位来统计&#xff0c;可以通过 Zabbix、Tele…

日志到filebeat-->logstash-->elastic-->kibana

1、日志到filebeat。 cat /etc/filebeat/filebeat.yml filebeat.inputs: - type: syslog format: rfc3164 protocol.udp: host: "0.0.0.0:514" output.logstash: hosts: ["localhost:5044"] 验证方式: tcpdump -i 网卡名称 udp port 514 2、…

LeetCode 刷题 [C++] 第55题.跳跃游戏

题目描述 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 题目分析 题目中…

电子电器架构 —— DoIP协议相关的介绍

电子电器架构 —— DoIP协议相关的介绍 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕…

【C++精简版回顾】16.虚函数,多态

1.虚函数与多态 以下为AI生成 虚函数是C中实现多态性的一种机制。多态性允许一个类的对象可以以多种不同的方式工作&#xff0c;即同一个函数可以根据对象的不同类型表现出不同的行为。 在C中&#xff0c;通过在基类中声明虚函数&#xff0c;并在派生类中进行重写&#xff0c;可…

外贸福利 PHP源码 WhatsApp 营销 - 批量发件人、聊天、机器人、SaaS 搭建

WhatsApp 营销工具对于外贸人员来说至关重要。随着全球贸易的不断发展&#xff0c;WhatsApp已成为了许多国际贸易商之间沟通的首选工具之一。通过利用WhatsApp营销工具&#xff0c;外贸人员可以轻松地与客户建立联系&#xff0c;传递产品信息&#xff0c;进行价格谈判&#xff…