Three.js之顶点UV坐标、纹理贴图

参考资料

  • 创建纹理贴图
  • …
  • UV动画

知识点

注：基于Three.jsv0.155.0

  • 纹理贴图加载器：TextureLoader
  • 纹理对象：Texture
  • 颜色贴图属性.map
  • 顶点UV坐标
  • 圆形平面设置纹理贴图：CircleGeometry
  • 设置阵列模式：THREE.RepeatWrapping
  • 网格地面辅助观察：GridHelper
  • 纹理对象.offset属性

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// ********** 本章知识点示例代码 Start **********// 1. 创建纹理贴图// 几何体const geometry = new THREE.SphereGeometry(100);// const geometry = new THREE.BoxGeometry(100, 100 ,100);// 文理贴图const textureLoader = new THREE.TextureLoader();const texture = textureLoader.load('./img/6.JPG');// 材质 const material = new THREE.MeshLambertMaterial({// color:0x0000ff,map: texture,});material.map = texture;const mesh1 = new THREE.Mesh(geometry, material);scene.add(mesh1);// 2. 自定义顶点UV坐标scene.remove(mesh1);const geometry2 = new THREE.PlaneGeometry(200, 100);console.log('🚀 ~ file: 5顶点UV坐标、纹理贴图.html:29 ~ geometry.attributes.uv:', geometry.attributes.uv);console.log('🚀 ~ file: 5顶点UV坐标、纹理贴图.html:29 ~ geometry.attributes.position:', geometry.attributes.position);const textureLoader2 = new THREE.TextureLoader();const texture2 = textureLoader2.load('./img/6.JPG');geometry2.attributes.uv = new THREE.Float32BufferAttribute([0, 1,1, 1,0, 0,1, 0,], 2);// 材质 const material2 = new THREE.MeshLambertMaterial({// color:0x0000ff,map: texture2,});const mesh2 = new THREE.Mesh(geometry2, material2);scene.add(mesh2);// 3. 圆形平面设置纹理贴图scene.remove(mesh2);const geometry3 = new THREE.CircleGeometry(100);const textureLoader3 = new THREE.TextureLoader();const texture3 = textureLoader3.load('./img/6.JPG');// 材质 const material3 = new THREE.MeshLambertMaterial({// color:0x0000ff,map: texture3,});const mesh3 = new THREE.Mesh(geometry3, material3);scene.add(mesh3);// 4. 纹理对象Texture阵列scene.remove(mesh3);const geometry4 = new THREE.PlaneGeometry(400, 400);const textureLoader4 = new THREE.TextureLoader();const texture4 = textureLoader4.load('./img/6.JPG');texture4.wrapS = THREE.RepeatWrapping;texture4.wrapT = THREE.RepeatWrapping;texture4.repeat.set(10, 10);// 材质 const material4 = new THREE.MeshLambertMaterial({// color:0x0000ff,map: texture4,side: THREE.DoubleSide,});const mesh4 = new THREE.Mesh(geometry4, material4);mesh4.rotateX(-Math.PI / 2);scene.add(mesh4);// 5. 矩形Mesh+背景透明png贴图scene.remove(mesh4);const geometry5 = new THREE.PlaneGeometry(600, 200);const textureLoader5 = new THREE.TextureLoader();const texture5 = textureLoader5.load('./img/6.JPG');texture5.wrapS = THREE.RepeatWrapping;// 材质 const material5 = new THREE.MeshLambertMaterial({// color:0x0000ff,map: texture5,side: THREE.DoubleSide,transparent: true,});const mesh5 = new THREE.Mesh(geometry5, material5);mesh5.rotateX(-Math.PI / 2);scene.add(mesh5);// 网格地面辅助观察const grid = new THREE.GridHelper(500, 10);grid.position.set(0, -0.01, 0);scene.add(grid);mesh5.position.y = 1// ********** 本章知识点示例代码 End **********// 光源const pointLight = new THREE.PointLight(0xffffff, 1.0, 0, 0);pointLight.position.set(200, 200, 200 );scene.add(pointLight);// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {renderer.render(scene, camera);});// 渲染循环function render() {texture5.offset.x += 0.005;renderer.render(scene, camera);requestAnimationFrame(render);}render();</script>
</html>

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

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

相关文章

【Linux】Linux工具

【Linux】Linux工具

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 一、Linux安装软件&#xff1a; 1.yum安装 2.Linux和Windows文件互传 问题: 3.yum卸载软件 二、vim编辑器 1.命令模式 2.vim配置项说明 3.vim操作总结 一、Linux安装软件&#…
阅读更多...
【Vue】快速入门案例与工作流程的讲解

【Vue】快速入门案例与工作流程的讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Vue快速入门》。&#x1f…
阅读更多...
win部署CRM

win部署CRM

win部署crm&#xff09; 1.phpstudy2.composer3.代码4.其他配置 周末锴哥让我帮他部署了一个CRM&#xff0c;写个教程&#xff0c;方便之后他用。锴哥用的是 NxCrm&#xff0c;先把代码下下来。 1.phpstudy 1.首先是下载小皮面板&#xff0c;配置php的环境。这里面下载了php8…
阅读更多...
UML类图

UML类图

优质博客&#xff1a;IT-BLOG-CN UML&#xff08;Unidied Modeling Language&#xff09;统一建模语言&#xff1a;用来设计软件的可视化建模语言&#xff0c;能够表达软件设计中的动态与静态信息。UML定义了用例图、类图、对象图、状态图、活动图、时序图、协作图、构件图、部…
阅读更多...
外星人入侵游戏-(创新版)

外星人入侵游戏-(创新版)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…
阅读更多...
Improving 3D Imaging with Pre-Trained Perpendicular 2D Diffusion Models

Improving 3D Imaging with Pre-Trained Perpendicular 2D Diffusion Models

使用预先训练的垂直 2D 扩散模型改进 3D 成像 论文链接&#xff1a;https://arxiv.org/abs/2303.08440 项目链接&#xff1a;https://github.com/hyn2028/tpdm Abstract 扩散模型由于其众多的优点已经成为一种流行的图像生成和重建方法。然而&#xff0c;大多数基于扩散的逆…
阅读更多...
【C++从入门到精通】第2篇：C++基础知识（中）

【C++从入门到精通】第2篇：C++基础知识（中）

文章目录 2.1 iostream介绍&#xff1a;cout、cin和endl2.1.1 输入/输出库2.1.2 std::cout2.1.3 std::endl2.1.4 std::cout是缓冲的2.1.5 std::endl与\n2.1.6 std::cin2.1.7 总结2.1.8 练习时间 2.2 未初始化的变量和未定义的行为2.2.1 未初始化的变量2.2.2 未定义行为2.2.3 明…
阅读更多...
java中集合的List

java中集合的List

集合的List 可以存储重复元素 以下情况使用 ArrayList : 频繁访问列表中的某一个元素。只需要在列表末尾进行添加和删除元素操作。 以下情况使用 LinkedList : 你需要通过循环迭代来访问列表中的某些元素。需要频繁的在列表开头、中间、末尾等位置进行添加和删除元素操作。…
阅读更多...
YOLOv8学习

YOLOv8学习

1 YOLOv8训练自己的数据集 1.1 部署和运行 1.1.1 第一步&#xff0c;下载代码 源码地址 1.1.2 第二步&#xff0c;创建环境 默认已经安装好conda conda create -n yolopy38 python3.8conda activate yolopy38安装所需要的包&#xff0c;先cd到代码目录下 pip install -r…
阅读更多...
陈芳允于1971年提出双星定位

陈芳允于1971年提出双星定位

中国究竟有多强大&#xff1f; - 知乎 真是天才设想&#xff01;通过两个同步卫星实现定位。定位原理&#xff1a;使用两个同步卫星&#xff0c;把地球作为第三星。 内容摘录如下&#xff1a; 大家都知道&#xff0c; 1970 年中国的「东方红一号」卫星升空。 但许多人不知…
阅读更多...
基于Java的养老院管理系统的设计与实现（亮点：多角色、登录验证码、留言反馈）

基于Java的养老院管理系统的设计与实现（亮点：多角色、登录验证码、留言反馈）

养老院管理系统 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述 五、系统实现5.1 养老院…
阅读更多...
Linux底层基础知识

Linux底层基础知识

一.汇编&#xff0c;C语言&#xff0c;C&#xff0c;JAVA之间的关系 汇编&#xff0c;C语言&#xff0c;C可以通过不同的编译器&#xff0c;编译成机器码。而java只能由Java虚拟机识别。Java虚拟机可以看成一个操作系统&#xff0c;Java虚拟机是由汇编&#xff0c;C&#xff0c…
阅读更多...
【深度学习实验】线性模型（三）：使用Pytorch实现简单线性模型：搭建、构造损失函数、计算损失值

【深度学习实验】线性模型（三）：使用Pytorch实现简单线性模型：搭建、构造损失函数、计算损失值

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入库 1. 定义线性模型linear_model 2. 定义损失函数loss_function 3. 定义数据 4. 调用模型 5. 完整代码 一、实验介绍 使用Pytorch实现 线性模型搭建构造损失函数计算损失值 二、…
阅读更多...
WebGL笔记：设置画布底色，从样式中解析颜色并设置画布底色，设置动态画布底色

WebGL笔记：设置画布底色，从样式中解析颜色并设置画布底色，设置动态画布底色

1 ) 通用结构代码 <canvas id"canvas"></canvas><script>// 获取dom元素const canvas document.querySelector("#canvas");// 设置宽高canvas.width 200;canvas.height 200;// 获取gl三维画笔const gl canvas.getContext("web…
阅读更多...
idea创建springboot项+集成阿里连接池druid

idea创建springboot项+集成阿里连接池druid

创建项目并集成流程 1&#xff1a;前提准备2&#xff1a;创建springboot项目流程3&#xff1a;集成阿里连接池步骤4&#xff1a;集成swagger方便测试5&#xff1a;书写增删改查进行测试6&#xff1a;项目gitee地址 1&#xff1a;前提准备 准备开发工具&#xff1a;idea java环…
阅读更多...
nginx知识点详解：反向代理+负载均衡+动静分离+高可用集群

nginx知识点详解：反向代理+负载均衡+动静分离+高可用集群

一、nginx基本概念 1. nginx是什么&#xff0c;做什么事情&#xff1f; Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;特点是占有内存少&#xff0c;并发能力强。Nginx转为性能优化而开发&#xff0c;能经受高负载考验。支持热部署&#xff0c;启动容易&#xff0c;运…
阅读更多...
linux内核分析：线程和进程创建，内存管理

linux内核分析：线程和进程创建，内存管理

lec18-19:进程与线程创建 lec20-21虚拟内存管理 内核代码，全局变量这些只有一份，但是内核栈有多份，这可能就是linux线程模型1对1模式的由来。通过栈来做的 x86 CPU支持分段和分页（平坦内存模式）两种 分段，选择子那里就有特权标记了
阅读更多...
Linux多线程【线程控制】

Linux多线程【线程控制】

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 文章目录 &#x1f307;前言&#x1f3d9;️正文1、线程知识补充1.2、线程私有资源1.3、线程共享资源1.4、原生线程库 2、线程…
阅读更多...
GIS跟踪监管系统单元信息更新

GIS跟踪监管系统单元信息更新

GIS跟踪监管系统单元信息更新 单元信息更新。① 新增单元。② 编辑单元。③ 删除单元。物资查询&#xff08;1&#xff09;物资查询与展示。① 几何查询。• 单击查询&#xff1a;• 拉框查询&#xff1a;• 多边形查询&#xff1a;② 物资定位。• 多个物资定位&#xff1a; 单…
阅读更多...
关于oss直传

关于oss直传

为什么要使用oss直传&#xff1a; 前后端文件传输涉及数据较大&#xff0c;往往会成为很多项目的性能瓶颈。常见的传输方式也有不少&#xff0c;相对来说&#xff0c;OSS直传能够减轻很大压力。 传统方式相比直传OSS&#xff0c;相对来说有三个缺点&#xff1a; 上传慢&…
阅读更多...
最新文章

Copyright @ 2022~2023