Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。

本文主要是介绍Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

demo案例
Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。下面是它的详细讲解:
在这里插入图片描述

构造函数:

OrbitControls(object: Camera, domElement?: HTMLElement)
  • object:THREE.Camera 实例,控制器将围绕此对象进行操作,例如相机。
  • domElement (可选):用于监听鼠标事件的 HTML 元素。如果未提供,则默认为 document

属性:

  1. enabled: boolean

    • 控制器是否启用。
  2. target: Vector3

    • 控制相机围绕其旋转的目标点。
  3. minDistance: number

    • 缩放的最小距离。
  4. maxDistance: number

    • 缩放的最大距离。
  5. minPolarAngle: number

    • 极角的最小值。
  6. maxPolarAngle: number

    • 极角的最大值。
  7. minAzimuthAngle: number

    • 方位角的最小值。
  8. maxAzimuthAngle: number

    • 方位角的最大值。
  9. enableDamping: boolean

    • 是否启用阻尼以实现平滑移动。
  10. dampingFactor: number

    • 阻尼系数,控制平滑移动的速度。
  11. enableZoom: boolean

    • 是否启用缩放功能。
  12. zoomSpeed: number

    • 缩放速度。
  13. enableRotate: boolean

    • 是否启用旋转功能。
  14. rotateSpeed: number

    • 旋转速度。
  15. enablePan: boolean

    • 是否启用平移功能。
  16. panSpeed: number

    • 平移速度。
  17. screenSpacePanning: boolean

    • 是否启用屏幕空间平移。
  18. keyPanSpeed: number

    • 按键平移速度。
  19. autoRotate: boolean

    • 是否启用自动旋转。
  20. autoRotateSpeed: number

    • 自动旋转速度。

方法:

  1. update(): void

    • 更新控制器状态。
  2. listenToKeyEvents(domElement: HTMLElement): void

    • 监听键盘事件。
  3. saveState(): void

    • 保存当前控制器状态。
  4. reset(): void

    • 重置控制器状态为初始状态。
  5. dispose(): void

    • 清理控制器所占用的资源,释放内存。

示例:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';// 创建相机
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建 OrbitControls 实例
const controls = new OrbitControls(camera, renderer.domElement);// 设置控制器属性
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.rotateSpeed = 0.5;// 动画循环
function animate() {requestAnimationFrame(animate);controls.update(); // 更新控制器状态renderer.render(scene, camera);
}animate();

// 创建场景


function init() {// 创建场景scene = new THREE.Scene();// 设置背景颜色scene.background = new THREE.Color(0xcccccc);// 添加雾效scene.fog = new THREE.FogExp2(0xcccccc, 0.002);// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });// 设置像素比率renderer.setPixelRatio(window.devicePixelRatio);// 设置渲染器大小renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的 DOM 元素添加到文档中document.body.appendChild(renderer.domElement);// 创建相机camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(400, 200, 0);// 控制器controls = new OrbitControls(camera, renderer.domElement);controls.listenToKeyEvents(window); // 可选,监听键盘事件//controls.addEventListener( 'change', render ); // 仅在静态场景中调用此行 (即如果没有动画循环)// 启用阻尼以实现平滑移动controls.enableDamping = true;// 设置阻尼系数controls.dampingFactor = 0.05;// 禁用屏幕空间平移controls.screenSpacePanning = false;// 设置缩放的最小距离controls.minDistance = 100;// 设置缩放的最大距离controls.maxDistance = 500;// 设置极角最大值controls.maxPolarAngle = Math.PI / 2;// 创建几何体和材质const geometry = new THREE.ConeGeometry(10, 30, 4, 1);const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true });// 创建网格并随机添加到场景中for (let i = 0; i < 500; i++) {const mesh = new THREE.Mesh(geometry, material);mesh.position.x = Math.random() * 1600 - 800;mesh.position.y = 0;mesh.position.z = Math.random() * 1600 - 800;mesh.updateMatrix();mesh.matrixAutoUpdate = false;scene.add(mesh);}// 创建灯光并添加到场景中const dirLight1 = new THREE.DirectionalLight(0xffffff, 3);dirLight1.position.set(1, 1, 1);scene.add(dirLight1);const dirLight2 = new THREE.DirectionalLight(0x002288, 3);dirLight2.position.set(-1, -1, -1);scene.add(dirLight2);const ambientLight = new THREE.AmbientLight(0x555555);scene.add(ambientLight);// 窗口大小调整时更新渲染器和相机window.addEventListener('resize', onWindowResize);
}

// 窗口大小调整时更新渲染器和相机


function onWindowResize() {// 更新相机的长宽比camera.aspect = window.innerWidth / window.innerHeight;// 更新相机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器的大小renderer.setSize(window.innerWidth, window.innerHeight);
}

// 渲染场景


function animate() {// 请求下一帧动画requestAnimationFrame(animate);// 更新控制器状态,仅在启用阻尼或自动旋转时才需要controls.update();// 渲染场景render();
}function render() {// 使用渲染器将场景渲染到相机视角renderer.render(scene, camera);
}

本内容来源于小豆包,想要更多内容请跳转小豆包 》

这篇关于Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/842489

相关文章

Ubuntu 24.04启用root图形登录的操作流程

《Ubuntu24.04启用root图形登录的操作流程》Ubuntu默认禁用root账户的图形与SSH登录,这是为了安全,但在某些场景你可能需要直接用root登录GNOME桌面,本文以Ubuntu2... 目录一、前言二、准备工作三、设置 root 密码四、启用图形界面 root 登录1. 修改 GDM 配

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1:启用数据库审计日志(1)mysql/mariad

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-