three.js 射线Ray,三维空间中绘制线框

效果:

代码: 

<template><div><el-container><el-main><div class="box-card-left"><div id="threejs"></div> <div>{{ res1 }}</div> <div>{{ res2 }}</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);this.createLine();this.createLine2();this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);this.camera.position.set(30,30,30);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);})},createLine() {let a = new this.$three.Vector3(10,0,0);let b = new this.$three.Vector3(0,10,0);let c = new this.$three.Vector3(0,0,10);let geometry = new this.$three.BufferGeometry().setFromPoints([a,b,c]);let material = new this.$three.LineBasicMaterial({color:0xffccdd, side: this.$three.DoubleSide});// let line = new this.$three.LineLoop(geometry, material);// let line = new this.$three.Line(geometry, material);let line = new this.$three.Mesh(geometry, material);this.scene.add(line);this.res1 = this.createRay(a,b,c);},createLine2() {let arr = new Float32Array([20,0,0,0,20,0,0,0,20,]);let position = new this.$three.BufferAttribute(arr, 3)let geometry = new this.$three.BufferGeometry();geometry.setAttribute("position", position);let material = new this.$three.LineBasicMaterial({color:0xb5a6dd});let line = new this.$three.LineLoop(geometry, material);// let line = new this.$three.Line(geometry, material);this.scene.add(line);let a = new this.$three.Vector3(20,0,0);let b = new this.$three.Vector3(0,20,0);let c = new this.$three.Vector3(0,0,20);this.res2 = this.createRay(a,b,c);},createRay(a,b,c) {// 使用箭头辅助对象显示射线的起点和方向let ray = new this.$three.Ray();ray.origin = new this.$three.Vector3(0,0,0); // 设置射线起点ray.direction = new this.$three.Vector3(1,1,1).normalize(); // 设置射线方向,保证方向为单位向量this.createArrowHelper(ray.direction, ray.origin);const point = new this.$three.Vector3();const result = ray.intersectTriangle(a,b,c, false, point);return result;},createArrowHelper(dir, origin) {let arrow = new this.$three.ArrowHelper(dir, origin, 20);this.scene.add(arrow);}},
};
</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.mzph.cn/news/730708.shtml

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

相关文章

serial库串口通讯

前言 Python的pyserial库允许与不同的设备进行通信。 安装 python > 3.4 pip install pyserial 基本流程 import serial# 1. 打开串口 ser serial.Serial()# 2. 设置串口参数&#xff08;例如波特率、数据位、校验位、停止位&#xff09; ser.port /dev/ttyS0 # 这是一…

CDN介绍

概念介绍 CDN Content Delivery Network&#xff0c;缩写&#xff1a;CDN&#xff09;是一种提供更快互联网访问的服务&#xff0c;通过在网络的边缘或核心交换区域部署内容代理服务器来实现。这些服务器利用全局负载调度机制来分发内容&#xff0c;从而构建了一个覆盖范围广…

nRF52832——GPIOTE与外部中断

这里写目录标题 GPIOTE 原理分析GPIOTE 输入事件应用GPIOTE 事件寄存器应用GPIOTE 事件组件的应用&#xff08;库函数&#xff09;GPIOTE PORT 事件应用 GPIOTE 任务应用GPIOTE 任务触发 LED 寄存器操作组件方式进行任务配置 GPIOTE 原理分析 GPIO 任务和时间&#xff08;GPIO…

仿牛客网项目---Elasticsearch分布式搜索引擎

1.什么是ElasticSearch分布式搜索引擎&#xff1f; Elasticsearch是一个开源的分布式搜索引擎&#xff0c;提供实时的、高可用性的搜索和分析解决方案。它支持快速索引和搜索大规模数据&#xff0c;具有分布式架构、RESTful API、基于JSON的查询语言等功能&#xff0c;适用于各…

蓝桥杯集训·每日一题2024 (二分,双指针)

前言&#xff1a; 开学了&#xff0c;平时学习的压力也逐渐大起来了&#xff0c;不过还算可以接受&#xff0c;等到后面阶段考的时候就不一样了&#xff0c;我目前为了转专业退选了很多课&#xff0c;这些课我都需要花时间来刷绩点&#xff0c;不然保研就没有竞争力了。我自己会…

OpenCASCADE+Qt创建建模平台

1、建模平台效果 2、三维控件OCCWidget 将V3d_View视图与控件句柄绑定即可实现3d视图嵌入Qt中&#xff0c;为了方便也可以基于QOpenGLWidget控件进行封装&#xff0c;方便嵌入各种窗体使用并自由缩放。 #ifndef OCCTWIDGET_H #define OCCTWIDGET_H#include <QWidget> #i…

javaWebssh药品进销存信息管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh药品进销存信息管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOM…

Filter过滤器+JWT令牌实现登陆验证

一、背景 我们需要在客户端访问服务器的时候给定用户一定的操作权限&#xff0c;比如没有登陆时就不能进行其他操作。如果他需要进行其他操作&#xff0c;而在这之前他没有登陆过&#xff0c;服务端则需要将该请求拦截下来&#xff0c;这就需要用到过滤器&#xff0c;过滤器可以…

原创+顶级SCI优化!23年新算法PSA优化CNN-LSTM-Attention一键实现多变量回归预测!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 效果展示 数据介绍 创新点 模型流程 部…

RabbitMQ的web控制端介绍

2.1 web管理界面介绍 connections&#xff1a;无论生产者还是消费者&#xff0c;都需要与RabbitMQ建立连接后才可以完成消息的生产和消费&#xff0c;在这里可以查看连接情况channels&#xff1a;通道&#xff0c;建立连接后&#xff0c;会形成通道&#xff0c;消息的投递、获取…

Vue-Router使用

1.安装 npm install vue-router4 2. 添加路由 新建router文件夹&#xff0c;新建文件 index.ts import { createRouter, createWebHashHistory,createWebHistory} from "vue-router";const routes [{path: /login,component: () > import("../views/Logi…

牛客网——美团2024届秋招笔试第三场编程真题

牛客网——美团2024届秋招笔试第三场编程真题 &#x1f60d;&#x1f60d;&#x1f60d; 相知&#x1f64c;&#x1f64c;&#x1f64c; 相识&#x1f622;&#x1f622;&#x1f622; 开始刷题1. 平均数为k的最长连续子数组2. 小球投盒3. 小红结账4. 小美的游戏5. 小美种果树6…

python自学6

第一节第十章 开发图表 第一个可视化图表&#xff0c;折线图的开发 json数据格式 pyecharts模块 图标源码网站 Document gallery.pyecharts.org pyecharts模块的快速入门 pyecharts配置有两个选项 全局配置是对整个可视化界面进行配置&#xff0c;比如名字&#xff0c;工具…

代码复现错误

1. 问题&#xff1a; torch.cuda.OutOfMemoryError: CUDA out of memory. Tried to allocate 64.00 MiB (GPU 0; 39.59 GiB total capacity; 37.72 GiB already allocated; 38.19 MiB free; 37.83 GiB reserved in total by PyTorch) If reserved memory is >> allocat…

防御保护 IPSEC VPPN实验

实验背景&#xff1a;FW1和FW2是双机热备 主备备份模式。 实验要求&#xff1a;在FW5和FW3之间建立一条IPSEC通道&#xff0c;保证10.0.2.0/24网段可以正常访问到192.168.1.0/24 IPSEC VPPN实验配置&#xff08;由于是双机热备状态&#xff0c;所以FW1和FW2只需要配置FW1主设…

用FPGA CORDIC IP核实现信号的相位检测,计算相位角

用FPGA CORDIC IP核实现信号的相位检测 1.matlab仿真 波形仿真代码&#xff1a; 代码功能&#xff1a;生成一个点频信号s&#xff0c;求出s的实部和虚部&#xff1b;并且结算相位角atan2。画出图形&#xff0c;并且将Q和I数据写入文件中。 %代码功能&#xff1a;生成一个点…

20.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-数据分析工具数据类型编辑功能的实现

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易道云信息技术研究院VIP课 上一个内容&#xff1a;19.数据分析工具数据类型配置功能的实现 码云地址&#xff08;master 分支&#…

unity学习(49)——服务器三次注册限制以及数据库化角色信息4--角色信息数据库化

1.此处下断开始调试,list函数内就有问题&#xff1a; 2. 现在的问题是只读不写&#xff01;32行就是写入部分的代码&#xff1a; 3. 很奇怪&#xff0c;调试的时候确实是写进来了 程序正常执行后&#xff0c;文件中数据也没有消失 关闭服务器文件内容依旧正常。 players包含所…

MySQL篇—执行计划之覆盖索引Using index和条件过滤Using where介绍(第三篇,总共三篇)

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

提醒一下!今年考研的人不要太老实了!!

今年准备计算机考研的同学&#xff0c;别太老实了&#xff01;别人说什么你就信什么 如果你的工作能力不足以支撑找到一个满意的工作&#xff0c;那我建议再沉淀两年&#xff01; 很多同学其实有点眼高手低&#xff0c;在计算机专业&#xff0c;低于1w的工作看不上&#xff0…