Threejs之OrbitControls轨道控制器

news2025/11/1 6:47:40

本文目录

前言
一、Orbitcontrols（轨道控制器）
- 1.1 基础使用
- 1.2 代码演示
二、效果展示

前言

Orbitcontrols（轨道控制器）可以使得相机围绕目标进行轨道运动。

一、Orbitcontrols（轨道控制器）

1.1 基础使用

Constructor OrbitControls( object : Camera, domElement : HTMLDOMElement ) object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。 domElement: 用于事件监听的HTML元素。
更多文档配置请点这里。

1.2 代码演示

在前面我们创建的物体中，可以发现我们没办法去用鼠标控制物体运动。这个时候我们就可以使用Orbitcontrols（轨道控制器），代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 5);
        camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)
        // 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质
        const cube = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1), 
            new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        );
        // 将网格对象放入到我们的场景中
        scene.add(cube);

        // 控制器
        const control = new OrbitControls(camera, renderer.domElement)
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>