threejs紋理平鋪實現地面效果

God、夜發表於2024-06-19
  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);

相關文章