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

news/2024/12/4 17:23:33/

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.ppmy.cn/news/1552332.html

相关文章

经典图论之道路与航线

题目 2412: 信息学奥赛一本通T1503-道路和航线 时间限制: 2s 内存限制: 192MB 提交: 37 解决: 16 题目描述 原题来自&#xff1a;USACO 2011 Jan. Gold Farmer John 正在一个新的销售区域对他的牛奶销售方案进行调查。他想把牛奶送到 T 个城镇 &#xff0c;编号为 1 到 T。这些…

springboot/ssm餐厅点餐管理系统Java在线点餐美食论坛系统web美食源码

springboot/ssm餐厅点餐管理系统Java在线点餐美食论坛系统web美食源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&…

【开发语言】层次状态机(HSM)介绍

层次状态机&#xff08;Hierarchical State Machine, HSM&#xff09;&#xff0c;从基本原理、结构设计、实现方法以及如何结合 Qt 进行具体实现等方面进行分析。 1. 层次状态机的基本原理 层次状态机是一种用于管理复杂系统行为的状态机模型&#xff0c;它通过将状态组织成…

Python 3 教程第33篇(MySQL - mysql-connector 驱动)

Python MySQL - mysql-connector 驱动 MySQL 是最流行的关系型数据库管理系统&#xff0c;如果你不熟悉 MySQL&#xff0c;可以阅读我们的 MySQL 教程。 本章节我们为大家介绍使用 mysql-connector 来连接使用 MySQL&#xff0c; mysql-connector 是 MySQL 官方提供的驱动器。…

分布式资源调度——yarn 概述(资源调度基本架构和高可用的实现)

此文章是学习笔记&#xff0c;图片均来源于B站&#xff1a;哈喽鹏程 yarn详细介绍 1、yarn 简介1.1 yarn的简介1.2 yarn 的基本架构1.3. yarn 的高可用 2、yarn 调度策略、运维、监控2.1 yarn 的调度策略2.1.1 FIFO scheduler(先进先出)2.1.2 容量调度2.1.3 公平调度 2.2 yarn…

泛化调用 :在没有接口的情况下进行RPC调用

什么是泛化调用&#xff1f; 在RPC调用的过程中&#xff0c;调用端向服务端发起请求&#xff0c;首先要通过动态代理&#xff0c;动态代理可以屏蔽RPC处理流程&#xff0c;使得发起远程调用就像调用本地一样。 RPC调用本质&#xff1a;调用端向服务端发送一条请求消息&#x…

小程序 - 比较数字大小

小程序交互练习 - 比较数字大小的小程序 目录 比较数字大小 功能描述 准备工作 页面内容 设置页面事件 页面绑定事件 比较大小 按钮绑定事件 比较事件 设置结果显示 页面样式 功能截图 总结 比较数字大小 本案例将实现“比较数字大小”微信小程序&#xff0c;它的…

web安全攻防入门教程

Web安全攻防入门教程 Web安全攻防是指在Web应用程序的开发、部署和运行过程中&#xff0c;保护Web应用免受攻击和恶意行为的技术与策略。这个领域不仅涉及防御措施的实现&#xff0c;还包括通过渗透测试、漏洞挖掘和模拟攻击来识别潜在的安全问题。 本教程将带你入门Web安全攻…