threejs学习笔记:贴图实现木地板效果

发布于:2023-01-21 ⋅ 阅读:(419) ⋅ 点赞:(0)

贴图不重复

在这里插入图片描述

function _createFloor() {
    // 地板贴图
    const loader = new THREE.TextureLoader();
    const texture = loader.load("/img/muwen.png");
    const geometry = new THREE.BoxGeometry(10, 0.1, 10);
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const object = new THREE.Mesh(geometry, material);

    object.position.set(0, -0.5, 0);
    scene.value?.add(object);
  }

贴图重复

 // 加载repeat重复贴图
  function loadTextureRepeat(path: string) {
    const loader = new THREE.TextureLoader();
    let texture = loader.load(path);
    texture.magFilter = THREE.NearestFilter;
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(13, 10);
    return texture;
  }

 // 地板
  function _createFloor() {
    const geometry = new THREE.BoxGeometry(13, 0.1, 10);
    const material = new THREE.MeshBasicMaterial({
      map: loadTextureRepeat("/img/木纹.png"),
      color: "#f0f0f0"
    });
    const object = new THREE.Mesh(geometry, material);

    object.position.set(0, -0.5, 0);
    scene.value?.add(object);
  }

网站公告

今日签到

点亮在社区的每一天
去签到