【three.js】坐标辅助器和轨道控制器

news2024/11/18 14:53:52

结合上一篇基本的3d页面代码,我们在里面添加坐标辅助器,也就是x y z轴坐标系,这样可以更直观的查看物体的位置

一、添加坐标辅助器 

查看效果,z轴不显示是因为,z轴是正对我们脸部,从我们正面看就是一个点

为了让z轴显示出来,我们修改相机的位置

 

可以看到蓝色这条线就是z轴 

 二、添加轨道控制器

现在我们设置的立方体是自动旋转的,如果我们不想让他自己旋转,想手动拖拽,如何实现呢?

这时就用到了轨道控制器。

1、导入轨道控制器

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

2、创建控制器

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

3、看效果,此时可以通过鼠标进行拖拽、放大缩小等

4、设置带阻尼的惯性和惯性系数

其实就是可以让拖拽或者放大缩小的行为不那么生硬,可以使其慢慢停止下来

 

看效果 ,用鼠标拖动并松开鼠标时,会慢慢停止,而不是立马停止

// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数,系数越大,停的越快
controls.dampingFactor = 0.01;

5、设置自动旋转

效果,可以自动旋转,也可拖拽

当然更多属性,可以见文档自行查看 three.js中文文档 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

蓝桥杯报名已经开始,还不知道怎么准备?教你一文通关蓝桥!

目录 引言 1、什么是蓝桥杯? 2、我应不应该参加蓝桥杯? 3、现在0基础参加还来得及吗?我不敢参加怎么办? 4、蓝桥杯的流程? 5、如何学习? 如果你是零基础 如果你有基础 6、刷题?周赛&am…

数据重整:用Java实现精准Excel数据排序的实用策略

摘要:本文由葡萄城技术团队原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 在数据处理或者数据分析的场景中,需要对已有的数据进行排序,在E…

C++day02(引用、const、函数重载、结构体、类)

今日任务 代码&#xff1a; #include <iostream> /** 自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c;定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出…

Maven 环境配置

Maven 是一个基于 Java 的工具&#xff0c;所以要做的第一件事情就是安装 JDK。 系统要求 项目 要求 JDK Maven 3.3 要求 JDK 1.7 或以上 Maven 3.2 要求 JDK 1.6 或以上 Maven 3.0/3.1 要求 JDK 1.5 或以上 内存 没有最低要求 磁盘 Maven 自身安装需要大约 10 MB 空间…

SwipeRefreshLayout 下拉刷新

1.SwipeRefreshLayout是Androidx提供的下拉刷新的库&#xff0c;需要在代码中引入该库&#xff0c;才能使用。 implementation androidx.swiperefreshlayout:swiperefreshlayout:1.1.0 2.在layout中配置。SwipeRefreshLayout&#xff0c;必须包含一个根节点的子view <com.e…

5+乳酸化修饰+预后模型

今天给同学们分享一篇乳酸化修饰预后模型的生信文章“Lactylation-Related Gene Signature Effectively Predicts Prognosis and Treatment Responsiveness in Hepatocellular Carcinoma”&#xff0c;这篇文章于2023年4月25日发表在Pharmaceuticals (Basel)期刊上&#xff0c;…

spring 事物源码阅读之事务与持久化操作的结合

前面文章说到在开启事务后&#xff0c;会将数据库连接存放在当前线程的ConnectionHolder。那么后续的数据库持久化操作是怎么感知的呢。这里就要说到一个重要的类TransactionSynchronizationManager。 TransactionSynchronizationManager TransactionSynchronizationManager是…

IDEA2021创建Web项目配置Tomcat

1.新建一个普通的项目。 2.右键新建的项目&#xff0c;选择添加框架支持 3.勾选web application 4.在WEB-INF里创建lib和classes文件夹 5.file-project structure-modules-paths&#xff0c;选择use module compile output path&#xff0c;将output path和test output path的路…

Springboot知识点必知必会(一)

mvc设计模式 MVC设计模式是Model-View-Controller的缩写&#xff0c;它是一种用于设计用户界面的软件设计模式。Spring MVC是Spring框架的一个模块&#xff0c;它提供了一种基于Java的方式来实现MVC设计模式。 以下是Spring MVC中MVC设计模式的组成部分和工作原理&#xff1a; …

在Linux中通过docker安装appnode面板

先在Linux中安装docker&#xff0c;然后在docker中安装appnode面板&#xff0c;并进行docker网络端口映射。 安装docker 第一步&#xff0c;卸载旧版本docker。 若系统中已安装旧版本docker&#xff0c;则需要卸载旧版本docker以及与旧版本docker相关的依赖项。 命令&#…

计算机竞赛 : 题目:基于深度学习的水果识别 设计 开题 技术

1 前言 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天做一个 基于深度学习的水果识别demo 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/pos…

访问Apache Tomcat的虚拟主机管理页面

介绍 通过Tomcat Host Manager应用可以创建、删除、管理Tomcat内的虚拟主机&#xff08;virtual hosts&#xff09;。该应用是Tomcat安装的一部分&#xff0c;默认在<Tomcat安装目录>/webapps/host-manager&#xff1a; 配置用户名、密码、角色 要访问Host Manager应…

MySQL-1(12000字详解)

一&#xff1a;数据库的引入 数据库在我们以后工作中是一个非常常用的知识&#xff0c;数据库用来存储数据&#xff0c;但是有些同学可能就会疑惑了&#xff0c;存储数据用文件就可以了&#xff0c;为什么还要弄个数据库呢&#xff1f; 文件保存数据有以下几个缺点&#xff1…

Mainflux IoT:Go语言轻量级开源物联网平台,支持HTTP、MQTT、WebSocket、CoAP协议

Mainflux是一个由法国的创业公司开发并维护的安全、可扩展的开源物联网平台&#xff0c;使用 Go语言开发、采用微服务的框架。Mainflux支持多种接入设备&#xff0c;包括设备、用户、APP&#xff1b;支持多种协议&#xff0c;包括HTTP、MQTT、WebSocket、CoAP&#xff0c;并支持…

vue实现echarts中 9种 折线图图例

let datas [{ DivideScore: 7, UserScore: 7.2, Name: 目标制定 },{ DivideScore: 7, UserScore: 7, Name: 具体性 },{ DivideScore: 7, UserScore: 7.5, Name: 可衡量性 },{ DivideScore: 7, UserScore: 7, Name: 可实现性 },{ DivideScore: 7, UserScore: 7, Name: 时间限定…

【软件测试】一份合格的软件测试简历长什么样?

你可以写一篇出众的软件测试简历并且这篇测试用例能够为你带来面试电话么&#xff1f;如果没有&#xff0c;请继续阅读。我敢肯定&#xff0c;读完这篇文章&#xff0c;你将能够写出一个完美的杀手级别的软件测试和质量保证的简历&#xff0c;这将为你带来面试电话。 你的简历是…

图片调色盘

图片预览 配置安装 Color-Thief 安装包使用文档 yarn add colorthief -S // npm install colorthief --save代码 <template><div class"img-thief"><div class"container"><div class"thief-item" v-for"(item, in…

邮件误操作删除,如何找回?这里有救援方法!

用户遇到的问题 ​“邮件不慎删除&#xff0c;要如何找回呢&#xff1f;今天我在查阅邮件的过程中&#xff0c;我注意到一封带附件的邮件&#xff0c;原本是打算将其另存到其他位置&#xff0c;却无意间点击了删除&#xff0c;这之后就再也无法找回了。现在我应该怎么办&am…

java生成带logo的二维码和下方带内容的条形码

一、导入zxing包 <!-- zxing --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.2</version></dependency><dependency><groupId>com.google.zxing</group…

【数据结构】归并排序和计数排序(排序的总结)

目录 一&#xff0c;归并排序的递归 二&#xff0c;归并排序的非递归 三&#xff0c;计数排序 四&#xff0c;排序算法的综合分析 一&#xff0c;归并排序的递归 基本思想&#xff1a; 归并采用的是分治思想&#xff0c;是分治法的一个经典的运用。该算法先将原数据进行拆…