threejs OrbitControls 控件控制相机旋转、缩放和平移视图

OrbitControls 是 Three.js 中非常常用的控件库，它允许用户通过鼠标和触摸屏与3D场景进行交互，包括旋转、缩放和平移视图。要使用 OrbitControls，你需要引入相应的模块，并将其附加到你的相机和渲染器上。以下是详细的步骤和示例代码。

步骤

引入 OrbitControls:
- 确保你已经包含了 Three.js 库。
- 引入 OrbitControls 模块。
创建场景、相机和渲染器:
- 创建一个基本的 Three.js 场景，包括相机、场景和渲染器。
初始化 OrbitControls:
- 创建 OrbitControls 实例，并将其绑定到相机和渲染器上。
设置动画循环:
- 在每一帧中更新 OrbitControls 以确保交互效果正常工作。

示例代码

以下是一个完整的示例代码，展示了如何使用 OrbitControls：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - orbit controls</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>

<script type="importmap">
{
    "imports": {
        "three": "../build/three.module.js",
        "three/addons/": "./jsm/"
    }
}
</script>

<script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    let camera, scene, renderer;
    let geometry, material, mesh;

    init();
    animate();

    function init() {

        // 创建场景
        scene = new THREE.Scene();

        // 创建相机
        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
        camera.position.z = 1;

        // 创建几何体和材质
        geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
        material = new THREE.MeshNormalMaterial();

        // 创建网格并添加到场景中
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        // 创建渲染器
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 初始化 OrbitControls
        const controls = new OrbitControls(camera, renderer.domElement);

        // 设置一些 OrbitControls 的属性（可选）
        controls.enableDamping = true; // 启用阻尼效果
        controls.dampingFactor = 0.25; // 阻尼系数
        controls.enableZoom = true; // 启用缩放
        controls.enablePan = true; // 启用平移

        // 监听窗口大小变化
        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {

        requestAnimationFrame(animate);

        // 更新 OrbitControls
        controls.update();

        renderer.render(scene, camera);

    }

</script>

</body>
</html>

关键点解释

1. 引入 OrbitControls

在 <script type="importmap"> 中指定了 OrbitControls 的路径，并通过 import 语句引入了该模块。

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

2. 初始化 OrbitControls

创建 OrbitControls 实例时，需要传入两个参数：相机和渲染器的 DOM 元素。

const controls = new OrbitControls(camera, renderer.domElement);

3. 设置 OrbitControls 属性

你可以根据需要调整 OrbitControls 的各种属性，例如启用或禁用某些功能：

controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.25; // 阻尼系数
controls.enableZoom = true; // 启用缩放
controls.enablePan = true; // 启用平移

4. 更新 OrbitControls

在每一帧的动画循环中调用 controls.update() 方法，以确保交互效果正常工作。

function animate() {
    requestAnimationFrame(animate);

    // 更新 OrbitControls
    controls.update();

    renderer.render(scene, camera);
}

其他常用属性和方法

controls.autoRotate: 自动旋转相机。
controls.target: 设置相机的目标点，默认为 (0, 0, 0)。
controls.maxDistance 和 controls.minDistance: 设置相机的最大和最小距离。
controls.maxPolarAngle 和 controls.minPolarAngle: 设置相机的最大和最小极角。

posted on 2025-03-06 21:56 joken1310 阅读(1090) 评论(0) 收藏举报

刷新页面返回顶部

joken-前端工程师

步骤