Three.js 相机视角的平滑过渡与点击模型切换视角

在 Three.js 中，实现相机视角的平滑过渡和点击模型切换到查看模型视角是一个常见且有用的功能。这种效果不仅能提升用户体验，还能为场景互动添加更多的动态元素。

1. 基本设置

首先，我们需要创建一个基本的 Three.js 场景，包括相机、渲染器、光源以及一些示例模型。

创建场景和相机
// 创建场景
const scene = new THREE.Scene();
​
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
​
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 创建光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 10);
scene.add(light);
添加示例模型
// 创建一个简单的几何体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 1, 0);
scene.add(cube);
​
// 创建另一个几何体
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(2, 1, 0);
scene.add(sphere);

2. 引入动画库

为了实现平滑过渡，我们引入 tween.js 动画库。

npm install @tweenjs/tween.js
import * as TWEEN from '@tweenjs/tween.js'

3. 实现相机视角的平滑切换

定义相机切换函数
function smoothCameraTransition(targetPosition, targetLookAt) {// 保存当前相机的位置和朝向const startPosition = camera.position.clone();const startLookAt = new THREE.Vector3();camera.getWorldDirection(startLookAt);
​// 创建 tween 动画new TWEEN.Tween(startPosition).to(targetPosition, 2000) // 动画持续时间为2000毫秒.easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数.onUpdate(() => {camera.position.copy(startPosition);}).start();
​new TWEEN.Tween(startLookAt).to(targetLookAt, 2000).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(() => {camera.lookAt(startLookAt);}).start();
}
更新渲染循环

确保在渲染循环中更新 tween 动画。

function animate() {requestAnimationFrame(animate);TWEEN.update();renderer.render(scene, camera);
}
animate();

4. 实现点击模型切换视角

添加射线投射器

我们需要添加射线投射器来检测用户点击的模型。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
​
function onMouseClick(event) {// 将鼠标点击位置转换为标准化设备坐标mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
​// 更新射线投射器raycaster.setFromCamera(mouse, camera);
​// 计算交互对象const intersects = raycaster.intersectObjects(scene.children);
​if (intersects.length > 0) {const intersectedObject = intersects[0].object;// 切换相机视角到点击的模型const targetPosition = new THREE.Vector3().copy(intersectedObject.position).add(new THREE.Vector3(0, 2, 5));const targetLookAt = intersectedObject.position.clone();smoothCameraTransition(targetPosition, targetLookAt);}
}
​
window.addEventListener('click', onMouseClick, false);

5. 完整代码示例

将上述代码片段整合在一起，形成一个完整的示例。

<template><div ref="rendererContainer" class="renderer-container"></div>
</template><script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import TWEEN from '@tweenjs/tween.js';// 引用模板中的 DOM 元素
const rendererContainer = ref(null);// 初始化场景、相机和渲染器
onMounted(() => {const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 5, 10);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);rendererContainer.value.appendChild(renderer.domElement);const light = new THREE.DirectionalLight(0xffffff, 1);light.position.set(0, 10, 10);scene.add(light);// 添加示例模型const geometry = new THREE.BoxGeometry();const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);cube.position.set(0, 1, 0);scene.add(cube);const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.position.set(2, 1, 0);scene.add(sphere);// 相机平滑过渡函数function smoothCameraTransition(targetPosition, targetLookAt) {const startPosition = camera.position.clone();const startLookAt = new THREE.Vector3();camera.getWorldDirection(startLookAt);new TWEEN.Tween(startPosition).to(targetPosition, 2000).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(() => {camera.position.copy(startPosition);}).start();new TWEEN.Tween(startLookAt).to(targetLookAt, 2000).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(() => {camera.lookAt(startLookAt);}).start();}function animate() {requestAnimationFrame(animate);TWEEN.update();renderer.render(scene, camera);}animate();// 添加射线投射器const raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();function onMouseClick(event) {mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;raycaster.setFromCamera(mouse, camera);const intersects = raycaster.intersectObjects(scene.children);if (intersects.length > 0) {const intersectedObject = intersects[0].object;const targetPosition = new THREE.Vector3().copy(intersectedObject.position).add(new THREE.Vector3(0, 2, 5));const targetLookAt = intersectedObject.position.clone();smoothCameraTransition(targetPosition, targetLookAt);}}window.addEventListener('click', onMouseClick, false);
});
</script><style>
.renderer-container {width: 100%;height: 100vh;
}
</style>

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

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

相关文章

【Web】0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单

【Web】0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单

0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单 html基本骨架语义化标签图片属性a链接 非语义化标签特殊符号标签 列表无序列表结果展示 有序列表结果展示 定义列表结果展示 表格table属性tr属性结果展示 表单单标签form属性input属性selecttextareabu…
阅读更多...
判断一个数字是否为质数。-多语言

判断一个数字是否为质数。-多语言

目录 C 语言实现 Python 实现 Java 实现 Js 实现 题目&#xff1a;判断一个数字是否为质数。 程序分析&#xff1a;质数&#xff08;prime number&#xff09;又称素数&#xff0c;有无限个。一个大于1的自然数&#xff0c;除了1和它本身外&#xff0c;不能被其他自然数整…
阅读更多...
iwebsec 靶场 —— SSRF 漏洞

iwebsec 靶场 —— SSRF 漏洞

免责声明 本博客文章仅供教育和研究目的使用。本文中提到的所有信息和技术均基于公开来源和合法获取的知识。本文不鼓励或支持任何非法活动&#xff0c;包括但不限于未经授权访问计算机系统、网络或数据。 作者对于读者使用本文中的信息所导致的任何直接或间接后果不承担任何…
阅读更多...
docker-compose 升级

docker-compose 升级

官方下载地址&#xff1a; https://github.com/docker/compose/releases 下载完放到kali root目录下 # mv docker-compose-Linux-x86_64 /usr/local/bin/docker-compose # chmod x /usr/local/bin/docker-compose # docker-compose --version
阅读更多...
五天SpringCloud计划——DAY1之mybatis-plus的使用

五天SpringCloud计划——DAY1之mybatis-plus的使用

一、引言 咱也不知道为啥SpringCloud课程会先教mybatis-plus的使用&#xff0c;但是教都教了&#xff0c;就学了吧&#xff0c;学完之后觉得mybatis-plus中的一些方法还是很好用了&#xff0c;本文作为我学习mybatis-plus的总结提升&#xff0c;希望大家看完之后也可以熟悉myba…
阅读更多...
linux运维解决方案专家是做什么的

linux运维解决方案专家是做什么的

Linux运维解决方案专家是一位在企业IT系统中负责设计、实施、优化和维护基于Linux操作系统的解决方案的专业人士。他们需要结合业务需求&#xff0c;提供稳定、高效、安全的系统运维方案&#xff0c;同时确保企业IT基础设施的平稳运行。以下是其工作职责、技能要求和常见任务的…
阅读更多...
系统实现屏幕横竖屏切换

系统实现屏幕横竖屏切换

需求场景 机器默认横屏或者竖屏显示 -强制横竖屏显示 实现思路 旋转 uboot logo 和内核 logo旋转 Android 桌面旋转触摸 这个很好理解&#xff1a; uboot 内核 开机动画都是有界面的&#xff0c;旋转改变方向&#xff0c;同时提供新的横屏或者竖屏logo旋转桌面&#xff0c…
阅读更多...
新手开始学习编程选择什么软件比较好？

新手开始学习编程选择什么软件比较好？

对于新手学习编程&#xff0c;选择合适的软件和工具非常重要。下面是一些推荐的软件和开发环境&#xff0c;适合初学者使用&#xff1a; 1. 文本编辑器 Visual Studio Code (VS Code)&#xff1a; 特点&#xff1a;轻量级、开源、支持多种编程语言&#xff08;如 JavaScript、…
阅读更多...
前端 vue3 + element-plus + ts 组件通讯，defineExpose，子传父示例

前端 vue3 + element-plus + ts 组件通讯，defineExpose，子传父示例

父组件&#xff1a; 子组件&#xff1a;
阅读更多...
【机器学习】机器学习的基本分类-监督学习-逻辑回归-Sigmoid 函数

【机器学习】机器学习的基本分类-监督学习-逻辑回归-Sigmoid 函数

Sigmoid 函数是一种常用的激活函数&#xff0c;尤其在神经网络和逻辑回归中扮演重要角色。它将输入的实数映射到区间 (0, 1)&#xff0c;形状类似于字母 "S"。 1. 定义与公式 Sigmoid 函数的公式为&#xff1a; 特点 输出范围&#xff1a;(0, 1)&#xff0c;适合用…
阅读更多...
eBay 基于 Celeborn RESTful API 进行自动化工具集成实践

eBay 基于 Celeborn RESTful API 进行自动化工具集成实践

作者&#xff1a;王斐&#xff0c;ebay Hadoop 团队软件工程师&#xff0c;Apache Kyuubi PMC member&#xff0c;Apache Celeborn Committer。 简介&#xff1a;Apache Celeborn 是一个统一的大数据中间服务&#xff0c;致力于提高不同MapReduce引擎的效率和弹性。为了Spark …
阅读更多...
Python 和 Pyecharts 对Taptap相关数据可视化分析

Python 和 Pyecharts 对Taptap相关数据可视化分析

结果展示&#xff1a; 数据来源&#xff1a; Python爬取TapTap 热门游戏信息并存储到数据库&#xff08;详细版&#xff09; 目录 结果展示&#xff1a; 数据来源&#xff1a; Python爬取TapTap 热门游戏信息并存储到数据库&#xff08;详细版 一、引言 二、准备工作 三、…
阅读更多...
【Linux】常见指令 + 权限概念

【Linux】常见指令 + 权限概念

文章目录 一、重要的指令mkdir指令rmdir指令 && rm 指令man指令cp指令mv指令less指令find指令tar指令 二、关于Linux中的权限文件访问者的分类&#xff08;人&#xff09;文件类型和访问权限&#xff08;事物属性&#xff09;文件权限值的表示方法文件访问权限的相关设…
阅读更多...
老旧前端项目如何升级工程化的项目

老旧前端项目如何升级工程化的项目

因为历史的原因存在着大量的老旧前端项目&#xff0c;而在今天的开发环境中已经不再适应了&#xff0c;于是产生了升级到新的环境的需求。比如笔者当前的一个登录页面项目&#xff0c;就是以下面为技术栈的老旧项目。 基于 jQuery包管理基于 require.js&#xff0c;甚至有的没…
阅读更多...
【Conda 】Conda 配置文件详解：优化你的包管理与环境设置

【Conda 】Conda 配置文件详解：优化你的包管理与环境设置

目录 引言一、什么是 .condarc 文件&#xff1f;二、.condarc 文件的详细解析与优化2.1 SSL 验证2.2 设置 Conda 下载源2.3 设置环境和包存储路径2.4 代理服务器设置2.5 连接超时设置2.6 显示频道 URL2.7 包版本与构建选择2.8 环境依赖性管理2.9 禁用默认包版本2.10 Conda 配置…
阅读更多...
在国外，使用中国移动app办理停机保号

在国外，使用中国移动app办理停机保号

1.人在国内的时候&#xff0c;先使用手机下载中国移动app 以前网上营业厅是可以直接办理停机保号的&#xff0c;现在不可以了 2.人在国内的时候&#xff0c;确保自己的手机能够登录中国移动app 这个步骤保证回国前可以使用中国移动app复机 3.人在国内的时候&#xff0c;拨打…
阅读更多...
C# 解决【托管调试助手 “ContextSwitchDeadlock“:……】问题

C# 解决【托管调试助手 “ContextSwitchDeadlock“:……】问题

文章目录 一、遇到问题二、解决办法 一、遇到问题 托管调试助手 “ContextSwitchDeadlock”:“CLR 无法从 COM 上下文 0x56e81e70 转换为 COM 上下文 0x56e81d48&#xff0c;这种状态已持续 60 秒。拥有目标上下文/单元的线程很有可能执行的是非泵式等待或者在不发送 Windows …
阅读更多...
Vscode阅读C/C++ Code实用教程

Vscode阅读C/C++ Code实用教程

目录 1.必备插件2.创建工程3.重要的快捷键及使用 1.必备插件 C/C IntelliSense - 用于跳转GitLens — Git supercharged -用于查看git 提交记录Remote - SSH -用于连接linux服务器 2.创建工程 创建工程还是蛮重要的&#xff0c;虽然不创建同样可以看Code&#xff0c;创建工程…
阅读更多...
OGRE 3D----4. OGRE和QML共享opengl上下文

OGRE 3D----4. OGRE和QML共享opengl上下文

在现代图形应用开发中，OGRE（Object-Oriented Graphics Rendering Engine）和QML（Qt Modeling Language）都是非常流行的工具。OGRE提供了强大的3D渲染能力，而QML则用于构建灵活的用户界面。在某些应用场景中，我们需要在同一个应用程序中同时使用OGRE和QML，并且共享OpenGL…
阅读更多...
C语言进阶7:程序环境与预处理

C语言进阶7:程序环境与预处理

本章重点 程序的翻译环境程序的执行环境详解&#xff1a;C语言程序的编译 链接预定义符号介绍预处理指令 #define宏和函数的对比预处理操作符#和##的介绍命令定义预处理指令 #include预处理指令 #undef条件编译 1.程序的翻译环境和执行环境 在ANSIC的任何一种实现中&#x…
阅读更多...
最新文章

Copyright @ 2022~2023