three.js教程5-几何体顶点UV坐标、纹理贴图

标签：贴图 const UV THREE texture 纹理 new 几何体

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/

标签：贴图,const,UV,THREE,texture,纹理,new,几何体
From： https://www.cnblogs.com/tiandi/p/17059347.html

three.js教程5-几何体顶点UV坐标、纹理贴图

相关文章

赞助商

阅读排行