three.js 第十一节 - uv坐标


// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'//#region
const scence = new THREE.Scene()const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion//#region
// 添加世界坐标辅助器,红色-X轴; 绿色-Y轴; 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05// 每一帧根据控制器更新画面
function animate() {// 如果,需要控制器带有阻尼效果,或者自动旋转等效果,就需要加入`controls.update()`controls.update()// `requestAnimationFrame`:在屏幕渲染下一帧画面时,触发回调函数来执行画面的渲染requestAnimationFrame(animate)// 渲染renderer.render(scence, camera)// 更新tweenTWEEN.update()
}
animate()
//#endregion// -----------------------------------------------------------------
// -----------------------------------------------------------------let uvTexture = new THREE.TextureLoader().load('../public/assets/texture/uv_grid_opengl.jpg')// 创建平面
const planeGeometry = new THREE.PlaneGeometry(2, 2)
const planeMaterial = new THREE.MeshBasicMaterial({map: uvTexture
})
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
scence.add(planeMesh)
planeMesh.position.x = -4// 创建几何体
const geometry = new THREE.BufferGeometry()
// 设置几何体的顶点数据(顶点是有序的,每3个数据确定一个顶点,逆时针为正面)
const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0])
// 设置几何体的顶点属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
const idnex = new Uint16Array([0, 1, 2, 2, 3, 0]) // 创建索引
geometry.setIndex(new THREE.BufferAttribute(idnex, 1))// 设置uv坐标
/*UV坐标表示纹理(texture)上的点的位置。UV坐标以两个浮点数值(u,v)的形式表示,通常在0到1的范围内,表示在纹理上的位置,UV坐标是通过模型的geometry的“uv”属性来设置,以便正确地将纹理映射到模型表面上
*/
// const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0])
// 设置几何体的uv属性
geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))const material = new THREE.MeshBasicMaterial({// color: 0x00ff00map: uvTexture
})const plane = new THREE.Mesh(geometry, material)
scence.add(plane)
plane.position.x = 4
// -----------------------------------------------------------------
// -----------------------------------------------------------------

未设置 uv坐标 的效果

// const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
// 设置几何体的uv属性
// geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))

在这里插入图片描述

设置了 uv坐标 的效果

const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
// 设置几何体的uv属性
geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))

在这里插入图片描述

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

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

相关文章

1931java Web披萨店订餐系统idea开发mysql数据库web结构java编程计算机网页源码servlet项目

一、源码特点 java Web 披萨店订餐系统是一套完善的信息管理系统,结合java 开发技术和bootstrap完成本系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用 B/S模式开发。 视频地址:…

Android CTS环境搭建

CTS即Compatibility Test Suite意为兼容性测试,是Google推出的Android平台兼容性测试机制。其目的是尽早发现不兼容性,并确保软件在整个开发过程中保持兼容性。只有通过CTS认证的设备才能合法的安装并使用Google market等Google应用。 搭建CTS测试环境需…

深入理解Servlet Filter及其限流实践

引言 在Java Servlet技术中,Filter是一个拦截器,它允许开发者在请求到达目标资源之前或响应发送给客户端之后,对请求或响应进行拦截和处理。这种机制为实现诸如身份验证、日志记录、请求修改等功能提供了极大的灵活性。 Filter基础 Filter…

ARM32常见指令

### 📌 1. 保存和设置堆栈框架 .text:00002E88 PUSH {R11,LR} **PUSH {R11,LR}**:将R11(帧指针)和LR(链接寄存器)推入堆栈,以保存当前的帧指针和返回地址。 .text…

时间安排表:

首先,我们需要确定从当前时间(2024年6月22日14:05:26)到晚上11点的总时间。然后,我们将从这个总时间中减去你计划的运动时间,以计算出剩余的学习或计算时间。 1. **计算总时间**: - 当前时间:2…

CST初级教程 七

本教程将实例讲解CST设计优化仿真及其操作步骤。下面是一个微带功率分配器的图片: 一 3D建模 Substrate 建模 Step1 绘制Substrate外形 Substrate 的尺寸参数如下: Step2 添加新材料Substrate Step3 将新建的材料分配给Substrate 选中新建材料Substra…

数学建模系列(3/4):典型建模方法

目录 引言 1. 回归分析 1.1 线性回归 基本概念 Matlab实现 1.2 多元回归 基本概念 Matlab实现 1.3 非线性回归 基本概念 Matlab实现 2. 时间序列分析 2.1 时间序列的基本概念 2.2 移动平均 基本概念 Matlab实现 2.3 指数平滑 基本概念 Matlab实现 2.4 ARIM…

C# 一个串口通信的案例实现

通信规格书&#xff1a; 指定页读取规范&#xff1a; HOST&#xff1a;<LF>RPP1<CR> Reader:<LF>R<FAIL> <CR><LF> // 读取失败 Reader&#xff1a;<LF>R12345678<CR><LF>// 读取成功 Example&#xff1a; HOST&…

WordPress插件:子比zibll主题插件 炙焰美化全开源插件V3.2

在网络世界中&#xff0c;开源内容管理系统&#xff08;CMS&#xff09;已经成为了网站构建的关键工具之一。WordPress&#xff0c;作为最受欢迎的开源CMS之一&#xff0c;其广泛的应用及其灵活性使得它成为了创建和管理各种类型网站的理想选择。而Zibll主题插件&#xff0c;作…

IOS Swift 从入门到精通:闭包 第一部分

文章目录 创建基本闭包在闭包中接受参数从闭包返回值闭包作为参数尾随闭包语法 创建基本闭包 Swift 允许我们像使用字符串和整数等其他类型一样使用函数。这意味着您可以创建一个函数并将其分配给一个变量&#xff0c;使用该变量调用该函数&#xff0c;甚至可以将该函数作为参…

【Android WebView】WebView基础

一、简介 WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核&#xff0c;4.4后直接使用了Chrome。 二、重要类 以WebView类为基础&#xff0c;WebSettings、WebViewClient、WebChromeClient为辅助共同完成安卓段加…

2024年【T电梯修理】免费试题及T电梯修理考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 T电梯修理免费试题参考答案及T电梯修理考试试题解析是安全生产模拟考试一点通题库老师及T电梯修理操作证已考过的学员汇总&#xff0c;相对有效帮助T电梯修理考试总结学员顺利通过考试。 1、【多选题】TSGT7005-2012《…

【Java】已解决java.nio.channels.ClosedChannelException异常

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.nio.channels.ClosedChannelException异常 在Java的NIO&#xff08;New I/O&#xff09;编程中&#xff0c;java.nio.channels.ClosedChannelException是一个常见的异常…

XTDrone-多无人机精准降落-配置教程

1 编译AprilTag_ROS AprilTag是一个视觉基准系统&#xff0c;可用于机器人&#xff0c;增强现实和相机校准等。 根据AprilTag可以可靠地计算标签相对于相机的3D位置&#xff0c;方向和ID号。这里我们使用AprilTag的ROS库来实现位姿估计与ID号计算。 编译命令如下&#xff1a; …

python测试工程师 之 python基础大全【13万字总结】

python基础大全【13万字】 Day011、Python概述2、Python解释器和pycharmIDE工具3、Python中的注释4、变量5、标识符的命名规范 ★6、变量的使用7、Python中的数据类型 ★8、Python中的bug和调试9、字符串的格式化及输出 ★10、转译字符 day021、转译字符2、f-string ★3、数据类…

【windows|008】DNS服务详解

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 ​ &#x1f3c5;阿里云ACE认证高级工程师 ​ &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社…

【LinuxC语言】线程重入

文章目录 前言线程重入是什么线程重入实现示例代码总结前言 在并发编程中,我们经常需要处理多个线程同时访问和修改共享资源的问题。这可能会导致数据竞争和状态不一致,从而使程序的行为变得不可预测。为了解决这个问题,我们引入了一种称为“线程重入”的机制。线程重入,或…

家用洗地机哪个品牌好用?四款性价比高的洗地机推荐

还在为下班赶回家打扫卫生而烦恼&#xff1f;曾经的我也是这样&#xff0c;日复一日手动清洁&#xff0c;疲惫不堪。直到有一天&#xff0c;我决定相信现代科技&#xff0c;深入研究了市面上的各种洗地机评测&#xff0c;从此踏入了智能清洁家电的新世界。洗地机作为现代家居的…

Google Earth Engine(GEE)——checkbox的使用

结果 函数: ui.Checkbox(label, value, onChange, disabled, style) A checkbox with a label. Arguments: label (String, optional): The checkboxs label. Defaults to an empty string. value (Boolean, optional): Whether the checkbox is checked. A nu

LangChain 介绍

In recent times, you would probably have heard of many AI applications, one of them being chatpdf.com. 在最近&#xff0c;你可能听说过很多的AI应用&#xff0c;chatpdf.com就是其中的一个。 On this website, you can upload your own PDF. After uploading, you ca…