THREE.js学习笔记2——Transform objects

news/2025/1/11 16:11:33/文章来源:https://www.cnblogs.com/xxxiCJQ/p/18665292

这一小节主要学的是关于物体的位置移动,旋转,缩放一系列操作。

Vector3

mesh网格物理模型中的position属性是继承于Vector3的。Vector3是一个类,用于定位空间中的东西。
Vector3有很多有用的方法。例如Vector3中介绍的

//打印模型到场景中心的距离
console.log(cube.position.length());//打印两个不同Vector3之间的距离,这里是模型到相机的距离
//也可以是一个指定坐标的Vector3之间的距离
console.log(cube.position.distanceTo(camera.position));
console.log(cube.position.distanceTo(new THREE.Vector3(0, 1, 2)));//使用normalize将模型的位置重置为1,无论之前位置在哪
cube.position.normalize();//使用set更改模型位置
cube.position.set(0, 0, 0);

辅助观察坐标系

//AxesHelper:辅助观察的坐标系,参数为辅助线的长度,默认为1
//红轴为X轴,绿轴为Y轴,蓝轴为Z轴
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

等比例缩放模型

//使用scale修改模型的大小(?),等比例缩放
cube.scale.x = 1.2;
cube.scale.y = 0.7;
cube.scale.z = 0.5;
cube.scale.set(1.2, 0.7, 0.5);

旋转模型

使用rotation旋转模型,rotation有xyz三个参数(properties),但是它不是Vector3,它是一个Euler

When we change the x,y,and z properties we can imagine putting a stick through your object's center in the axis's direction and then rotating that object on that stick.

当我们更改x、y和z属性时,我们可以想象将一根棍子沿着轴的方向穿过物体的中心,然后旋转那根棍子上的物体。

//值以弧度表示,转半圈大约是3.14159,可以使用Math.PI
cube.rotation.y = 3.14159;
cube.rotation.y = Math.PI;//同时,为了确保旋转不出错,可以使用gimbal lock(万向节锁?),reorder,也就是调整了旋转的顺序
//下面这个是先x轴旋转,然后是y轴旋转
cube.rotation.x = 3.14159;
cube.rotation.y = Math.PI;
//如果这样写,那就是先旋转y轴,在旋转x轴
cube.rotation.reorder('YXZ')
cube.rotation.x = 3.14159;
cube.rotation.y = Math.PI;

Euler旋转是很容易理解的,但是由于不同的旋转顺序会得到不同的旋转结果,所以在THREE.js和3D软件中,都使用Quaternion来表示旋转,Quaternion是一种更加数学的表达方式。
在旋转物体(改变rotation)时,Quaternion就会更新。

还可以使用.lookAt方法实现旋转,这个方法会将物体的负z面面对你所填入的目标。

Object3D instances have a lookAt(...)method which rotates the object so that its -z faces the target you provided.The target must be a Vector3

//将摄像机朝向某个模型
camera.lookAt(0, 0, 0);
camera.lookAt(cube.position);

Group

为了方便操作,可以将很多个Object放入一个Group中,并对这个Group使用positionrotationscalelookAt这些操作

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );//do something about group
group.scale.set(5, 0.5, 1);
group.rotation.y = Math.PI * 0.25;
group.rotation.x = Math.PI * 0.25;scene.add( group );

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

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

相关文章

JAVA-Day 12:方法的定义和调用

方法的定义和调用 方法定义的格式: public static void 方法名(){方法体(就是打包起来的代码)} 方法调用的格式: 方法名(); 定义调用一个方法用于个人介绍 public static void main(String[] args){myself(); } public static void myself(){System.out.println("小王同学…

PC电脑屏幕实时翻译工具-Translumo

点击上方蓝字关注我 前言 Translumo是基于.Net开发的、开源屏幕翻译器软件,它可以实时检测并翻译屏幕上所选区域中出现的文本,可检测视频中的字幕或图片中出现文字等 安装环境 [名称]:Translumo [大小]:500MB [版本]:0.9.6 [语言]:简体中文 [安装环境]:Windows 界面使用…

Text1-综合练习5

Text-综合练习5 产生十个1-100之间的随机数存入数组 求和 求平均数 找出有几个数字比平均值小 Random number1=new Random();Scanner number2=new Scanner(System.in);System.out.println("请输入要产生随机数的个数:");int n=number2.nextInt();int arr[]=new int […

Text1-综合练习6

Text-综合练习6 键盘录入n个数字,倒放他们的顺序 例如:输入1 2 3 4 5,输出5 4 3 2 1 Scanner EX=new Scanner(System.in);String arr[]=new String[100];String temp;int count=0;System.out.println("请输入要交换的数字:,以空格结束");for (int i = 0; i < 1…

Text1-综合练习2

Text-综合练习2 键盘录入一个大于2的整数,求它的平方根 结果省去小数部分保留整数 Scanner st=new Scanner(System.in);System.out.println("请输入一个大于2的整数:");int number1=st.nextInt();for(int i=1;i<number1;i++){//从1开始查找一直到number1的值int n…

Text1-综合练习1

Text1-综合练习1 逢七过 游戏规则:从任意一个数字开始报数 当你要报的数字包含七或者是七的倍数时都要说过 需求:使用程序在控制台打印出1-100之间满足逢七过规则的数 for(int i=1;i<=100;i++){if(i/10%10==7||i%10==7||i%7==0){//判断十位、个位有没有七,这个数是否能被七…

ciscn_2019_n_8 1

checksec一下能发现开了很多保护,吓人一跳,但其实我们分析一下发现只要var[13]为17就可以了if ( *(_QWORD *)&var[13] )#判断var[13]开始的8字节(_QWORD表示64位,即8字节)内存区域是否非零。*(_QWORD *)&var[13]是将var[13]的地址转换为_QWORD(64位整数)指针,然…

Unity URP Shader Graph 实现复古电视机效果

想到一出实现一出的复古电视机效果实现。复古电视机效果显示展示:使用素材 一张纹理需要放映的图片,一张遮罩贴图,一个电视机模型。UV使用Spherize模拟电视机球状显示屏。 扫描线A效果扫描线B效果像素化/随机UV偏移屏幕做旧效果边缘变暗效果屏幕黑边效果 自制一张合适的贴图…

终于决定:把自己家的能源管理系统开源了!

决定了很久把自己公司的能管平台开源了,部分功能和bug正在修复中。 欢迎star 欢迎轻拍 地址:https://gitee.com/ustcyc/zhitan-ems 介绍 通过物联网技术,采集企业水、电、气、热等能耗数据,帮企业建立能源管理体系,找到跑冒滴漏,从而为企业节能提供依据。 进一步为企业实…

Text-Switch的练习1

Text-Switch的练习1 键盘录入一个从一到七的数字表示星期 星期一到星期五是工作日 星期六和星期日是休息日 Scanner xq=new Scanner(System.in);System.out.println("请输入一个一到七之间的数字");int week=xq.nextInt();switch(week){case 1 :case 2 :case 3 :case…

Omnissa Dynamic Environment Manager 2412 - 个性化动态 Windows 桌面环境管理

Omnissa Dynamic Environment Manager 2412 - 个性化动态 Windows 桌面环境管理Omnissa Dynamic Environment Manager 2412 - 个性化动态 Windows 桌面环境管理 Simplify management of user profiles, environment settings, and policies across desktops and apps. 请访问原…

stata 检查哪些变量有缺失值

ssc install nmissing nmissing 说明这十个变量有缺失