Three.js纹理贴图

偏移
在这里插入图片描述
旋转
在这里插入图片描述
重复
在这里插入图片描述
纹理显示的清晰度
在这里插入图片描述

<template><div id="webgl"></div>
</template><script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const scene = new THREE.Scene();// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('../public/Snipaste_2024-05-05_16-18-48.png')// 设置纹理偏移
// texture.offset.x = 0.5 // 向左偏移,负为反
// texture.offset.y = 0.5
// texture.offset.set(0.5, 0.5)
// 纹理旋转
// 设置旋转中心点
// texture.center.set(0.5, 0.5)
// texture.rotation = Math.PI / 4 // 旋转45°
// 设置纹理的重复
// texture.repeat.set(2, 3) // 水平重复2次,竖着重复3次
// 设置纹理重复的模式 (默认是将重复的纹理推至外部边缘)
// texture.wrapS = THREE.MirroredRepeatWrapping // 水平贴图,镜像重复
// texture.wrapT = THREE.RepeatWrapping // 垂直贴图,纹理重复到无穷大
// 纹理显示设置(通过算法实现)
// texture.minFilter = THREE.NearestFilter // 取最接近的
// texture.magFilter = THREE.NearestFilterconst geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ // 漫反射;可改为镜面反射MeshPhongMaterial// color: 0xff0000,//0xff0000设置材质颜色为红色map: texture
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);function render(time) {renderer.render(scene, camera);requestAnimationFrame(render);
}
render()
</script>

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

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

相关文章

数据库SQL语言实战(七)

前言 这次的有一点点难~~~~~我也写了好久 练习题 题目一 在学生表pub.student中统计名字&#xff08;姓名的第一位是姓氏&#xff0c;其余为名字&#xff0c;不考虑复姓&#xff09;的使用的频率&#xff0c;将统计结果放入表test5_01中 create table test5_01(First_name…

【notes2】并发,IO,内存

文章目录 1.线程/协程/异步&#xff1a;并发对应硬件资源是cpu&#xff0c;线程是操作系统如何利用cpu资源的一种抽象2.并发&#xff1a;cpu&#xff0c;线程2.1 可见性&#xff1a;volatile2.2 原子性&#xff08;读写原子&#xff09;&#xff1a;AtomicInteger/synchronized…

SparkSql介绍

概述 SparkSQL&#xff0c;顾名思义&#xff0c;就是Spark生态体系中的构建在SparkCore基础之上的一个基于SQL的计算模块。SparkSQL的前身不叫SparkSQL&#xff0c;而叫Shark&#xff0c;最开始的时候底层代码优化&#xff0c;sql的解析、执行引擎等等完全基于Hive&#xff0c…

React中的高阶组件的封装,高阶函数,HOC的含义及用法:

含义及作用: 高阶函数代码案例: 调用高阶组价:

软件测试与管理:黑盒测试-等价类划分法和 边界值分析法

知识思维导图&#xff1a; 例题1&#xff1a;日期检查功能的等价类划分 设有一个档案管理系统&#xff0c;要求用户输入以年月表示的日期。假设日期限定在1990年1月~2049年12月&#xff0c;并规定日期由6位数字字符组成&#xff0c;前4位表示年&#xff0c;后2位表示月。现用等…

计算机组成原理实验一 寄存器实验

目录 实验目的和要求 实验环境 实验内容与过程 连接线表 将8AH写入A寄存器 将6cH写入W寄存器 实验结果与分析 实验箱主要部件 将55H写入A寄存器 将66H写入W寄存器 按住STEP脉冲键实验现象? (实验箱中有什么变化) 放开STEP 键实验现象? (实验箱中有什么变化) 数据…

proxy代理面试题

1、动态属性值 const r1add[1][2][3]4//输出10 const r2add[10][20]30//输出60 const r3add[100][200][300]400//输出1000柯里化&#xff0c;有参考下文 https://blog.csdn.net/p1967914901/article/details/127621032 add 是对象&#xff0c;通过链式传入属性求和返回结果&a…

蛋白质/聚合物防污的机器学习(材料基因组计划)

前言&#xff1a;对于采用机器学习去研究聚合物的防污性能&#xff0c;以及或者其他性质。目前根据我的了解我认为最困难的点有三条&#xff1a; 其一&#xff1a;数据&#xff0c;对于将要训练的数据必须要有三点要求&#xff0c;1.数据要多&#xff0c;也就是大数据&#xff…

毕设:邮件分发系统

文章目录 前言一、登录1.邮箱登录2.账号登录 二、注册三、首页四、写邮件五、收邮件六、草稿箱七、垃圾箱八、已发送九、通讯录十、用户管理十一、邮件管理十二、登录日志总结 前言 分享一下邮件分发系统 一、登录 1.邮箱登录 2.账号登录 二、注册 三、首页 首页有邮件信息&…

【蓝桥杯备赛国赛】5-5

文章目录 求阶乘双子数 求阶乘 求阶乘 分析k的范围&#xff0c;10的18次方。这个数字很大 想要末尾有0的存在必须要2和5&#xff0c;但是通过分析2的数目应该是远远多于5的&#xff0c;所以只要5的数目够多即可。所以for循环的层次也是10的九次方以上&#xff0c;必然会超时&…

光端机(2)——光纤通信学习笔记九

学习笔记里面只关注基本原理和概念&#xff0c;复杂的公式和推导都没有涉及 光端机 光发射机 作用&#xff1a;实现电光转换。将来自电端机的电信号对光源发出的光波进行调制&#xff0c;然后将调制好的光信号耦合到光线中传输。 基本性能要求 1.合适的发光波长&#xff08;光…

GateWay检查接口耗时

添加gateway依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId> </dependency>创建一个LogTimeGateWayFilterFactory类&#xff0c;可以不是这个名字但是后面必须是x…

webstorm 常用插件

安装插件步骤&#xff1a; 打开软件&#xff0c;文件 -- 设置-- 插件 -- 输入插件名称 -- 安装 代码截图: code screenShots 先选中代码&#xff0c;按 ctrl shift alt a&#xff0c;就可截取选中的代码颜色注释: comments highlighter 对注释的文字改变颜色高亮成对符号: h…

设计模式Java实现-建造者模式

楔子 小七在2019年的时候&#xff0c;就想写一个关于设计模式的专栏&#xff0c;但是最终却半途而废了。粗略一想&#xff0c;如果做完一件事要100分钟&#xff0c;小七用3分钟热情做的事&#xff0c;最少也能完成10件事情了。所以这一次&#xff0c;一定要把他做完&#xff0…

【前端】HTML实现个人简历信息填写页面

文章目录 前言一、综合案例&#xff1a;个人简历信息填写页面 前言 这篇博客仅仅是对HTML的基本结构进行了一些说明&#xff0c;关于HTML的更多讲解以及CSS、Javascript部分的讲解可以关注一下下面的专栏&#xff0c;会持续更新的。 链接&#xff1a; Web前端学习专栏 下面我对…

【毕业设计】基于SSM的运动用品商城的设计与实现

1.项目介绍 在这个日益数字化和信息化的时代&#xff0c;随着人们购物习惯的转变&#xff0c;传统的实体商店已经无法满足人们日益增长的在线购物需求。因此&#xff0c;基于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的运动用品商城项目应运而生&#xff0…

LearnOpenGL(七)之摄像机

一、摄像机/观察空间 当我们讨论摄像机/观察空间(Camera/View Space)的时候&#xff0c;是在讨论以摄像机&#xff08;人&#xff09;的视角作为场景原点时场景中所有的顶点坐标&#xff1a;观察矩阵把所有的世界坐标变换为相对于摄像机位置与方向的观察坐标。要定义一个摄像机…

探索Kimi模型AI:革新人工智能的未来

探索Kimi模型AI&#xff1a;革新人工智能的未来 人工智能&#xff08;AI&#xff09;技术的发展已经取得了巨大的进步&#xff0c;为我们的生活带来了许多便利和创新。在这个充满活力和竞争的领域中&#xff0c;Kimi模型AI以其独特的设计和功能吸引了人们的注意。本文将深入探…

final关键词

基本介绍 final 中文意思是&#xff1a;最后的&#xff0c;最终的final可以修饰 类、属性、方法和局部变量何时会用到final&#xff1a; 1&#xff0c;当不希望类被继承时&#xff0c;可以用final修饰 2&#xff0c;当不希望父类的某个方法被子类覆盖/重写&#xff08;overrid…

矩阵式键盘的控制

键盘扫描是最 为常用的工作方式&#xff0c;扫描方式又可分为程序程扫描、定时扫描和中断扫描。程序扫描是指在 特定的程序位置段上安排键盘扫描程序读取键盘状态。定时扫描是指利用单片机内部或扩展 的定时器产生定时中断&#xff0c;在中断中进行键盘扫描的工作方式。中断扫描…