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测试环境需…

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…

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

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

【Android WebView】WebView基础

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

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

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

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

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

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

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

【windows|008】DNS服务详解

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

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

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

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

CinemachineFreelook相机鬼畜抖动的解决方法

又是培训机构的出品。。。。。。 2020.3.27 发现跟随时抖动的原因了,其实应该按照传统相机的跟随逻辑放在late update里执行,但是由于开发cinemachine的开发组很坑地把cinemachine freelook里的三个轨道Damping值默认给了3,于是相机会以每0.7…

Aquila-Med LLM:开创性的全流程开源医疗语言模型

​论文链接:https://arxiv.org/pdf/2406.12182 开源链接:https://huggingface.co/BAAI/AquilaMed-RL http://open.flopsera.com/flopsera-open/details/AquilaMed_SFT http://open.flopsera.com/flopsera-open/details/AquilaMed_DPO 近年来&#xf…

Java比较运算符

关系运算符和比较运算符适用于条件判断类型。 相当于布尔值,只有True和False两个 符号 说明ab,判断a的值是否等于b的值,条件成立为true,不成立为false ! a!b,判断a和b的值是否不相等,条件成立为true,不成立为false > …

MS17-010(Eternal blue永恒之蓝)漏洞利用+修复方法

目录 一、漏洞简介 漏洞原理 影响版本 二、漏洞复现 三、复现过程 1、扫描局域网内的C段主机(主机发现) 扫描结果: 2.使用MSF的永恒之蓝漏洞模块 3.对主机进行扫描,查看其是否有永恒之蓝漏洞 4.准备攻击 四、漏洞利用 …

C#健康体检信息管理系统成品源码,医院体检中心管理系统

健康体检信息管理系统覆盖体检中心的所有业务,完成从预约、登记、收费、检查、检验、出报告、分析、报表等所有工作,规范了体检流程,提高了工作效率。 体检系统开发环境: 技术架构:C/S架构 开发语言:C# …

k8s volcano + deepspeed多机训练 + RDMA ROCE+ 用户权限安全方案【建议收藏】

前提:nvidia、cuda、nvidia-fabricmanager等相关的组件已经在宿主机正确安装,如果没有安装可以参考我之前发的文章GPU A800 A100系列NVIDIA环境和PyTorch2.0基础环境配置【建议收藏】_a800多卡运行环境配置-CSDN博客文章浏览阅读1.1k次,点赞8…

leetcode 动态规划(基础版)三角形最小路径和

题目&#xff1a; 题解&#xff1a; 一种可行的方案是从下到上&#xff0c;避免了从上到下的下标特判。走到每一个位置的最小值等于该位置的上两个位置中的最小值加上该位置的值。 int minimumTotal(vector<vector<int>>& triangle) {int dp[205][205]{0};f…

Desoutter智能拧紧中枢Connect过压维修

马头智能拧紧中枢过压维修是马头拧紧设备维护中的重要环节。当出现马头拧紧设备中枢过压现象时&#xff0c;会导致设备性能下降&#xff0c;甚至损坏设备&#xff0c;因此及时对过压中枢进行维修是保障设备正常运转的关键。 Desoutter电动螺丝刀控制器过压的原因可能有很多&am…