ThreeJS使用纹理贴图创建一个我的世界草地方块_Javascript

threejs 纹理贴图创建一个我的世界草地方块

开始准备使用threejs写一个类似《我的世界》场景的射击类游戏，地形和我的世界很相似。场景中需要进行很多的纹理贴图，本篇文章主要以给一个立方体贴图成草地为例子介绍 threejs 中如何添加纹理？如何解决纹理贴图后方块不展示（纹理未生效，效果是黑色方块）问题？

给 mesh 增加纹理，实现草地方块

把大象装进冰箱需要三步，这里实现一个草地方块也需要三步。

**step one ：初始化一个 geometry 立方体形状。

step two: 初始化纹理加载器，加载纹理。

step three：将纹理贴到立方体上，渲染出来。
**

step one 初始化一个111 的立方体

前边两篇文章中也有介绍，尤其是第一篇【渲染第一个threejs立方体】。不做详细介绍呀，一行代码

const geometry = new three.boxgeometry();

step two 初始化纹理加载器，加载纹理

开始介绍之前我们先简单减少一下 threejs 支持的纹理加载器以及其加载的纹理类型，threejs 提供 textureloader 来加载静态图像纹理；cubetextureloader 用于加载立方体贴图纹理，它通过加载 6 个图像来作为立方体的六个面，常用来创建天空盒天空球效果；compressedtextureloader 用于加载压缩过后的纹理； datatextureloader 用于加载像素数据组成的纹理，常用于动态生成纹理或者使用特定的纹理生成算饭来创建纹理。还有一些其他通用的加载器用于加载文件、视频、音频等资源。

本文选择使用 textureloader 来加载3张静态图片分别作为不同方向的纹理。开始前先准备3 张图片用于纹理资源分别如下。草地方块 6 个面，顶部是草坪，侧边4个面共用一个图，底部是一个图。（图片资源文末链接自取，别使用一下截图来作为图片资源）。

准备几张静态图片：

底部：

侧边：

顶部：

把资源加载都放到 loader.ts 文件中处理

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 }

step two 完成，到目前已经完成大部分了，接下来只要将 grassblock.material用于新建的立方体上，然后将立方体渲染出来即可。

step three 使用纹理材质创建立方体并渲染

这一步我们需要进行一些封装，目的是将职责进行隔离。将创建立方体的代码放到 generatefrag.ts 中；我们将 scene 的初始化抽离到一个固定的类 core 中进行封装，core 类主要处理几件事情：初始化 scene、初始化 camera、初始化渲染器 renderer。

// 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 部分负责场景、相机、渲染器的初始化以及渲染草地格子。

// 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();
  }
}

至此一个旋转的草地格子生成出来了，效果如下：