three.js 向量方向(归一化.normalize)

效果:

<template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red"></div><div><p><el-button type="primary" @click="move()">沿着AB方向移动100</el-button><el-button type="primary" @click="reset">重置</el-button></p><pre style="text-align: left;line-height: 20px;">已知直线AB上两个坐标,A点(-50,0,-50)、B点(100,0,100)。物体默认在A点,希望从A点开始沿着直线AB移动距离100,单位向量每个分量乘以100,得到的向量长度就是100,相当于得到一个沿着AB方向移动100的向量,这就是单位向量的意义,单位向量长度位1,乘以任何一个值S,就可以得到一个长度为S的向量。</pre></div></div></el-main></el-container></div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { CSS3DObject, CSS3DSprite, CSS3DRenderer } from "three/examples/jsm/renderers/CSS3DRenderer.js";export default {data() {return {sphereGeometry: null,group: null,camera: null,mesh: null,renderer: null,requestAnimationFrame_time: null,B: null,lengthVal: 0,normalizeVal: null,css3DRenderer: null,A: [-50,0,-50],B: [100,0,100]};},created() {},mounted() {this.name = this.$route.query.name;this.init();},methods: {goBack() {this.$router.go(-1);},init() {this.scene = new this.$three.Scene();const boxGeometry = new this.$three.BoxGeometry(30,40,50);const material = new this.$three.MeshBasicMaterial({color: 0x89aadd});this.mesh = new this.$three.Mesh(boxGeometry, material);this.scene.add(this.mesh);const axesHelper = new this.$three.AxesHelper(100);this.scene.add(axesHelper);this.createPoints(this.A, "A点");this.createPoints(this.B, "B点");this.createLine3();this.camera = new this.$three.PerspectiveCamera();this.camera.position.set(200,200,200);this.camera.lookAt(0,0,0);let v = new this.$three.Vector3();this.camera.getWorldDirection(v); // 获得相机视线方向的单位向量,并赋值给 vconsole.log(v);console.log(v.length());// 创建渲染器对象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);// 创建CSS3DRenderer 对象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);const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", e => {this.renderer.render(this.scene, this.camera);})this.loopFun();},loopFun() {this.css3DRenderer.render(this.scene, this.camera);requestAnimationFrame(this.loopFun);},normalize_fn() {const A = new this.$three.Vector3(10,20,30);this.normalizeVal = A.normalize();},// 已知直线AB上两个坐标,A点(-50,0,-50)、B点(100,0,100)。物体默认在A点,希望从A点开始沿着直线AB移动距离100。createPoints(pointsArr, name) {// 创建缓存几何体对象const bufferGeometry = new this.$three.BufferGeometry();// 创建类型化数组来保存顶点数据// const vertices = new Float32Array([-50,0,-50]);const vertices = new Float32Array(pointsArr);// 通过创建  缓存属性对象  来表示顶点数据const attribute = new this.$three.BufferAttribute(vertices, 3);// 缓存几何体设置属性 positionbufferGeometry.setAttribute("position", attribute);// 创建点材质对象const pointMaterial = new this.$three.PointsMaterial({color: 0xffaadd, // 点颜色size: 10, // 点大小});// 创建点对象const points = new this.$three.Points(bufferGeometry, pointMaterial);points.name = name;const dom = this.createDom(name);const sprite = new CSS3DSprite(dom);let x = pointsArr[0];let y = pointsArr[1] + 10;let z = pointsArr[2];sprite.position.set(x,y,z);// sprite.scale.set(0.5,0.5,0.5);points.add(sprite);this.scene.add(points);},createDom(text) {const dom = document.createElement("div");dom.style.border = '1px solid blue';dom.style.borderRadius = '5px';dom.style.fontSize = '14px';dom.style.padding = '1px 10px';dom.innerText = text;return dom;},move() {let A = new this.$three.Vector3(-50,0,-50);let B = new this.$three.Vector3(100,0,100);let AB = B.clone().sub(A);AB.normalize();const T = AB.clone().multiplyScalar(100);this.mesh.position.add(T);this.renderer.render(this.scene, this.camera);},reset() {this.mesh.position.set(0,0,0);this.renderer.render(this.scene, this.camera);},// 创建直线createLine3() {// 创建缓存几何体对象const bufferGeometry = new this.$three.BufferGeometry();let A = new this.$three.Vector3(-50,0,-50);let B = new this.$three.Vector3(100,0,100);let line3 = new this.$three.LineCurve3(A, B);let pointes = line3.getPoints(200);bufferGeometry.setFromPoints(pointes);const material = new this.$three.LineBasicMaterial({color: 0xffffff});const line = new this.$three.Line(bufferGeometry, material);this.scene.add(line);}},
};
</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/672397.shtml

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

相关文章

【开源】JAVA+Vue+SpringBoot实现房屋出售出租系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 房屋销售模块2.2 房屋出租模块2.3 预定意向模块2.4 交易订单模块 三、系统展示四、核心代码4.1 查询房屋求租单4.2 查询卖家的房屋求购单4.3 出租意向预定4.4 出租单支付4.5 查询买家房屋销售交易单 五、免责说明 一、摘…

前端的事件代理

事件代理是一种编程技巧&#xff0c;它允许我们通过在父元素上监听事件&#xff0c;来处理子元素的事件。这种方式可以减少事件监听器的数量&#xff0c;提高性能。 在前端开发中&#xff0c;事件代理常常用于处理大量的动态元素。例如&#xff0c;在一个列表中&#xff0c;每…

Windows下配置多个账号的git ssh

生成密钥 已经有一个密钥的情况下&#xff0c;用下面的命令生成一个新密钥&#xff0c;注意为了防止原始密钥文件被覆盖&#xff0c;需要给一个新名字&#xff1a; ssh-keygen -t rsa -f C:\\Users\\xxx\\.ssh\\id_rsa_xxx -C "xxxemail.com"给GitHub配置SSH Key …

DAY5.

握手&#xff1a; 第一次握手&#xff1a;客户端发送SYN包给服务器&#xff0c;并进入SYN_SENT状态&#xff0c;等待服务器返回确认包。 第二次握手&#xff1a;服务器接收到SYN包&#xff0c;确认客户端的SYN&#xff0c;发送ACK包&#xff0c;同时发送一个SYN包&#xff0c;…

Android开发--实时监测系统+部署故障诊断算法

0.项目整体思路介绍&#xff1a; 搭建无人装备模拟实验平台&#xff0c;使用采集器对数据进行采集&#xff0c;通过网络通信Udp协议发送到安卓端&#xff0c;安卓端作界面显示&#xff0c;算法使用matlab仿真后&#xff0c;用C语言实现。将采集器采集到的数据经过处理后训练&a…

大规模机器学习简介

1. 非线性回归问题 1.1 问题描述 我们有一组实验数据&#xff0c;每个实验都给出了输入和输出对 (Xn, Yn)。每个输入 是空间中的一个点&#xff0c;每个输出 是 空间中的一个点。这些数据点被假设为独立同分布&#xff08;i.i.d&#xff09;。 我们的目标是找到一个函数 fw&…

蓝桥杯-“山”形数字个数(python版)

问题描述 这天小明正在学数数。 他突然发现有些整数的形状像一座“山”&#xff0c;比123565321、145541&#xff0c;它们左右对称&#xff08;回文&#xff09;且数位上的数字先单调不减&#xff0c;后单调不增。 小朋数了很久也没有数完&#xff0c;他想让你告诉他在区间[202…

Z0423 树的染色2

Description 一个n个节点的树。 现在用k种颜色&#xff0c;给树上的每个节点染色 要求: 任何两个距离不大于2的不同节点被染的颜色不同。 由于答案可能过大&#xff0c;请将其对10^97取模。 Format Input 第一行一个数n,k&#xff0c;含义如题 接下来共有n-1行&#x…

C#(C Sharp)学习笔记_Switch条件判断分支语句【六】

Switch语句 Switch在一些计算机语言中是保留字&#xff0c;其作用大多情况下是进行判断选择。以C语言来说&#xff0c;switch&#xff08;开关语句&#xff09;常和case break default一起使用。 Switch语句就相当于是else if语句&#xff0c;有着很相似的作用&#xff1a;根据…

过年送你三句话!部门大战积雪!飞机延误,掌声响起?——早读

你到家了吗&#xff1f; 引言代码第一篇 也评 以雪为令&#xff0c;多滴部门全力以赴迎战寒潮第二篇 人民日报 飞机延误20分钟&#xff0c;但他走进机舱时&#xff0c;掌声响起&#xff01;第三篇 人民日报 【夜读】快过年了&#xff0c;这三句话送给你第四篇&#xff08;跳&am…

Java基于SpringBoot+Vue的垃圾分类网站的实现

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

“Nginx”介绍和使用

什么是 Nginx&#xff1f; Nginx&#xff08;发音为“engine-x”&#xff09;是一款开源的、高性能的 HTTP 和反向代理服务器&#xff0c;也是一个 IMAP/POP3 代理服务器。Nginx 由 Igor Sysoev 于 2004 年创建&#xff0c;并在 BSD 许可下发布。 Nginx 的特点 高性能&#…

LeetCode第1381题 - 设计一个支持增量操作的栈

题目 请你设计一个支持下述操作的栈。 实现自定义栈类 CustomStack &#xff1a; CustomStack(int maxSize)&#xff1a;用 maxSize 初始化对象&#xff0c;maxSize 是栈中最多能容纳的元素数量&#xff0c;栈在增长到 maxSize 之后则不支持 push 操作。void push(int x)&#…

如何使用 uniapp 开发(一)

1、下载 hbuilderx 编辑器 https://www.dcloud.io/hbuilderx.html 2、下载 微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 3、使用hbuilder编辑器&#xff0c;开发微信小程序的时候需要借助 微信开发者工具显示&#xff0c;所以需…

动态内存管理(2)

文章目录 4. 几个经典的笔试题4.1 题目14.2 题目24.3 题目34.4 题目4 5. C/C程序的内存开辟6. 动态通讯录7. 柔性数组7.1 柔性数组的特点7.2 柔性数组的使用7.3 柔性数组的优势 4. 几个经典的笔试题 4.1 题目1 #include <stdio.h> #include <stdlib.h> #include …

Prompt Engineering实战-构建“哄哄模拟器”

目录 一 背景 二 “哄哄模拟器”的Prompt Prompt 的典型构成 三 操作步骤 3.1 创建对话 3.2 游戏测试 一 背景 前几天《AI 大模型全栈工程师》第二节课讲了“Prompt Engineering&#xff0c;提示工程”&#xff0c;里面提到一些prompt相关的技巧&#xff0c;原则&#xf…

复杂人像背景分割解决方案

随着人工智能和图像处理技术的不断发展&#xff0c;人像处理已成为企业宣传、产品展示、线上教育等领域不可或缺的一环。然而&#xff0c;面对复杂多变的人像背景&#xff0c;如何实现精准、高效的分割&#xff0c;一直是困扰企业的技术难题。为此&#xff0c;美摄科技凭借其领…

NLP_循环神经网络(RNN)

文章目录 RNN结构RNN实战RNN小结 RNN结构 NPLM 在处理长序列时会面临一些挑战。首先&#xff0c;由于它仍然是基于词的模型&#xff0c;因此在处理稀有词汇或者词汇表外的词汇时效果不佳。其次&#xff0c;NPLM不能很好地处理长距离依赖关系。而上面这两个局限&#xff0c;恰恰…

基于spring cloud alibaba的微服务平台架构规划

平台基础能力规划&#xff08;继续完善更新…&#xff09; 一、统一网关服务&#xff08;独立服务&#xff09; 二、统一登录鉴权系统管理&#xff08;独立服务&#xff09; 1.统一登录 2.统一鉴权 3.身份管理 用户管理 角色管理 业务系统和菜单管理 部门管理 岗位管理 字典管…

IDEA 推荐插件

grep-console 输出日志换颜色 MybatisLogFormat 直接复制mybatis的日志成完整的SQL SequenceDiagram 生成时序图