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

最新推荐文章于 2024-01-03 16:42:52 发布

开心就是最好

最新推荐文章于 2024-01-03 16:42:52 发布

阅读量678

点赞数

分类专栏： Web3D 文章标签： Web3D threejs

本文链接：https://blog.csdn.net/u010678947/article/details/132792700

版权

Web3D 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

参考资料

知识点

注：基于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 = 800
    const 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>

开心就是最好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Three.js之顶点UV坐标、纹理贴图

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

扫一扫