three.js 包围盒

news2024/9/28 13:26:40

效果:

想要显示包围盒的样子;需要借助 Box3Helper 辅助显示;

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs"></div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>s
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      res1: null,
      res2: null,
    };
  },
  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(100);
      this.scene.add(axesHelper);
      const geometry = new this.$three.SphereGeometry(15,32,32);
      const material = new this.$three.MeshBasicMaterial({color: 0xffaadd});
      const mesh = new this.$three.Mesh(geometry, material);
      this.scene.add(mesh);

      const box3 = new this.$three.Box3();
      box3.expandByObject(mesh);
      const box3_helper = new this.$three.Box3Helper(box3, 0xfaaaff);
      this.scene.add(box3_helper);

      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(50,50,50);
      this.camera.lookAt(0,0,0);
      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);
      })
    },
  },
};
</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/1506792.html

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

相关文章

【大厂AI课学习笔记NO.68】开源和开源发展情况

开源即源代码公开&#xff0c;任何人能获取源代码&#xff0c;查看、修改、分发他们认为合适的代码。 依托同行评审和社区生成&#xff0c;旨在以分散、协作的方式开发。 我们曾经很详细的讨论过开源协议的问题&#xff0c;详细可以参考我的文章&#xff1a; https://giszz.…

块设备驱动(1)-什么是块设备驱动?块设备驱动概念总结

1.块设备驱动概念 块设备驱动是针对存储设备&#xff0c;例如SD卡、EMMC、NAND FLASH、NOR FLSASH。 块设备驱动以块为单位进行访问、最小寻址单位是扇区、一个块中包含多个扇区、支持随机访问、带缓冲区&#xff0c;&#xff0c;当发生写入操作时&#xff0c;并不会立马操作硬…

P1948 [USACO08JAN] Telephone Lines S

Here 典中之典&#xff01;&#xff01; 解题思路 可选k条边代价为0如何决策&#xff1f; 将到当前位置选择了几条代价为0的边放入状态&#xff0c;即若当前状态选的边数小于&#xff0c;则可以进行决策&#xff0c;是否选择当前边&#xff0c;若选&#xff0c;则&#xff0c…

[2024-03-09 19:55:01] [42000][1067] Invalid default value for ‘create_time‘【报错】

这个错误可能是因为你的 MySQL 数据库版本不支持 CURRENT_TIMESTAMP 作为默认值。在一些早期版本中&#xff0c;MySQL 对 TIMESTAMP 类型字段的默认值设置有限制&#xff0c;只允许使用特定的常量值&#xff08;如 0000-00-00 00:00:00 或 CURRENT_TIMESTAMP()&#xff09;。如…

选修-单片机作业第1/2次

第一次作业 第二次作业 1、51 系列单片机片内由哪几个部分组成&#xff1f;各个部件的最主要功能是什么&#xff1f; 51系列单片机的内部主要由以下几个部分组成&#xff0c;每个部件的主要功能如下&#xff1a; 1. **中央处理器&#xff08;CPU&#xff09;**&#xff1a;这是…

Cisco Packet Tracer 模拟器实现一些交换机的基本配置

1. 内容 应用Cisco Packet Tracer 5.3搭建网络 应用Cisco Packet Tracer 5.3配置网络 通过不同的命令实现交换机的基本配置&#xff0c;包括交换机的各种配置模式、交换机的基本配置、交换机的端口配置。 2. 过程 2.1 打开软件 安装模拟器后打开如下&#xff1a; 图1 安装并…

Linux 之九:CentOS 上 Tomcat 安装、SpringBoot 项目打包和部署

安装 Tomcat 下载 a. 方式一&#xff1a;可以在windows 真机上下载后&#xff0c;再上传到服务器 b. 方式二&#xff1a;可以在服务器端使用 wget 下载命令来下载 登录官网https://tomcat.apache.org/download-90.cgi&#xff0c;选择 linux 版本 右键&#xff0c;获取下载链接…

【EtherCAT实践篇】九、EtherCAT增加变量示例:增加浮点数输入变量

目的&#xff1a;在EtherCAT开发板上IO程序基础上进行修改&#xff0c;将原来的16位整数型数据Analog input改为32位浮点数&#xff0c;基于STM32F405底板。 1、XML配置修改 1.1 更改数据类型 ETG1020基础数据中包括浮点数 REAL&#xff0c;可以直接使用浮点数。 这里在xml…

STM32 | 库函数与寄存器开发区别及LED等和按键源码(第三天)

STM32 | STM32F407ZE(LED寄存器开发续第二天源码)STM32 第三天 一、 库函数与寄存器开发区别 1.1 寄存器 寄存器开发优点 直接操作寄存器,运行效率高。 寄存器开发缺点 1、开发难度大,开发周期长 2、代码可阅读性差,可移植差 3、后期维护难度高 1.2库函数 库函数开…

稀碎从零算法笔记Day14-LeetCode:同构字符串

题型&#xff1a;字符串、哈希表 链接&#xff1a;205. 同构字符串 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给定两个字符串 s 和 t &#xff0c;判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t &#xff0c;那…

017集——圆弧(ARC)转多段线(lwpolyline)——cad vba 中按一定精度拟合加点实现

在国土资源管理项目中&#xff0c;我们经常会遇到CAD转gis数据实现入库&#xff0c;而cad中的arc圆弧转为gis数据只能转出弧的顶点坐标&#xff0c;导致图形变形失真。若一个一个对弧进行手工增加点转为多段线&#xff0c;耗时耗力&#xff0c;效率极其低下。这里给出解决方案&…

FL Studio21.2.3最新国内中文永久版本下载

当然&#xff0c;FL Studio 21作为一款先进的音乐制作软件&#xff0c;除了之前提到的核心功能外&#xff0c;还拥有许多独特的特色和优势&#xff0c;使其在竞争激烈的市场中脱颖而出。以下是对FL Studio 21的更多特色的详细介绍&#xff1a; FL Studio 21 Win-安装包下载如下…

Android Studio 检测不到 IDE 更新

点击 Configure updates...&#xff0c;不知道什么时候把 Check for IDE updates 去勾了&#xff0c;一年没有检测到更新&#xff01; 只能重新安装&#xff0c;掉坑里了&#xff01;

【JVM】聊聊垃圾回收之三色标记算法

在垃圾收集器 CMS中存在四个阶段&#xff0c;初始标记、并发标记、重新标记、并发清理。 那么在并发标记中由于没有STW&#xff0c;业务程序和GC程序是并发执行的&#xff0c;那么是如何实现对象的并发标记的。 并发垃圾回收 并发标记其实是一个宏观的过程&#xff0c;仍然需…

OpenGrok代码服务器搭建,解决代码检索慢的问题

一、背景 在前一家公司&#xff0c;公司提供了OpenGrok服务器供大家检索查阅代码。但在新公司&#xff0c;大家都使用vscode或Sourse Insight&#xff0c;这就存在一些问题&#xff1a; 不能跳转或者跳转比较慢。 搜索查询速度慢&#xff0c;且结果展示不易查看。 这严重影…

《领导的气场——8堂课讲透中国式领导智慧》读书笔记

整体感悟 个人感觉书籍比较偏说教、理论&#xff0c;没有看完。 现仅仅摘录自己“心有戚戚焉”的内容。 经典摘录 管理的本质是通过别人完成任务。有一百件事情&#xff0c;一个人都做了&#xff0c;那只能叫勤劳&#xff1b;有一百件事情&#xff0c;主事的人自己一件也不做&…

FreeRTOS学习笔记-基于stm32(3)中断管理

一、什么是中断 通俗点讲就是让CPU停止当前在做的事&#xff0c;转而去做更紧急的事。 二、中断优先级分组 这个紧急的事也有一个等级之分&#xff0c;优先级越高越先执行。stm32使用中断优先配置寄存器的高4位&#xff0c;共16级的中断优先等级。 stm32的中断优先等级可以分为…

基于河马优化算法(Hippopotamus optimization algorithm,HO)的无人机三维路径规划

一、无人机路径规划模型介绍 二、算法介绍 河马优化算法&#xff08;Hippopotamus optimization algorithm&#xff0c;HO&#xff09;由Amiri等人于2024年提出&#xff0c;该算法模拟了河马在河流或池塘中的位置更新、针对捕食者的防御策略以及规避方法。2024最新算法&#x…

在DeepLn环境中安装VLLM与ChatGLM3

DeepLn | 智慧算力触手可及是一个挺便宜的算力租用平台&#xff0c;里面有大量的显卡可以租用。唯一美中不足的是&#xff0c;提供的pytorch版本低&#xff0c;只支持到2.01&#xff0c;为了匹配vllm&#xff0c;需要手动安装指定版本的pytorch。 vllm介绍 总体而言&#xff0…

denied: requested access to the resource is denied报错解决

Docker 镜像在文件中包含一组指令&#xff0c;可在 Docker 容器中执行代码。大多数情况下&#xff0c;在创建 docker 镜像之后&#xff0c;当尝试将镜像推送到远程仓库时&#xff0c;会发生这种类型的报错“Docker denied: requested access to the resource is denied” 由于错…