const geometry = new THREE.BoxGeometry();

import  * as THREE from 'three';
// 導(dǎo)入靜態(tài)的圖片資源，位置注意是自己項目中存放靜態(tài)資源的地址。
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';
// 創(chuàng)建一個 THREE 加載器
const loader = new THREE.TextureLoader();
// 使用 loader.load 將靜態(tài)圖片加載到 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 將紋理創(chuàng)建成材質(zhì) 存入 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';
// 導(dǎo)入草地格子的配置數(shù)據(jù)
import { grassBlock } from '../controller/loader';
export default class GenerateFrags {
  private terrain: Terrain;
  constructor(terrain: Terrain) {
    this.terrain = terrain;
  }
  generateAll() {}
  // 主要關(guān)注這里
  generateOneFrag() {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    // 使用紋理創(chuàng)建的材質(zhì)來作為 mesh 的材質(zhì)
    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, 監(jiān)聽頁面窗口大小改變，改變時需要個更新坐標系（相機位置）
   */
  #init() {
    window.addEventListener('resize', () => {
      this.camera.aspect = window.innerHeight / window.innerWidth;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    });
    // 初始化設(shè)置相機
    // 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);
    // 這里是調(diào)用入口
    this.testRenderOneGrassBlock();
  }
  // 測試生成一個草地格子
  testRenderOneGrassBlock() {
    // 初始化一個 GenerateFrags 對象來創(chuàng)建一個草地格子
    const generateOneFrag = new GenerateFrags(this.terrain);
    const cube = generateOneFrag.generateOneFrag();
    // 將草地格子加到 scene 中
    this.scene.add(cube);
    const animate = () => {
      requestAnimationFrame(animate);
      // 使用 mesh 的 rotation 來讓草地格子旋轉(zhuǎn)起來
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      // 調(diào)用渲染器進行渲染
      this.renderer.render(this.scene, this.camera);
    };
    animate();
  }
}