three 模型对象、材质

news2024/12/25 9:05:12

三维向量Vector3与模型位置

点模型Points、线模型Line、网格网格模型Mesh等模型对象的父类都是Object3D ，如果想对这些模型进行旋转、缩放、平移等操作，如何实现，可以查询Threejs文档Object3D 对相关属性和方法的介绍。

三维向量Vector3 

三维向量Vector3有xyz三个分量，threejs中会用三维向量Vector3表示很多种数据，位置.position和缩放.scale等属性。

查看three.js文档可以知道Vector3对象具有属性.x、.y、.z，Vector3对象还具有.set()等方法。

//new THREE.Vector3()实例化一个三维向量对象
const v3 = new THREE.Vector3(0,0,0);
console.log('v3', v3);
v3.set(10,0,0);//set方法设置向量的值
v3.x = 100;//访问x、y或z属性改变某个分量的值

位置属性.position 

模型位置.position属性用一个三维向量表示的

const mesh = new THREE.Mesh(geometry, material) 
mesh.position//

 改变位置属性

通过模型位置属性.position可以设置模型在场景Scene中的位置。模型位置.position的默认值是THREE.Vector3(0.0,0.0,0.0)，表示坐标原点。

设置网格模型x坐标

mesh.position.x = 80;

设置模型xyz坐标

mesh.position.set(80,2,10);

平移

执行.translateX()、.translateY()等方法本质上改变的都是模型的位置属性.position。

网格模型沿着x轴正方向平移100，可以多次执行该语句，每次执行都是相对上一次的位置进行平移变换。

// 等价于mesh.position = mesh.position + 100;
mesh.translateX(100);//沿着x轴正方向平移距离100

mesh.translateZ(-50); //沿着z轴反方向平移距离50

沿着自定义的方向移动。

//向量Vector3对象表示方向
const axis = new THREE.Vector3(1, 1, 1);
axis.normalize(); //向量归一化
//沿着axis轴表示方向平移100
mesh.translateOnAxis(axis, 100);

缩放

属性.scale表示模型对象的xyz三个方向上的缩放比例，.scale的属性值是一个三维向量对象Vector3,默认值是THREE.Vector3(1.0,1.0,1.0)。

mesh.scale.x = 2.0; //x轴方向放大2倍

mesh.scale.set(0.5, 1.5, 2)  // 网格模型xyz方向分别缩放0.5,1.5,2倍

欧拉Euler与角度属性.rotation

模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态，只是表示方法不同，.rotation属性值是欧拉对象Euler ,.quaternion属性值是是四元数对象Quaternion

欧拉对象Euler

通过属性设置欧拉对象的三个分量值。

// 创建一个欧拉对象，表示绕着xyz轴分别旋转45度，0度，90度
const Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);

const Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;

改变角度属性.rotation

角度属性.rotation的值是欧拉对象Euler，想改变属性.rotation,可以查询文档关于Euler类的介绍

//绕y轴的角度设置为60度
mesh.rotation.y += Math.PI/3;
//绕y轴的角度增加60度
mesh.rotation.y += Math.PI/3;
//绕y轴的角度减去60度
mesh.rotation.y -= Math.PI/3;

旋转方法.rotateX()、.rotateY()、.rotateZ()

模型执行.rotateX()、.rotateY()等旋转方法，你会发现改变了模型的角度属性.rotation。

mesh.rotateX(Math.PI/4);//绕x轴旋转π/4


// 绕着Y轴旋转90度
mesh.rotateY(Math.PI / 2);
//控制台查看：旋转方法，改变了rotation属性
console.log(mesh.rotation);

旋转动画

// 渲染循环

// 渲染循环
function render() {
    model.rotation.y+=0.01;
    requestAnimationFrame(render);
}


function render() {
    model.rotateY(0.01);
}

绕某个轴旋转

网格模型绕(0,1,0)向量表示的轴旋转π/8。

const axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8

模型材质颜色(Color对象)

文档搜索MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等网格材质，可以看到他们都有一个颜色属性.color。

材质颜色属性.color

查文档，找到.color属性，可以发现threejs材质对象颜色属性.color是threejs的颜色对象Color。console.log()打印：浏览器控制台查看材质颜色属性的属性值

console.log('material.color',material.color);

 颜色对象Color

查看颜色对象Color文档,可以看到颜色对象有三个属性，分别为.r、.g、.b，表示颜色RGB的三个分量。

// 创建一个颜色对象
const color = new THREE.Color();//默认是纯白色0xffffff。
console.log('查看颜色对象结构',color);//可以查看rgb的值

// 查看Color对象设置0x00ff00对应的的.r、.g、.b值
const color = new THREE.Color(0x00ff00);

通过.r、.g、.b属性改变颜色值

color.r = 0.0;
color.g = 0.0;
color.b = 0.0;

改变颜色的方法

查看Color文档，可以看到Color提供了.setHex()、.setRGB()、.setStyle()、.set()等修改颜色值的方法。

color.setRGB(0,1,0);//RGB方式设置颜色
color.setHex(0x00ff00);//十六进制方式设置颜色
color.setStyle('#00ff00');//前端CSS颜色值设置颜色

.setHex()、.setStyle()风格的颜色值都可以作为.set()的参数

color.set(0x00ff00);//十六进制方式设置颜色
color.set('#00ff00');//前端CSS颜色值设置颜色

重置模型材质的颜色

前端CSS风格颜色值：'#00ff00'、'rgb(0,255,0)'等形式

material.color.set('#00ff00');
material.color.set('rgb(0,255,0)');

模型材质父类Material

材质父类Material

查询threejs文档，可以看到基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial、高光网格材质MeshPhongMaterial等网格材质都有一个共同的父类Material。

网格材质继承父类属性 

从JavaScript语法角度看子类都会继承父类的属性和方法，threejs的材质同样道理。MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material继承一些属性和方法，比如透明度属性.opacity、面属性.side、是否透明属性.transparent等等。

材质半透明设置

开启透明true

material.transparent = true;//开启透明
material.opacity = 0.5;//设置透明度

材质面属性.side

你可以用矩形平面PlaneGeometry来测试材质的面属性.side。

查看文档，可以知道材质面属性.side默认值是THREE.FrontSide,表示网格模型正面可以看到，THREE.BackSide表示背面可以看到，THREE.DoubleSide表示双面可以看到。

material.side = THREE.BackSide;//背面可以看到
material.side = THREE.DoubleSide;//双面可见

 THREE.FrontSide、THREE.BackSide、THREE.DoubleSide其实在theeejs内部都表示一个数字,你可以通过浏览器控制log打印查看验证，具体可以查看src目录下constants.js的源码文件。

console.log('material.side',material.side);

模型材质和几何体属性

模型对象的几何体.geometry和材质属性.material。

浏览器控制台查看对象和属性

浏览器控制打印模型对象mesh，可以展开对象，查看对象的几何体.geometry和材质属性.material。

const mesh = new THREE.Mesh(geometry, material);
console.log('mesh',mesh);

// 浏览器控制台打印模型的几何体属性.geometry和材质属性.material。

console.log('mesh.geometry',mesh.geometry);
console.log('mesh.material',mesh.material);

访问改变模型材质属性

访问模型材质,并设置材质的颜色属性

mesh.material.color.set(0xffff00);

访问改变模型几何体属性

访问模型几何体,并平移几何体顶点数据

mesh.geometry.translate(0,100,0);

材质或几何体共享

两个mesh共享一个材质，改变一个mesh的颜色，另一个mesh2的颜色也会跟着改变

const mesh = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = 100;
// 两个mesh共享一个材质，改变一个mesh的颜色，另一个mesh2的颜色也会跟着改变
// mesh.material和mesh2.material都指向同一个material
// 三者等价：mesh.material、mesh2.material、material
mesh.material.color.set(0xffff00);
// 三者等价：mesh.geometry、mesh2.geometry、geometry
mesh.geometry.translate(0,100,0);

克隆.clone()和复制.copy()

克隆.clone()、复制.copy()是threejs很多对象都具有的方法，比如三维向量对象Vector3、网格模型Mesh、几何体、材质。

克隆.clone()

克隆.clone()简单说就是复制一个和原对象一样的新对象,其他的threejs对象都可以参照类似的写法。

const v1 = new THREE.Vector3(1, 2, 3);
console.log('v1',v1);
//v2是一个新的Vector3对象，和v1的.x、.y、.z属性值一样
const v2 = v1.clone();
console.log('v2',v2);

复制.copy()

复制.copy()简单说就是把一个对象属性的属性值赋值给另一个对象,下面以三维向量对象Vector3给大家举例，其他的threejs对象都可以参照类似的写法。

const v1 = new THREE.Vector3(1, 2, 3);
const v3 = new THREE.Vector3(4, 5, 6);
//读取v1.x、v1.y、v1.z的赋值给v3.x、v3.y、v3.z
v3.copy(v1);

Mesh克隆.clone()

过mesh克隆.clone()一个和mesh一样的新模型对象mesh2。

const mesh2 = mesh.clone();
mesh2.position.x = 100;

通过克隆.clone()获得的新模型和原来的模型共享材质和几何体

// 改变材质颜色，或者说改变mesh2颜色，mesh和mesh2颜色都会改变
// material.color.set(0xffff00);
mesh2.material.color.set(0xffff00);

几何体和材质克隆.clone() 

const mesh2 = mesh.clone();
// 克隆几何体和材质，重新设置mesh2的材质和几何体属性
mesh2.geometry = mesh.geometry.clone();
mesh2.material = mesh.material.clone();
// 改变mesh2颜色，不会改变mesh的颜色
mesh2.material.color.set(0xff0000);

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

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

相关文章

有道QAnything背后的故事---关于RAG的一点经验分享

有道QAnything背后的故事---关于RAG的一点经验分享

近日，我们开源了有道自研的RAG（Retrieval Augmented Generation) 引擎QAnything。该引擎允许用户上传PDF、图片、Word、Excel、PowerPoint等多种格式的文档，并实现类似于ChatGPT的互动问答功能，其中每个答案都能精确追溯到相应的文…
阅读更多...
降压芯片的工作原理是什么？都有哪些推荐？

降压芯片的工作原理是什么？都有哪些推荐？

降压恒压芯片工作原理： 通过将输入电压降低到合适的电压级别，以供应给LED灯。它采用PWM（脉冲宽度调制）技术来调节开关管的开关时间，从而实现稳定的输出电压，保持LED灯的亮度稳定。降压恒压芯片涉及降压转换…
阅读更多...
SpringBoot【问题 05】PostgreSQL数据库启用SSL后使用默认配置进行数据库连接（Navicat工具与Java程序）

SpringBoot【问题 05】PostgreSQL数据库启用SSL后使用默认配置进行数据库连接（Navicat工具与Java程序）

官网SSL说明：https://www.postgresql.org/docs/9.1/libpq-ssl.html 1.配置 1.1 文件 使用SSL需要的4个文件，名称要一致： 客户端密钥：postgresql.keyJava客户端密钥：postgresql.pk8客户端证书：postgresq…
阅读更多...
idea 创建打包 android App

idea 创建打包 android App

1、使用 idea 创建 android 工程 2、 配置构建 sdk 3、配置 gradle a、进入 gradle 官网，选择 install （默认是最新版本） b、选择包管理安装，手动安装选择下面一个即可 c、安装 sdk 并通过 sdk 安装 gradle 安装 sdk&#xff1a…
阅读更多...
软件测试面试：请说一下你工作中发现的最有价值的bug？

软件测试面试：请说一下你工作中发现的最有价值的bug？

这个问题，基本95%的面试都会遇到。究竟面试官想要知道什么呢？ 让我们回到这个面试场景来看看。 “说一下你印象最深的bug" 你的脑子里拼命的回想过去遇到的印象深刻或有价值的bug。 乍一眼看，这是一个简答到不起眼的问题。可是同学们…
阅读更多...
“智农”-数字乡村可视化

“智农”-数字乡村可视化

“智农”打造数字乡村可视化，结合乡村区域实际情况，以规划完善乡村机制体系和更好服务乡村振兴为目标，坚持可持续、可复制、可扩展的建设原则，着力解决农村信息孤岛，提高农村种植技术，加快农村信息化和产业…
阅读更多...
3，设备无关位图显示

3，设备无关位图显示

建立了一个类Dib Dib.h #pragma once #include “afx.h” class CDib :public CObject { public: CDib(); ~CDib(); char* GetFileName(); BOOL IsValid(); DWORD GetSize(); UINT GetWidth(); UINT GetHeight(); UINT GetNumberOfColors(); RGBQUAD* GetRGB(); BYTE* GetDat…
阅读更多...
three.js 向量叉乘cross

three.js 向量叉乘cross

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs"></div><div></div></div></el-main></el-container>…
阅读更多...
EasyRecovery2024免费无需付费版电脑数据恢复软件

EasyRecovery2024免费无需付费版电脑数据恢复软件

一、功能概述 EasyRecovery数据恢复软件是一个功能全面的数据恢复工具&#xff0c;其主要功能包括&#xff1a; 文件恢复&#xff1a;能够恢复各种文件类型&#xff0c;如文档、图片、视频、音频等&#xff0c;满足用户多样化的数据恢复需求。分区恢复&#xff1a;当硬盘分区…
阅读更多...
vue3中实现elementPlus表格选中行的上移下移

vue3中实现elementPlus表格选中行的上移下移

先看效果&#xff1a; 实现步骤&#xff1a; 1、给el-table添加current-change事件、高亮属性及ref属性 2、给上移下移按钮添加事件 // 定义当前选中的行参数 const currentRow ref<any>(null); // 定义表格的ref const singleTableRef ref(); // 行选中事件 const ha…
阅读更多...
将所有字母转化为该字母后的第三个字母，即A-＞D,B-＞E

将所有字母转化为该字母后的第三个字母，即A-＞D,B-＞E

//编写加密程序&#xff0c;规则&#xff1a;将所有字母转化为该字母后的第三个字母&#xff0c;即A->D,B->E,C->F,…Y->B,Z->C //小写字母同上&#xff0c;其他字符不做转化。输入&#xff1a;I love 007 输出&#xff1a;L oryh 007 代码&#xff1a; #inc…
阅读更多...
OpenAI划时代大模型——文本生成视频模型Sora作品欣赏（十二）

OpenAI划时代大模型——文本生成视频模型Sora作品欣赏（十二）

Sora介绍 Sora是一个能以文本描述生成视频的人工智能模型&#xff0c;由美国人工智能研究机构OpenAI开发。 Sora这一名称源于日文“空”&#xff08;そら sora&#xff09;&#xff0c;即天空之意&#xff0c;以示其无限的创造潜力。其背后的技术是在OpenAI的文本到图像生成模…
阅读更多...
day05_用户管理minIO角色分配(页面制作,查询用户,添加用户,修改用户,删除用户,用户头像,查询所有角色,保存角色数据)

day05_用户管理minIO角色分配(页面制作,查询用户,添加用户,修改用户,删除用户,用户头像,查询所有角色,保存角色数据)

文章目录 1 用户管理1.1 页面制作1.2 查询用户1.2.1 需求说明1.2.2 后端接口需求分析SysUserSysUserDtoSysUserControllerSysUserServiceSysUserMapperSysUserMapper.xml 1.2.3 前端对接实现思路sysUser.jssysRole.vue 1.3 添加用户1.3.1 需求说明1.3.2 页面制作1.3.3 后端接口…
阅读更多...
Kotlin：协程基础

Kotlin：协程基础

点击查看&#xff1a;协程基础 中文文档 点击查看&#xff1a;协程基础 英文文档 第一个协程程序 import kotlinx.coroutines.*fun main(){GlobalScope.launch {delay(1000L)//delay 是一个特殊的 挂起函数 &#xff0c;它不会造成线程阻塞&#xff0c;但是会 挂起 协程&…
阅读更多...
记一次dockerfile无法构建问题追溯

记一次dockerfile无法构建问题追溯

我有一个dockerfile如下&#xff1a; ENTRYPOINT ["/sbin/tini"&#xff0c;"-g", "--"] CMD /home/scrapy/start.sh 我原本的用意是先启动tini&#xff0c;再执行下面的cmd命令启动start.sh。 为啥要用tini&#xff1f; 因为我的这个docker…
阅读更多...
springboot235基于SpringBoot的房屋交易平台的设计与实现

springboot235基于SpringBoot的房屋交易平台的设计与实现

房屋交易平台设计与实现 摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互…
阅读更多...
DDOS攻击处理方法

DDOS攻击处理方法

DDoS&#xff08;分布式拒绝服务&#xff09;攻击是一种网络攻击&#xff0c;攻击者通过发送大量的请求&#xff0c;超过目标服务器的处理能力&#xff0c;导致服务器服务不可用。本文将介绍如何处理DDoS攻击&#xff0c;并提供几种防范措施。 1. 认识DDoS攻击 DDoS攻击通常通过…
阅读更多...
【Unity】使用Unity实现双屏显示

【Unity】使用Unity实现双屏显示

引言 在使用Unity的时候&#xff0c;有时候会需要使用双屏显示 简单来说就是需要在两个显示器中显示游戏画面 双屏显示注意点&#xff1a; ①双屏显示需要电脑有两个显示 ②双屏显示只能用于PC端 ③不仅仅可以双屏&#xff0c;Unity最大支持8屏显示 1.相机设置 ①我们打开Un…
阅读更多...
【 VPX638】基于KU115 FPGA+C6678 DSP的6U VPX双FMC接口通用信号处理平台

【 VPX638】基于KU115 FPGA+C6678 DSP的6U VPX双FMC接口通用信号处理平台

板卡概述 VPX638是一款基于KU115 FPGA C6678 DSP的6U VPX双FMC接口通用信号处理平台&#xff0c;该平台采用一片Xilinx的Kintex UltraScale系列FPGA&#xff08;XCKU115&#xff09;作为主处理器&#xff0c;完成复杂的数据采集、回放以及数据预处理。采用1片TI的多核浮点运算…
阅读更多...
三天学会阿里分布式事务框架Seata-nacos注册中心和配置中心支持

三天学会阿里分布式事务框架Seata-nacos注册中心和配置中心支持

锋哥原创的分布式事务框架Seata视频教程&#xff1a; 实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;_哔哩哔哩_bilibili实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;共计10条视频&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023