three.js——辅助器AxesHelper和轨道控制器OrbitControls的使用

辅助器AxesHelper和轨道控制器OrbitControls的使用

  • 前言
  • 效果图
  • 1、辅助器AxesHelper:是物体出现辅助的x/y/z轴
  • 2、轨道控制器OrbitControls
    • 2.1导入OrbitControls文件
    • 2.2 使用
    • 2.3 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景

前言

1、AxesHelper
官网辅助器使用的方法
参数表示坐标系坐标轴线段尺寸大小,你可以根据需要改变尺寸。
2、OrbitControls本质
官网OrbitControls的使用方法
OrbitControls本质上就是使得相机围绕目标进行轨道运动
比如相机的位置属性,改变相机位置也可以改变相机拍照场景中模型的角度,实现模型的360度旋转预览效果,改变透视投影相机距离模型的距离,就可以改变相机能看到的视野范围。

效果图

1、辅助器的使用效果
在这里插入图片描述
2、OrbitControls使用效果:keyi在这里插入图片描述

1、辅助器AxesHelper:是物体出现辅助的x/y/z轴

// 添加辅助器AxesHelper
const axesHelper = new THREE.AxesHelper(5);
scene.add( axesHelper );

2、轨道控制器OrbitControls

2.1导入OrbitControls文件

// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

2.2 使用

// 添加轨道控制器 camera:相机  renderer:渲染器)
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true
// 设置阻尼的大小
controls.dampingFactor = 0.05
// 设置自动旋转
controls.autoRotate = true// 渲染
function animate () {requestAnimationFrame(animate)// 更新控制器controls.update();renderer.render(scene, camera)
}

2.3 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/138367.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站整站优化-网站整站优化工具

您是否曾为您的网站在搜索引擎中的排名而感到焦虑?是否苦苦思考如何提高流量、吸引更多用户? 什么是整站优化。简而言之,它是一项用于提升网站在搜索引擎中排名的策略和技巧。通过对网站的内容、结构、速度等方面进行优化,可以使…

WPF 类库 使用handycontrol 配置

在学习wpf发现了一个非常好用的UI库 handycontrol 但是很多地方讲的都是WPF应用程序怎么用,很少有讲类库那么引用的问题,所以在这里自己总结一下,希望能帮助到大家: 1.添加 handycontrol 的引用;安装,我已…

[python 刷题] 167 Two Sum II - Input Array Is Sorted 15 3Sum

[python 刷题] 167 Two Sum II - Input Array Is Sorted & 15 3Sum 虽然 3 sum 出来的比较早,不过按照解法来说,2 sum II 算是 3 sum 的前置解法 167 Two Sum II - Input Array Is Sorted 题目: Given a 1-indexed array of integers …

Python中TensorFlow的长短期记忆神经网络(LSTM)、指数移动平均法预测股票市场和可视化...

原文链接:http://tecdat.cn/?p23689 本文探索Python中的长短期记忆(LSTM)网络,以及如何使用它们来进行股市预测(点击文末“阅读原文”获取完整代码数据)。 相关视频 在本文中,你将看到如何使用…

使用 FHE 实现加密大语言模型

近来,大语言模型 (LLM) 已被证明是提高编程、内容生成、文本分析、网络搜索及远程学习等诸多领域生产力的可靠工具。 大语言模型对用户隐私的影响 尽管 LLM 很有吸引力,但如何保护好 输入给这些模型的用户查询中的隐私 这一问题仍然存在。一方面&#xf…

【计算机网络】图解路由器(一)

图解路由器(一) 1、什么是路由器?2、什么是路由选择?3、什么是转发?4、路由器设备有哪些类型?5、根据性能分类,路由器有哪些类型?5.1 高端路由器5.2 中端路由器5.3 低端路由器 6、什…

Linux 安装 git

一 . 安装git 方式1:通过yum 安装 yum -y install git查看是否安装成功 git --version安装目录在:/usr/libexec/git-core yum 安装有一些缺点 :不能自己指定安装目录、安装版本 方式 2 下载tar.gz 包 配置 查看git 版本:Index…

电子器件系列57:肖特基二极管(BAS7005)

什么是肖特基二极管?肖特基二极管工作原理详解,几分钟带你搞定 - 知乎 这几个参数都是二极管很常见的参数:基本上就是正向导通时的极限电流电压,反向截止时的极限电流电压。功耗、温度、结电容,差不多就这些&#xff0…

WebGL HUD(平视显示器)

目录 HUD(平视显示器) 如何实现HUD 示例程序(HUD.html) 示例程序(HUD.js) 代码详解 在网页文字上方显示三维物体 代码详解 HUD(平视显示器) 平视显示器(head…

Postman 的使用教程(详细)

Postman 使用教程 1. 是什么 Postman 是一个接口测试工具软件,可以帮助开发人员管理测试接口。 官网:https://www.getpostman.com/ 2. 安装 建议通过官网下载安装,不要去那些乱七八糟的下载平台,或者留言获取 官网下载地址&am…

package中添加一条命令,用来自动选择包管理器进行依赖安装

package中添加一条命令,用来自动选择包管理器进行依赖安装 前提: 当前项目为vite项目,所以直接使用import导入模块 package.json中的scripts添加 "scripts": {"start": "node scripts/init.js"...},文件目录为 init.js的文件为 import { e…

antd-design-vue Table组件全局配置(分页器...)

描述:该框架许多默认配置好像还不支持,一般都是挨个使用挨个配置。我的项目中也遇到了类似的情况,但是当需求发生变化时,代码所有的组件使用则都需要修改,这种方式真的很不礼貌。 《我为了一口醋包了顿饺子》 需求是将…

Canal 实现MySQL与Elasticsearch7数据同步

1 工作原理 canal 模拟 MySQL slave 的交互协议,伪装自己为 MySQL slave ,向 MySQL master 发送 dump协议 MySQL master 收到 dump 请求,开始推送 binary log 给 slave (即 canal ) canal 解析 binary log 对象(原始为 byte 流) 优点&…

tensorflow基础

windows安装tensorflow anaconda或者pip安装tensorflow,tensorflow只支持win7 64系统,本人使用tensorflow1.5版本(pip install tensorflow1.5) tensorboard tensorboard只支持chrome浏览器,而且加载过程中可能有一段…

计算机竞赛 深度学习+opencv+python实现车道线检测 - 自动驾驶

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数:3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV56 数据集处理7 模型训练8 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 &am…

jmeter学习文档

JMeter学习(一)工具简单介绍 一、JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序)。它可以用来测试静态和动态资源的性能,例如:静态文件,J…

BaseMapper 中的方法

BaseMapper 中的方法&#xff1a; 插入 int insert(T entity) - 插入一条记录。 删除 int deleteById(Serializable id) - 根据主键ID删除记录。 int deleteById(T entity) - 根据实体对象&#xff08;ID&#xff09;删除记录。 int deleteByMap(Map<String, Object> …

Easyui里的datagrid嵌入select下拉框

问题&#xff1a; 想使用datagird里嵌入select下拉框&#xff0c;并在提交form表单时获取datagrid选中的每行数据里的每个下拉框选中的值。 解决方案&#xff1a; 其中economicIssuesSelect使用下拉框&#xff0c;重点关注 initEconomicIssues(row)方法。这里的方法需要传递ro…

C语言基础知识点(八)联合体和大小端模式

以下程序的输出是&#xff08;&#xff09; union myun {struct { int x, y, z;} u;int k; } a; int main() {a.u.x 4;a.u.y 5;a.u.z 6;a.k 0;printf("%d\n", a.u.x); } 小端模式 数据的低位放在低地址空间&#xff0c;数据的高位放在高地址空间 简记&#xff…

微软(TTS)文本转语音服务API实现

此博客实现与java实现微软文本转语音&#xff08;TTS&#xff09;经验总结_java tts_${简简单单}的博客-CSDN博客之上&#xff0c;首先感谢博客源码的提供&#xff0c;本人在上面添加了一些详细的注释&#xff0c;方便大家跟好的理解和使用&#xff0c;毕竟我已经用原文调试了一…