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

本文链接：https://blog.csdn.net/weixin_38363139/article/details/131062260

本文介绍如何使用ThreeJS通过纹理贴图创建一个《我的世界》风格的草地方块。教程分为三个步骤：初始化立方体、加载纹理和创建及渲染纹理材质。在加载纹理时，需要注意纹理加载的异步性质以及光源的设置，以避免渲染出黑色方块的问题。文章提供了解决纹理不生效问题的策略，并展示了最终的渲染效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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个面共用一个图，底部是一个图。（图片资源文末链接自取，别使用一下截图来作为图片资源）。

准备几张静态图片：

底部：