Three.js 使用纹理贴图创建 Minecraft 草地方块及常见问题解决

const geometry = new THREE.BoxGeometry();

import  * as THREE from 'three';
// 导入静态的图片资源，位置注意是自己项目中存放静态资源的地址。
import grassBlockTextureSideImg from '../../assets/textures/blocks-clipped/grassBlockSide.png';
import grassBlockTextureTopImg from '../../assets/textures/blocks-clipped/grassBlockTop.png';
import dirtTextureImg from '../../assets/textures/blocks-clipped/dirt.png';
// 创建一个 THREE 加载器
const loader = new THREE.TextureLoader();
// 使用 loader.load 将静态图片加载到 ThreeJS 中
const grassBlockTextureSide = loader.load(grassBlockTextureSideImg);
const grassBlockTextureTop = loader.load(grassBlockTextureTopImg);
const dirtTexture = loader.load(dirtTextureImg);
// 定义清楚草地方块纹理顺序
export const grassBlock = {
    name: 'grassBlock',
    // 注意顺序
    textureImg: [
        grassBlockTextureSide,
        grassBlockTextureSide,
        grassBlockTextureTop,
        dirtTexture,
        grassBlockTextureSide,
        grassBlockTextureSide,
      ],
      material: [],
};
// 使用 THREE.MeshStandardMaterial 将纹理创建成材质 存入 grassBlock.material 上
grassBlock.material = grassBlock.textureImg.map((img, i) => {
    return new THREE.MeshStandardMaterial({
        map: img,
        // side: THREE.DoubleSide
    })
});
export default { grassBlock }

// generateFrag.ts
import Terrain from '.';
import * as THREE from 'three';
// 导入草地格子的配置数据
import { grassBlock } from '../controller/loader';
export default class GenerateFrags {
  private terrain: Terrain;
  constructor(terrain: Terrain) {
    this.terrain = terrain;
  }
  generateAll() {}
  // 主要关注这里
  generateOneFrag() {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    // 使用纹理创建的材质来作为 mesh 的材质
    const material = grassBlock.material;
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 1);
    return mesh;
  }
}

// core.ts
import * as THREE from 'three';
import Terrain from '../terrain';
import GenerateFrags from '../terrain/generateFrag';
export default class Core {
  // scene
  public scene: THREE.Scene;
  // 透视相机
  public camera: THREE.PerspectiveCamera;
  // renderer 渲染器
  public renderer: THREE.WebglRenderer;
  // 地形对象
  public terrain: Terrain;
  constructor() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000,
    );
    this.renderer = new THREE.WebGLRenderer();
    // 地形
    this.terrain = new Terrain(this);
    // 其他初始化操作一并处理
    this.#init();
  }
  /**
   * 1, 监听页面窗口大小改变，改变时需要个更新坐标系（相机位置）
   */
  #init() {
    window.addEventListener('resize', () => {
      this.camera.aspect = window.innerHeight / window.innerWidth;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    });
    // 初始化设置相机
    // this.camera.fov = 80;
    // this.camera.aspect = window.innerWidth / window.innerWidth;
    // this.camera.far = 500;
    // this.camera.updateProjectionMatrix();
    this.camera.position.set(0, 0, 10);
    // 初始化场景scene 背景
    const backgroundColor = 0x87ceeb;
    this.scene.fog = new THREE.FogExp2(0.02);
    this.scene.background = new THREE.Color(backgroundColor);
    // 初始化场景的灯光
    const sunLight = new THREE.PointLight(0xffffff, 0.5);
    sunLight.position.set(500, 500, 500);
    this.scene.add(sunLight);
    const sunLight2 = new THREE.PointLight(0xffffff, 0.2);
    sunLight2.position.set(-500, 500, -500);
    this.scene.add(sunLight2);
    const reflectionLight = new THREE.AmbientLight(0x404040);
    this.scene.add(reflectionLight);
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document
      .getElementById('game-container')
      .appendChild(this.renderer.domElement);
    // 这里是调用入口
    this.testRenderOneGrassBlock();
  }
  // 测试生成一个草地格子
  testRenderOneGrassBlock() {
    // 初始化一个 GenerateFrags 对象来创建一个草地格子
    const generateOneFrag = new GenerateFrags(this.terrain);
    const cube = generateOneFrag.generateOneFrag();
    // 将草地格子加到 scene 中
    this.scene.add(cube);
    const animate = () => {
      requestAnimationFrame(animate);
      // 使用 mesh 的 rotation 来让草地格子旋转起来
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      // 调用渲染器进行渲染
      this.renderer.render(this.scene, this.camera);
    };
    animate();
  }
}