• 【Three.js】知识梳理二十二：相机视角的平滑过渡与点击模型视角切换

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

    image.png

    1. 基本设置

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

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

    2. 引入动画库

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>

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

    定义相机切换函数
    1. function smoothCameraTransition(targetPosition, targetLookAt) {
    2.     // 保存当前相机的位置和朝向
    3.     const startPosition = camera.position.clone();
    4.     const startLookAt = new THREE.Vector3();
    5.     camera.getWorldDirection(startLookAt);
    6. ​
    7.     // 创建 tween 动画
    8.     new TWEEN.Tween(startPosition)
    9.         .to(targetPosition, 2000) // 动画持续时间为2000毫秒
    10.         .easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数
    11.         .onUpdate(() => {
    12.             camera.position.copy(startPosition);
    13.         })
    14.         .start();
    15. ​
    16.     new TWEEN.Tween(startLookAt)
    17.         .to(targetLookAt, 2000)
    18.         .easing(TWEEN.Easing.Quadratic.InOut)
    19.         .onUpdate(() => {
    20.             camera.lookAt(startLookAt);
    21.         })
    22.         .start();
    23. }
    更新渲染循环

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

    1. function animate() {
    2.     requestAnimationFrame(animate);
    3.     TWEEN.update();
    4.     renderer.render(scene, camera);
    5. }
    6. animate();

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

    添加射线投射器

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

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

    5. 完整代码示例

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Three.js Smooth Camera Transition</title>
    7.     <style>
    8.         body { margin: 0; }
    9.         canvas { display: block; }
    10.     </style>
    11. </head>
    12. <body>
    13.     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
    15.     <script>
    16.         // 基本设置
    17.         const scene = new THREE.Scene();
    18.         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    19.         camera.position.set(0, 5, 10);
    20. ​
    21.         const renderer = new THREE.WebGLRenderer();
    22.         renderer.setSize(window.innerWidth, window.innerHeight);
    23.         document.body.appendChild(renderer.domElement);
    24. ​
    25.         const light = new THREE.DirectionalLight(0xffffff, 1);
    26.         light.position.set(0, 10, 10);
    27.         scene.add(light);
    28. ​
    29.         // 添加示例模型
    30.         const geometry = new THREE.BoxGeometry();
    31.         const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
    32.         const cube = new THREE.Mesh(geometry, material);
    33.         cube.position.set(0, 1, 0);
    34.         scene.add(cube);
    35. ​
    36.         const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
    37.         const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
    38.         const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    39.         sphere.position.set(2, 1, 0);
    40.         scene.add(sphere);
    41. ​
    42.         // 动画函数
    43.         function smoothCameraTransition(targetPosition, targetLookAt) {
    44.             const startPosition = camera.position.clone();
    45.             const startLookAt = new THREE.Vector3();
    46.             camera.getWorldDirection(startLookAt);
    47. ​
    48.             new TWEEN.Tween(startPosition)
    49.                 .to(targetPosition, 2000)
    50.                 .easing(TWEEN.Easing.Quadratic.InOut)
    51.                 .onUpdate(() => {
    52.                     camera.position.copy(startPosition);
    53.                 })
    54.                 .start();
    55. ​
    56.             new TWEEN.Tween(startLookAt)
    57.                 .to(targetLookAt, 2000)
    58.                 .easing(TWEEN.Easing.Quadratic.InOut)
    59.                 .onUpdate(() => {
    60.                     camera.lookAt(startLookAt);
    61.                 })
    62.                 .start();
    63.         }
    64. ​
    65.         function animate() {
    66.             requestAnimationFrame(animate);
    67.             TWEEN.update();
    68.             renderer.render(scene, camera);
    69.         }
    70.         animate();
    71. ​
    72.         // 添加射线投射器
    73.         const raycaster = new THREE.Raycaster();
    74.         const mouse = new THREE.Vector2();
    75. ​
    76.         function onMouseClick(event) {
    77.             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    78.             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    79.             raycaster.setFromCamera(mouse, camera);
    80.             const intersects = raycaster.intersectObjects(scene.children);
    81. ​
    82.             if (intersects.length > 0) {
    83.                 const intersectedObject = intersects[0].object;
    84.                 const targetPosition = new THREE.Vector3().copy(intersectedObject.position).add(new THREE.Vector3(0, 2, 5));
    85.                 const targetLookAt = intersectedObject.position.clone();
    86.                 smoothCameraTransition(targetPosition, targetLookAt);
    87.             }
    88.         }
    89. ​
    90.         window.addEventListener('click', onMouseClick, false);
    91.     </script>
    92. </body>
    93. </html>

    通过以上步骤，我们成功实现了 Three.js 中的平滑相机视角切换和点击模型视角切换功能。这种技术可以大大提升用户的交互体验，并为3D场景添加更多的动态效果。希望本文对你在 Three.js 开发中有所帮助。

    附送250套精选项目源码

    源码截图

     源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接

  • 相关阅读:
    01.AJAX 概念和 axios 使用
    基于小波变换的像素级图像融合实例研究-含Matlab代码
    python基于django的汽车租赁系统nodejs+vue+element
    unsafe value used in a resource URL context，angular框架下嵌入iframe报错问题解决
    springMVC执行流程详解
    web前端期末大作业：HTML+CSS+JavaScript绿色的盆栽花店网站响应式模板 大学生鲜花网页设计
    WebSocket封装（TypeScript、单例模式、自动重连、事件监听、Vue中使用）
    Spring学习从练气到化虚
    [游戏开发][Unity] UnityWebRequest中断续传
    单元测试 - 测试场景记录
  • 原文地址：https://blog.csdn.net/lwzhang1101/article/details/139655772