Threejs用切线实现模型沿着轨道行驶

        这次讲一个经常遇到的使用场景，让模型沿着轨迹运动，这个场景需要解决两个问题，第一是让模型沿着轨迹运动，第二是在沿着轨迹运动的同时，要保持模型的头部也时刻保持前方，而不是单纯的只是更新模型位置。

        还是先创建一个场景，添加相机，灯光，渲染器等，然后需要创建一个轨迹，这里用CatmullRomCurve3创建一个3维曲线，这个的好处是等会可以将此曲线拆解成多个同等份的点，因为我们需要不断更新模型在此曲线的位置，实际上就是不停的切换此曲线上连接的多个点，来实现位置的不断更新。

        首先根据四个点创建曲线，并将曲线分解为多个点，再用这些点绘制成一条曲线并加入到场景中，方便后面观察模型的运动轨迹。

 this.cameraCurve = new THREE.CatmullRomCurve3([new THREE.Vector3(-300, 40, 200),new THREE.Vector3(300, 40, 200),new THREE.Vector3(300, 40, -200),new THREE.Vector3(-300, 40, -200),],true);//参考路径上取1000个点，每个点上添加蓝色小球const pathPoints = this.cameraCurve.getPoints(this.pathIndex);//绘制一条路径参考线与上面的线重合，方便查看小车的行动轨迹const geometry = new THREE.BufferGeometry().setFromPoints(pathPoints);const material = new THREE.LineBasicMaterial({ color: '#000000', linewidth: 1, });//设置线条的颜色和宽度const curveObject = new THREE.Line(geometry, material);scene.add(curveObject);

此时场景中就出现一条曲线，作为模型运动的轨迹，

接着，需要在场景中添加一个模型，我这添加一个agv车，更方便观察车的车头方向，因为是外部模型需要加载GLTFLoader，缩放到适合的大小，并将车的位置放在曲线的第一个点位置，防止在运动前突然闪现到开始运动的点开始运动。

 //在场景中加载一个agv小车，并将agv小车放在曲线的第一个点上const loader = new GLTFLoader()loader.load("/static/model/agv.gltf", (gltf) => {this.agv = gltf.scene;this.agv.position.set(pathPoints[0].x, pathPoints[0].y, pathPoints[0].z)   // 模型位置this.agv.scale.set(0.1,0.1,0.1)scene.add(this.agv)   // 加入场景})

曲线和车都加好了，需要开始设置动画了，也是最关键的部分，运动的部分比较简单，因为获取到了曲线的多个连续点，只需要不断地更新车的位置到每个点就好了，保持车头方向需要先获取车所在点向量的切线，位置向量和切线向量相加即为所需朝向的点向量。

 if (this.agv) {// 判断agv加载完成后，开始不断更新agv的位置const sphereCurveIndex = this.pathIndex / 1000; // //取相参考径上当前点的坐标，取值0~1const positionVec = this.cameraCurve.getPointAt(sphereCurveIndex);//获取曲线上位置的点，传值为0-1的小数表示整个线段的位置this.agv.position.set( positionVec.x, positionVec.y, positionVec.z);//设置新的agv位置const tangent = this.cameraCurve.getTangentAt(sphereCurveIndex); // 返回一个点t在曲线上位置向量的法线向量（getTangentAt是返回曲线上某个点的切线）const lookAtVec = tangent.add(positionVec);// 位置向量和切线向量相加即为所需朝向的点向量this.agv.lookAt(lookAtVec);//设置agv的模型朝向为切线的方向}

完整的代码如下：

<template><div><div id="container"></div></div>
</template><script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";
import {GLTFLoader} from "three/addons/loaders/GLTFLoader";let scene;
export default {name: "agv-single",data() {return{camera:null,cameraCurve:null,renderer:null,container:null,controls:null,pathIndex:1000,//小车的运动轨迹点索引agv:null}},methods:{initScene(){scene = new THREE.Scene();},initCamera(){this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera.position.set(500,500,500);},initLight(){//添加两个平行光const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight1.position.set(-300,-300,600)scene.add(directionalLight1);const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight2.position.set(600,200,600)scene.add(directionalLight2);},initRound(){//通过CatmullRomCurve3连接4个点绘制一条曲线，且闭合this.cameraCurve = new THREE.CatmullRomCurve3([new THREE.Vector3(-300, 40, 200),new THREE.Vector3(300, 40, 200),new THREE.Vector3(300, 40, -200),new THREE.Vector3(-300, 40, -200),],true);//参考路径上取1000个点，每个点上添加蓝色小球const pathPoints = this.cameraCurve.getPoints(this.pathIndex);//绘制一条路径参考线与上面的线重合，方便查看小车的行动轨迹const geometry = new THREE.BufferGeometry().setFromPoints(pathPoints);const material = new THREE.LineBasicMaterial({ color: '#000000', linewidth: 1, });//设置线条的颜色和宽度const curveObject = new THREE.Line(geometry, material);scene.add(curveObject);//在场景中加载一个agv小车，并将agv小车放在曲线的第一个点上const loader = new GLTFLoader()loader.load("/static/model/agv.gltf", (gltf) => {this.agv = gltf.scene;this.agv.position.set(pathPoints[0].x, pathPoints[0].y, pathPoints[0].z)   // 模型位置this.agv.scale.set(0.1,0.1,0.1)scene.add(this.agv)   // 加入场景})},initRenderer(){this.renderer = new THREE.WebGLRenderer({ antialias: true });this.container = document.getElementById("container")this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);this.renderer.setClearColor('#AAAAAA', 1.0);this.container.appendChild(this.renderer.domElement);},initControl(){this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping = true;this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度},initAnimate() {//参考路径的索引在1001~0中往复减少以实现小车循环行驶if (this.pathIndex === 0) {this.pathIndex = 1001;}this.pathIndex -= 1;if (this.agv) {// 判断agv加载完成后，开始不断更新agv的位置const sphereCurveIndex = this.pathIndex / 1000; // //取相参考径上当前点的坐标，取值0~1const positionVec = this.cameraCurve.getPointAt(sphereCurveIndex);//获取曲线上位置的点，传值为0-1的小数表示整个线段的位置this.agv.position.set( positionVec.x, positionVec.y, positionVec.z);//设置新的agv位置const tangent = this.cameraCurve.getTangentAt(sphereCurveIndex); // 返回一个点t在曲线上位置向量的法线向量（getTangentAt是返回曲线上某个点的切线）const lookAtVec = tangent.add(positionVec);// 位置向量和切线向量相加即为所需朝向的点向量this.agv.lookAt(lookAtVec);//设置agv的模型朝向为切线的方向}requestAnimationFrame(this.initAnimate);this.renderer.render(scene, this.camera);},initPage(){this.initScene();this.initCamera();this.initLight();this.initRenderer();this.initControl();this.initRound();this.initAnimate();}},mounted() {this.initPage()}
}
</script><style scoped>
#container{position: absolute;width:100%;height:100%;overflow: hidden;
}</style>

效果如下：

模型沿着曲线运动

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

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

相关文章

Gitlab: PHP项目CI/CD实践

Gitlab: PHP项目CI/CD实践

目录 1 说明 2 CI/CD 2.1 部署方式一&#xff1a;增量部署 2.1.1 目标服务器准备 2.2.2 Gitlab及Envoy脚本 2.2 部署方式二&#xff1a;镜像构建与部署 2.2.1 推送到私有化容器仓库 准备工作 脚本 要点 2.2.2 推送到hub.docker.com 准备工作 脚本 3 参考&#x…
阅读更多...
Mybatis-Plus实现Service封装

Mybatis-Plus实现Service封装

文章目录 5.1 MP封装Service介绍5.1.1 说明5.1.2 实现流程5.1.3 核心API介绍 5.2 MP封装Service快速入门5.2.1 定义服务扩展接口5.2.2 定义服务实现5.2.3 测试测试 5.3 MP封装Service实现CRUD操作 5.1 MP封装Service介绍 5.1.1 说明 MybatisPlus为了开发更加快捷&#xff0c;…
阅读更多...
华为“仓颉”不是中文编程：中文编程早有所属，势如破竹

华为“仓颉”不是中文编程：中文编程早有所属，势如破竹

“何时能见证中国自主研发的编程语言崛起&#xff1f;”这是我们这些对IT生态心怀关切的人常常深思的问题。 语言&#xff0c;作为文化的灵魂&#xff0c;总是与特定的环境和人群紧密相连。无论是中文还是英语&#xff0c;它们都不仅仅是交流的工具&#xff0c;更是各自文化背…
阅读更多...
KBPC3510-ASEMI逆变器整流桥KBPC3510

KBPC3510-ASEMI逆变器整流桥KBPC3510

编辑&#xff1a;ll KBPC3510-ASEMI逆变器整流桥KBPC3510 型号&#xff1a;KBPC3510 品牌&#xff1a;ASEMI 封装&#xff1a;KBPC-4 正向电流&#xff08;Id&#xff09;&#xff1a;35A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;1000V 正向浪涌电流&#xff…
阅读更多...
STM32学习7 按键扫描

STM32学习7 按键扫描

STM32学习7 按键扫描 一、实验电路介绍二、按键GPIO初始化三、扫描原理1. GPIO引脚配置2. 状态轮询3. 按键状态检测4. 循环扫描的优缺点优点&#xff1a;缺点&#xff1a; 四、一次扫描与持续扫描五、代码实现1. 头文件定义2. 函数实现3. 主体函数 一、实验电路介绍 本实验使用…
阅读更多...
广播

广播

1.什么是广播 2.标准广播 BroadStandardActivity.java package com.tiger.chapter09;import androidx.appcompat.app.AppCompatActivity;import android.content.Intent; import android.content.IntentFilter; import android.os.Bundle; import android.view.View;…
阅读更多...
为什么不用 index 做 key？

为什么不用 index 做 key？

“在 Vue 中&#xff0c;我们在使用 v-for 渲染列表的时候&#xff0c;为什么要绑定一个 key&#xff1f;能不能用 index 做 key&#xff1f;” 在聊这个问题之前我们还得需要知道 Vue 是如何操作 DOM 结构的。 虚拟DOM 我们知道&#xff0c;Vue 不可以直接操作 DOM 结构&am…
阅读更多...
js小案例-表格隔行变色

js小案例-表格隔行变色

运行效果： 代码演示： <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>18-案例-表格隔行变色</title></head><body><table id="tab1" border="1" width="800" al…
阅读更多...
北斗卫星引领智能油气管线革新

北斗卫星引领智能油气管线革新

北斗卫星引领智能油气管线革新 现代化的油气管线系统已成为国家经济发展的重要基础设施&#xff0c;而北斗卫星则为这些管线注入了新的活力。北斗卫星作为中国自主研发的卫星导航定位系统&#xff0c;其准确度和稳定性在全球范围内享有盛誉。在智能化时代的背景下&#xff0c;…
阅读更多...
【OpenGL实践０２】glDrawElements的使用案例

【OpenGL实践０２】glDrawElements的使用案例

目录 一、说明二、顶点顺序渲染和选择渲染2.1 基本方法函数2.2.顶点数据管理2.3 层级关系 三、测试EBO的代码四、总结五、后记 一、说明 我们常用的着色器绘制函数是glDrawArray和glDrawElements&#xff0c;glDrawArray我们已经使用的很熟练&#xff0c;不需要重提&#xff…
阅读更多...
深入了解Python的eval函数：基础用法与潜在危险【第118篇—eval函数】

深入了解Python的eval函数：基础用法与潜在危险【第118篇—eval函数】

深入了解Python的eval函数&#xff1a;基础用法与潜在危险 在Python中&#xff0c;eval函数是一个强大而灵活的工具&#xff0c;它允许将字符串作为代码来执行。然而&#xff0c;虽然eval在某些情况下非常方便&#xff0c;但它也潜藏着一些潜在的危险&#xff0c;如果不小心使…
阅读更多...
小火星露谷管理器 如何禁用管理器下载？

小火星露谷管理器 如何禁用管理器下载？

错误操作 当你在N网点击下载时&#xff0c;你可能会点击左边第一个按钮进行下载&#xff0c;如图&#xff1a; 然后你可能会看到这样的一个提示&#xff1a; 很多用户看着这个提示误以为小火星露谷管理器禁用了N网的下载。 正确操作 N网网页上的按钮MOD MANAGER DOWNLOAD翻…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023