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.hqwc.cn/news/111922.html

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

相关文章

阿里云无影电脑:免费体验无影云电脑3个月

阿里云无影云电脑免费领取流程,免费无影云电脑配置为4核8G,可以免费使用3个月,阿里云百科分享阿里云无影云电脑(云桌面)免费申请入口、申请流程及免费使用限制条件说明: 目录 阿里云无影云电脑免费申请入…

2023/9/18 -- C++/QT

作业 完善登录框 点击登录按钮后,判断账号(admin)和密码(123456)是否一致,如果匹配失败,则弹出错误对话框,文本内容“账号密码不匹配,是否重新登录”,给定两…

计算机视觉与深度学习-经典网络解析-ResNet-[北邮鲁鹏]

这里写目录标题 ResNet参考产生背景贡献残差模块残差结构 批归一化ReLU激活函数的初始化方法 网络结构为什么残差网络性能好? ResNet ResNet(Residual Neural Network)是一种深度卷积神经网络模型,由Kaiming He等人在2015年提出。…

【初阶数据结构】树结构与二叉树的基础概念

君兮_的个人主页 勤时当勉励 岁月不待人 C/C 游戏开发 Hello,米娜桑们,这里是君兮_,今天带来数据结构里的重点内容也是在笔试,面试中的常见考点——树与二叉树,其中二叉树又分为很多种,我们先来讲讲基础的内容带大家…

jq弹窗拖动改变宽高

预览效果 <div classtishiMask><div class"tishiEm"><div id"coor"></div><div class"topNew ismove"><span class"ismove">提示</span><p onclick"closeTishi()"></p&…

vue3中css使用script中定义的变量

代码 <template><div class"box">haha</div> </template><script setup lang"ts"> const boxWidth 500px </script><style lang"scss"> .box {width: v-bind(boxWidth);height: 200px;background-c…

JVM的内存分配及垃圾回收

内存分配 在了解Java的内存管理前&#xff0c;需要知道JVM中的内存分配。 栈 存储局部变量。在方法的定义中或在方法中声明的变量为局部变量&#xff1b;栈内存中的数据在该方法结束&#xff08;返回或抛出异常或方法体运行到最后&#xff09;时自动释放栈中存放的数据结构为…

9、DVWA——XSS(Stored)

文章目录 一、存储型XSS概述二、low2.1 源码分析2.2 通关分析 三、medium3.1 源码分析3.2 通关思路 四、high4.1 源码分析4.2 通关思路 一、存储型XSS概述 XSS&#xff0c;全称Cross Site Scripting&#xff0c;即跨站脚本攻击&#xff0c;某种意义上也是一种注入攻击&#xff…

Webpack使用output配置打包代码信息和自动清理打包目录

一、修改代码打包后的文件名 二、自动清理打包目录 如果我们将打包文件名修改再进行打包&#xff0c;会发现之前不同名的打包文件会进行保留 在output对象中配置clean属性可自动清理打包目录 三、指定打包文件的目录 四、指定多个打包文件文件名

leetcode 817. 链表组件(java)

链表组件 题目描述HashSet 模拟 题目描述 给定链表头结点 head&#xff0c;该链表上的每个结点都有一个 唯一的整型值 。同时给定列表 nums&#xff0c;该列表是上述链表中整型值的一个子集。 返回列表 nums 中组件的个数&#xff0c;这里对组件的定义为&#xff1a;链表中一段…

测试行业面临的问题及RunnerGo在工具层面如何解决的

RunnerGo致力于打造成一款企业级全栈测试平台&#xff0c;旨在实现产品生命周期的闭环管理&#xff0c;帮助企业在整个产品生命周期中确保质量、降低风险&#xff0c;并提供卓越的用户体验。采用了较为宽松的Apache-2.0 license开源协议&#xff0c;方便志同道合的朋友一起为开…

Java Script

初识JavaScript JavaScript是什么&#xff1f; JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行 JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果…