Three.js - 设置纹理offset偏移模拟箭头线性流动

最新推荐文章于 2024-05-29 16:35:44 发布

「已注销」

最新推荐文章于 2024-05-29 16:35:44 发布

阅读量7.2k

点赞数 10

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/83538039

版权

1、效果

在这里插入图片描述通过循环 texture的offset属性值，可以实现，类似字幕的运动，以及箭头的线性流动等效果

2、示例地址

https://ithanmang.gitee.io/threejs/home/201810/20181030/01-texture-offset%E5%81%8F%E7%A7%BB.html

3、相关属性

该示例使用的是平面网格，然后加上材质贴图，设置纹理重复覆盖THREE.RepeatWrapping
然后循环渲染纹理的偏移量

3.1、wrapS/wrapT

纹理水平和垂直方向的平铺方式，分别对应 uv 贴图的uv属性，详细查看文档Texture 纹理常量

3.1.1、Wrapping Modes 模式

THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping

THREE.RepeatWrapping:重复包裹
THREE.ClampToEdgeWrapping：纹理的最后一个像素延伸到网格的边缘，默认值
THREE.MirroredRepeatWrapping：纹理镜像重复

3.1、offset

是一个 vector2变量，单个纹理的偏移量

3.2、repeat

一个Vector2变量，纹理在 uv 方向上的重复次数，若大于1则需要设置wrapS/wrapT属性值为THREE.RepeatWrapping / THREE.MirroredRepeatWrapping

4、实现方法

4.1、创建纹理

texture = new THREE.TextureLoader().load('../../textures/arrows/arrow-right.png');

4.2、设置uv重复包裹方式

textur.wrapS = THREE.RepeatWrapping;
texture.wrapT=THREE.RepeatWrapping;

4.3、设置重复次数

texture.repeat.x = 10;
texture.repeat.y =1;

x方向重复，10次，y方向默认值为1

4.4、创建 Mesh 并设置纹理贴图

var planeGeometry = new THREE.PlaneGeometry(200, 10);

 var plane = new THREE.MeshBasicMaterial();
 plane.color = new THREE.Color(0x00ff00);
 plane.map = texture;
 plane.transparent = true;
 plane.side = THREE.DoubleSide;

4.5、循环设置纹理偏移量 offset

texture.offset.x += 0.001;

上面是x方向，循环移动

4.6、效果

在这里插入图片描述

5、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../../../three.png">
    <title>纹理offset偏移</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /* 溢出隐藏 */
        }
        #loading {
   
            position:

最低0.47元/天解锁文章

「已注销」

关注

10
点赞
踩
22

收藏

觉得还不错? 一键收藏
5
评论
Three.js - 设置纹理offset偏移模拟箭头线性流动

1、效果通过循环 texture的offset属性值，可以实现，类似字幕的运动，以及箭头的线性流动等效果2、示例地址https://ithanmang.gitee.io/threejs/home/201810/20181030/01-texture-offset偏移.html3、相关属性该示例使用的是平面网格，然后加上材质贴图，设置纹理重复覆盖THREE.RepeatWrapping然...
复制链接

扫一扫