ThreeJS:坐标辅助器与轨道控制器

news/2024/9/25 16:04:26/

ThreeJS与右手坐标系

    使用ThreeJS创建3D场景时,需要使用一个坐标系来定位和控制对象的位置和方向。

        ThreeJS使用的坐标系是右手坐标系,即:X轴向右、Y轴向上、Z轴向前,如下图所示,

ThreeJS-右手坐标系

        Tips:右手坐标系下的右手规则是指,将右手伸出,并将大拇指方向指向X轴的正方向,食指指向Y轴的正方向,中指指向Z轴的正方向。

添加坐标辅助器

        ThreeJS提供了AxesHelper类,用于简单模拟3个坐标轴的对象,其中:红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

        为了方便指示当前场景的坐标轴朝向,可以向场景添加AxesHelper坐标辅助器。

使用坐标辅助器

//TODO:创建坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

坐标辅助器效果

添加轨道控制器

        轨道控制器是ThreeJS提供的一个非常实用的工具,它可以帮助用户更加轻松的探索3D场景——通过鼠标或者触摸屏交互的方式,实现3D场景的平移、旋转、缩放操作,从而改变相机的观察视角。

使用轨道控制器

        ThreeJS提供了Orbit controls(轨道控制器)可以使得相机围绕目标进行轨道运动。

//TODO:轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();

        在循环渲染函数中,调用update()方法,更新渲染器,

//TODO:渲染函数
function animate() {requestAnimationFrame(animate);//TODO:更新轨道控制器orbitControls.update();//TODO:渲染renderer.render(scene, camera);
}

        注意点:更改相机视角之后,必须手动调用update方法更新控制器。

轨道控制器效果

        通过鼠标修改相机视角,

设置轨道控制器的属性

        OrbitControls轨道控制器包含很多属性,通过设置属性,可以限定可平移、旋转、缩放的范围,以及阻尼效果、阻尼系数、自动旋转、自动旋转系数等。

 


http://www.ppmy.cn/news/1450762.html

相关文章

【linux运维】vim基础应用

系列综述: 💞目的:本系列是个人整理为了学习基本的shell编程和linux命令,整理期间苛求每个知识点,平衡理解简易度与深入程度。 🥰来源:材料主要源于b站大学——linux运维课程进行的,…

软件杯 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

SQL 基础 | AS 的用法介绍

SQL(Structured Query Language)是一种用于管理和操作数据库的标准编程语言。 在SQL中,AS关键字有几种不同的用法,主要用于重命名表、列或者查询结果。 以下是AS的一些常见用法: 重命名列:在SELECT语句中&a…

程序设计:C语言 UNIX/LINUX 环境变量替换

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github:codetoys,所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的,可以在任何平台上使用。 很多时候程序希望对配置参数做…

JavaEE 初阶篇-深入了解 Junit 单元测试框架和 Java 中的反射机制(使用反射做一个简易版框架)

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 Junit 单元测试框架概述 1.1 使用 Junit 框架进行测试业务代码 1.2 Junit 单元测试框架的常用注解(Junit 4.xxx 版本) 2.0 反射概述 2.1 获…

Docker 中安装单体架构 Redis 的 Shell 脚本

该脚本用于实现 root 用户在 Linux 操作系统下的 Docker 中安装单体架构 Redis Shell 脚本 Git 仓库地址 Gitee:https://gitee.com/tongchaowei/common-shell/tree/main/root 执行脚本 bash ./docker-redis-install-single.sh需要注意的 该脚本会先检查是否安…

Python语言零基础入门——文件

目录 一、文件的基本概念 1.文件 2.绝对路径与相对路径 3.打开文件的模式 二、文件的读取 三、文件的追加 四、文件的写入 五、with语句 六、csv文件 1.csv文件的读取 2.csv文件的写入 七、练习题:实现日记本 一、文件的基本概念 1.文件 文件是以计算…

15、ESP32 Wifi

ESP32 的 WIFI 功能是模块内置的&#xff0c;通过 ESP32 的基础库调用一些函数就可以轻松使用它。 Wifi STA 模式&#xff1a; 让 ESP32 连接附近 WIFI&#xff0c;可以上网访问数据。 // 代码显示搜索连接附近指定的 WIFI // 通过 pin 按键可断开连接#include <WiFi.h>…