threejs纹理平铺实现地面效果

  const geometry = new THREE.PlaneGeometry(20000, 20000);      
  //纹理贴图加载器TextureLoader
  const texLoader = new THREE.TextureLoader();
  // .load()方法加载图像,返回一个纹理对象Texture
  const renderer = new THREE.WebGLRenderer();
  const texture = texLoader.load("./static/wh.jpg", () => {
    renderer.render(scene, camera);
  });
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  // uv两个方向纹理重复数量
  texture.repeat.set(200, 200); //注意选择合适的阵列数量
  const material = new THREE.MeshLambertMaterial({
    // 设置纹理贴图:Texture对象作为材质map属性的属性值
    map: texture, //map表示材质的颜色贴图属性
  });
  const mesh = new THREE.Mesh(geometry, material);
  // 旋转矩形平面
  mesh.rotateX(-Math.PI / 2);
  // mesh.scale.set(0.2, 0.2, 0.2);
  const group = new THREE.Group();
  group.add(mesh);
  scene.add(group);
posted @   God、夜  阅读(233)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示