three.js相机按照指定路线在建筑模型中漫游(支持开始,暂停)

three.js相机按照指定路线在模型中漫游(支持开始,暂停)

关键点
相机运动曲线

// 相机路线
const points = [new THREE.Vector3(0, 40, 300),new THREE.Vector3(50, 40, 300),new THREE.Vector3(50, 40, 50),new THREE.Vector3(150, 40, 50),new THREE.Vector3(150, 40, 0),
];
// 三维样条曲线
const path = new THREE.CatmullRomCurve3(points);
// 从曲线上等间距获取一定数量点坐标,点越多,相机运动越慢
const pointsArr = path.getSpacedPoints(2500);

相机位置移动

    camera.position.copy(pointsArr[i]);// 曲线上当前点pointsArr[i]和下一个点pointsArr[i+1]近似模拟当前点曲线切线// 设置相机观察点为当前点的下一个点,相机视线和当前点曲线切线重合camera.lookAt(pointsArr[i + 1]);i += 1; //调节速度

完整代码

<template><div class="app"><div class="btns"><button @click="btnStart">开始移动</button><button @click="btnStop">暂停</button></div><div ref="canvesRef" class="canvas-wrap"></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import TWEEN from "@tweenjs/tween.js";const canvesRef = ref(null);
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
const isPlay = ref(false);
let stopPoint = new THREE.Vector3(0, 40, 300);let scene;
let camera;
let renderer;
let axesHelper;
let cameraControls;
// 相机路线
const points = [new THREE.Vector3(0, 40, 300),new THREE.Vector3(50, 40, 300),new THREE.Vector3(50, 40, 50),new THREE.Vector3(150, 40, 50),new THREE.Vector3(150, 40, 0),
];
// 路径曲线
const pathPoints = [new THREE.Vector3(0, 0, 300),new THREE.Vector3(50, 0, 300),new THREE.Vector3(50, 0, 50),new THREE.Vector3(150, 0, 50),new THREE.Vector3(150, 0, 0),
];
// 三维样条曲线
const path = new THREE.CatmullRomCurve3(points);
// 从曲线上等间距获取一定数量点坐标,点越多,相机运动越慢
const pointsArr = path.getSpacedPoints(2500);
// 场景
scene = new THREE.Scene();
// 模型
for (let i = 0; i < 3; i++) {for (let j = 0; j < 3; j++) {const geometry = new THREE.BoxGeometry(40, 80, 40);const material = new THREE.MeshBasicMaterial({color: getRandomColor(),});const mesh = new THREE.Mesh(geometry, material);mesh.position.set(i * 100, 40, j * 100);scene.add(mesh);}
}
renderPath();
// 相机
camera = new THREE.PerspectiveCamera(75, canvasWidth / canvasHeight, 0.1, 3000);
camera.position.set(400, 400, 400);
camera.lookAt(0, 0, 0);// 坐标辅助对象
axesHelper = new THREE.AxesHelper(200);
scene.add(axesHelper);// 渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(canvasWidth, canvasHeight);// 动画渲染循环
let i = 0;
function animate() {if (isPlay.value && i < pointsArr.length - 1) {// 相机位置设置在当前点位置camera.position.copy(pointsArr[i]);// 曲线上当前点pointsArr[i]和下一个点pointsArr[i+1]近似模拟当前点曲线切线// 设置相机观察点为当前点的下一个点,相机视线和当前点曲线切线重合camera.lookAt(pointsArr[i + 1]);i += 1; //调节速度}if (i === pointsArr.length - 1) {camera.position.set(400, 400, 400);camera.lookAt(0, 0, 0);}renderer.render(scene, camera);TWEEN.update();requestAnimationFrame(animate);
}
animate();
// 相机轨道控制器
cameraControls = new OrbitControls(camera, renderer.domElement);
cameraControls.target.set(0, 0, 0); // 与相机的lookat保持一致
cameraControls.maxPolarAngle = Math.PI / 2; // 相机不能进入地下onMounted(() => {canvesRef.value.appendChild(renderer.domElement);
});
// 随机色16进制
function getRandomColor() {var letters = "0123456789ABCDEF";var color = "#";for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;
}
// 开始
function btnStart() {console.log("开始");// 相机动画new TWEEN.Tween(camera.position).to(stopPoint, 2000).onUpdate(function () {// camera.lookAt(0, 0, 0);camera.lookAt(stopPoint.x, stopPoint.y, stopPoint.z);}).onComplete(function () {isPlay.value = true;}).start();
}
function btnStop() {stopPoint = camera.position.clone();isPlay.value = false;
}
function renderPath() {const material = new THREE.LineBasicMaterial({color: 0x0000ff,});const geometry = new THREE.BufferGeometry().setFromPoints(pathPoints);const line = new THREE.Line(geometry, material);scene.add(line);
}
</script><style lang="scss" scoped>
.app {position: relative;.btns {position: absolute;top: 20px;left: 50px;}
}
</style>

图例

在这里插入图片描述

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

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

相关文章

十三、K8S之亲和性

亲和性 一、概念 在K8S中&#xff0c;亲和性&#xff08;Affinity&#xff09;用来定义Pod与节点关系的概念&#xff0c;亲和性通过指定标签选择器和拓扑域约束来决定 Pod 应该调度到哪些节点上。与污点相反&#xff0c;它主要是尽量往某节点靠。 亲和性是 Kubernetes 中非常…

详细解读QLC SSD无效编程问题-2

作者通过SimpleSSD仿真模型&#xff0c;采用SLCQLC混合模式来开展进一步的验证工作。评估过程中&#xff0c;当写入请求到达固态硬盘时&#xff0c;首先会被写入缓存&#xff08;DRAM&#xff09;&#xff0c;然后才被回写到NAND。文中引入了一个名叫做LRU(Least Recently Used…

Ajax同步调用影响加载动画展示问题

问题描述&#xff1a; 在做录入文章到时候&#xff0c;由于外部图片权限问题&#xff0c;在app展示的时候无法访问&#xff0c;所以需要在文章提交的时候做一下图片处理&#xff0c;这里使用ajax同步上传到服务器 返回url替换掉 原来的img的src&#xff1b;问题出现在点提交的…

微机原理练习题答案 13

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。) 1、十六进制数5BF.C8转换成二进制数是(C) A. 11011100111111101B B. 010111011011.01101B C. 010110111111.11001B D. 010111011011.11001B 2,最适合进行加减操作的数字编…

【Unity中的A星寻路】Navigation导航寻路系统四大页签详解

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Nginx(十七) 日志轮训/切割

1.编写shell脚本 Nginx_Log_Path"/usr/local/nginx/logs/" Dateformatdate %Y%m%d mv ${Nginx_Log_Path}/access.log ${Nginx_Log_Path}/access-${Dateformat}.log mv ${Nginx_Log_Path}/access_8688.log ${Nginx_Log_Path}/access_8688-${Dateformat}.log mv ${Ngi…

几种读nii图像方法的轴序比较

读 .nii / .nii.gz 图像并转成 numpy 可用 medpy.io、nibabel、itk、SimpleITK 几种方法&#xff0c;然而几种方法读出来的轴序有出入&#xff0c;本篇比较此几种方法。 Datum 所用数据来自 verse&#xff0c;经 iTomxy/data/verse/preprocess.py 预处理&#xff0c;朝向和轴…

【观察】Aginode安捷诺:坚守“长期主义”,服务中国数字经济

毫无疑问&#xff0c;随着整个社会加速数字化转型&#xff0c;尤其是5G、人工智能、大数据等技术兴起&#xff0c;以及智慧医疗、智慧金融、智能制造等应用加速落地&#xff0c;算力网络在经济社会发展中扮演了愈来愈重要的角色&#xff0c;成为支撑数字经济蓬勃发展的“新引擎…

2023-2024年度安徽省职业院校技能大赛(中职组) 网络空间安全竞赛试题

2023-2024年度安徽省职业院校技能大赛&#xff08;中职组&#xff09; 网络空间安全竞赛试题 &#xff08;总分 1000 分&#xff09; 赛题说明 一、竞赛项目简介 “网络安全”竞赛共分 A.基础设施设置与安全加固&#xff1b;B.网络安全事件响应、数字取证调查和应用安全&#…

根本记不住MySQL进阶查询语句

1 MySQL进阶查询 1.1 MySQL进阶查询的语句 全文以数据库location和Store_Info为实例 ---- SELECT ----显示表格中一个或数个字段的所有数据记录 语法&#xff1a;SELECT "字段" FROM "表名"; select 列名 from 表名 ; ---- DISTINCT ----不显示重复的数…

高清网络视频监控平台的应用-城市大交通系统视联网

目 录 一、应用需求 二、系统架构设计 三、功能介绍 1.实时视频监控 2.云台控制 3.语音功能 4. 录像管理与回放 5.告警联动 6.多种显示终端呈现 &#xff08;1&#xff09;CS客户端 &#xff08;2&#xff09;web客户端 &#xff08;3&#xf…

seo分享:慎重使用蜘蛛池

其实要提高搜索引擎蜘蛛的来访次数&#xff0c;唯一的方法还是要通过网站本身的内容更新。频繁更新有质量的内容&#xff0c;才能够提高蜘蛛的来访次数。如果本身内容更新不多&#xff0c;外部引流的蜘蛛过多&#xff0c;最终发现没什么内容索引&#xff0c;蜘蛛来访的次数也会…

【竞技宝】DOTA2:tundra宣布解散旗下阵容 whitemon留队

北京时间2024年1月4日&#xff0c;在DOTA2ESL吉隆坡站的比赛结束后&#xff0c;最近将要迎来的是BB Dacha别墅杯的预选赛&#xff0c;目前随着AR官宣新赛季阵容&#xff0c;国内一线队伍都已经全部公布了大名单。而国外还有一些队伍仍在进行人员调整&#xff0c;其中就包括前TI…

基于Java医院手术室管理系统

基于Java的医院手术室管理系统是一个用于管理医院手术室资源的软件系统。该系统采用Java编程语言&#xff0c;利用JSP、Servlet等技术进行开发&#xff0c;并使用MySQL数据库进行数据存储和处理。 系统功能主要包括&#xff1a; 1、手术室资源管理&#xff1a;管理员可以添加…

Strict MIME type checking is enforced for module scripts per HTML spec.

目录 前言错误信息如下:前言 最近使用docker打包Nginx和vue 为镜像文件,启动镜像时报错 错误信息如下: index89886.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Stri…

机器学习模型评价指标

机器学习模型评价指标可以分为以下几类&#xff1a; 1. 分类模型评价指标&#xff1a; - 准确率&#xff08;Accuracy&#xff09;&#xff1a;模型正确分类的样本占总样本数量的比例。 - 精确率&#xff08;Precision&#xff09;&#xff1a;模型预测为正类的样本中&a…

MySQL之、CRUD、函数及union查询(实施必会)

文章目录 前言一、CRUD1.1SELECT(查询)1.2INSERT(新增)1.3UPDATE(修改)1.4DELETE(删除) 二、函数2.1常见函数2.1.1字符函数2.1.2数字函数2.1.3日期函数 2.2流程控制函数(重点)2.3聚合函数 三、union与union all思维导图&#xff1a; 前言 本篇博主给大家带来MySQL之、CRUD、常…

搜维尔科技:ART光学跟踪系统在工业VR/AR领域的应用

ART公司成立于1999年&#xff0c;拥有38万员工遍布全球&#xff0c;ART一直致力于红外线光学跟踪系统的研发与生产&#xff0c;并将先进的科技应用于产品研发&#xff0c;产品制造&#xff0c;市场营销&#xff0c;产品销售以及优秀的客户支持。主要向客户提供高端的虚拟现实跟…

MySQL Enterprise版本各系统安装包下载

一、官方下载地址 oracle下载地址 https://edelivery.oracle.com/osdc/faces/SoftwareDelivery 使用oracle账号登录进去 Category选择Download Package(下载安装包)&#xff0c;搜索栏输入mysql Enterprise关键字点search进行搜索。选项结果第一个MySQL Enterprise Edition&a…

JAVA的引用与C++的指针有什么区别

JAVA的引用与C的指针有什么区别 1. Java值类型与引用类型1.1 变量初始化1.2 变量赋值1.3 函数传参 2. Java数据存储方式2.1 Java局部变量&&Java方法参数2.2 Java数组类型引用和对象2.3 String类型数据 3. Java引用类型3.1 强引用3.2 软引用3.3 弱引用3.4 虚引用 4. JAV…