1、纹理贴图

纹理贴图，是给MeshLambertMaterial等材质一些纹理图片，以达到更好的视觉效果。

使用方法：通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

const geometry = new THREE.PlaneGeometry(200, 100);

//纹理贴图加载器TextureLoader

const texLoader = new THREE.TextureLoader();

// .load()方法加载图像，返回一个纹理对象Texture

const texture = texLoader.load('./earth.jpg');

const material = new THREE.MeshLambertMaterial({

    // color: 0x00ffff,color和map颜色值会混合，因此设置map后color一般不用设置

    // 设置纹理贴图：Texture对象作为材质map属性的属性值

    map: texture,//map表示材质的颜色贴图属性

});

color和map颜色值会混合，因此设置map后color一般不用设置

2、顶点uv坐标

顶点uv坐标，是二维顶点坐标，顶点UV坐标geometry.attributes.uv和顶点位置坐标geometry.attributes.position是一一对应的。

作用：纹理贴图上提取像素映射到网格模型Mesh的几何体表面上。

顶点UV坐标，可以在0~1.0之间任意取值(是百分比值，比如0.3，对应是30%的位置)，纹理贴图左下角对应的UV坐标是(0,0)，右上角对应的坐标(1,1)。

/**纹理坐标0~1之间随意定义*/

const uvs = new Float32Array([

    0, 0, //图片左下角

    1, 0, //图片右下角

    1, 1, //图片右上角

    0, 1, //图片左上角

]);

// 设置几何体attributes属性的位置normal属性

geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2个为一组,表示一个顶点的纹理坐标

获取纹理贴图左下角四分之一部分：

const uvs = new Float32Array([

    0, 0,

    0.5, 0,

    0.5, 0.5,

    0, 0.5,

]);

3、实现瓷砖地面效果

// .load()方法加载图像，返回一个纹理对象Texture

const texture = texLoader.load('./瓷砖.jpg');

// 设置阵列包裹模式，S对应U，T对应V

texture.wrapS = THREE.RepeatWrapping;

texture.wrapT = THREE.RepeatWrapping;

// uv两个方向纹理重复数量

texture.repeat.set(12,12);//注意选择合适的阵列数量

4、背景透明的png图片贴图-transparent

如果不做处理，直接贴图，透明部分会有颜色填充，因此要设置transparent: true解决

const material = new THREE.MeshBasicMaterial({

    map: textureLoader.load('./指南针.png'),

    transparent: true, //使用背景透明的png贴图，注意开启透明计算

});

5、创建uv动画(利用offset属性)

通过纹理对象的偏移属性.offset实现一个UV动画效果。offset是Vector2对象。

texture.offset.x +=0.5;//纹理U方向偏移

// 设置.wrapS也就是U方向，纹理映射模式(包裹模式)

texture.wrapS = THREE.RepeatWrapping;//对应offste.x偏移

texture.offset.y +=0.5;//纹理V方向偏移

// 设置.wrapT也就是V方向，纹理映射模式

texture.wrapT = THREE.RepeatWrapping;//对应offste.y偏移

把上面代码放到渲染循环函数中执行即可实现动画。

记住对应关系：X：S：U这3个对应，Y：T：V这3个对应。

下面展示一个示例：

实例完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Three.js中文网：www.webgl3d.cn</title>

    <style>

        body{

            overflow: hidden;

             margin: 0px;

        }

    </style>

</head>

<body>

    <!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 -->

    <script type="importmap">

        {

            "imports": {

                "three": "../../../three.js/build/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 geometry = new THREE.PlaneGeometry(200, 20);

    //纹理贴图加载器TextureLoader

    const texLoader = new THREE.TextureLoader();

    // .load()方法加载图像，返回一个纹理对象Texture

    const texture = texLoader.load('./纹理3.jpg');

    const material = new THREE.MeshLambertMaterial({

        map: texture,//map表示材质的颜色贴图属性

    });

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

    mesh.rotateX(-Math.PI/2);

    // 设置阵列

    texture.wrapS = THREE.RepeatWrapping;

    // uv两个方向纹理重复数量

    texture.repeat.x=50;//注意选择合适的阵列数量

    //场景

    const scene = new THREE.Scene();

    scene.add(mesh); //模型对象添加到场景中

    //辅助观察的坐标系

    const axesHelper = new THREE.AxesHelper(100);

    scene.add(axesHelper);

    //光源设置

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);

    directionalLight.position.set(100, 60, 50);

    scene.add(directionalLight);

    const ambient = new THREE.AmbientLight(0xffffff, 0.4);

    scene.add(ambient);

    //渲染器和相机

    const width = window.innerWidth;

    const height = window.innerHeight;

    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

    camera.position.set(292, 223, 185);

    camera.lookAt(0, 0, 0);

    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(width, height);

    document.body.appendChild(renderer.domElement);

    // 渲染循环

    function render() {

        texture.offset.x +=0.1;//设置纹理动画

        renderer.render(scene, camera);

        requestAnimationFrame(render);

    }

    render();

    const controls = new OrbitControls(camera, renderer.domElement);

    // 画布跟随窗口变化

    window.onresize = function () {

        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

    };

    </script>

</body>

</html>

文章中部分素材选取自Threejs中文网：http://www.webgl3d.cn/

three.js教程5-几何体顶点UV坐标、纹理贴图TextureLoader的更多相关文章

  1. WebGL three.js学习笔记 自定义顶点建立几何体

    自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型,基本已经够我们的使用,但是如果我们还是想自己根据顶点坐标来建立几何模型的话,Three.js也是可以的. 基本效果如图: 点击查看 ...

  2. svg.js教程及使用手册详解（二）

    上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和 ...

  3. unity中mesh属性的uv坐标讨论

    http://blog.sina.com.cn/s/blog_427cf00b0102vp0j.html 之前在做连连看游戏中,也用到贴图坐标,当时我们讲到,不管是平铺(Tiling)还是偏移(Off ...

  4. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  5. Node.js 教程 04 - 模块系统

    前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简 ...

  6. Node.js教程系列~目录

    Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger

    Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便 ...

  9. dot.js教程文档api

    dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...

  10. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

随机推荐

  1. C++设计模式 - 享元模式（Flyweight）

    对象性能模式 面向对象很好地解决了"抽象"的问题,但是必不可免地要付出一定的代价.对于通常情况来讲,面向对象的成本大都可以忽略不计.但是某些情况,面向对象所带来的成本必须谨慎处理. ...

  2. 21 JSONP

    JSONP 为了解决浏览器跨域问题. jquery提供了jsonp请求. 在网页端如果见到了服务器返回的数据是: ​ xxxxxxxxxxdjsfkldasjfkldasjklfjadsklfjasd ...

  3. #随机#CF1198F GCD Groups 2

    题目 将 \(n\) 个数分为两组,使得两组的GCD都为1,求具体的分组情况 分析 考虑直接打乱 \(n\) 个数,如果能使第一组GCD减小就减小,否则丢到第二组, 由于打乱后出错的概率会减小,所以r ...

  4. #倍增FFT#CF755G PolandBall and Many Other Balls

    题目 有一排 \(n\) 个球,定义一个组可以只包含一个球或者包含两个相邻的球. 现在一个球只能分到一个组中,求从这些球中取出 \(k\) 组的方案数. \(n\leq 10^9 ,k<2^{1 ...

  5. 【开源三方库】Easyui：基于OpenAtom OpenHarmony ArkUI深度定制的组件框架

      万冬阳 公司:中国科学院软件所 小组:知识体系工作组 简介 Easyui是一套基于ArkTS语言开发的轻量.可靠的移动端组件库,它是对OpenAtom OpenHarmony(以下简称" ...

  6. k8s之基于metallb实现LoadBalancer型Service

    一.实验说明 1.介绍 MetalLB 是裸机 Kubernetes 集群的负载均衡器实现,使用标准路由协议,主要用于暴露 K8s 集群的服务到集群外部访问,MetalLB 可以让我们在 K8s 集群 ...

  7. 新手的登录qsnctfwp

    打开登录界面 按要求以普通用户 user 的身份,通过密码 password 登录 使用 BurpSuite 拦截登录情况 在获取(GET)登录结果页面时,修改 Cookie 中的 username ...

  8. 基于openstack安装部署私有云详细图文教程

    本文主要分享的是云计算.openstack的使用.私有云平台建设.云服务器云硬盘的构建和使用.从基本概念入手到私有云建设,信息量非常大.对于openstack的安装部署都是从官方文档中一步步的介绍,内 ...

  9. jenkins 持续集成和交付 —— 触发器（六）

    前言 什么是触发器呢?当某种条件达到的时候将会触发某个机关. 正文 jenkins 内置4种触发器: 1.触发远程构建 2.其他工程构建后触发 3.定时触发 4.轮询SCM 那么就来介绍一下这几种吧. ...

  10. allure常用

    overview:概述页面:categories:分类目录:suites:按套件和类分组的已执行测试的标准结构:graphs:图表:timeline:时间线:behaviors:可根据epic.fea ...