Three.js - 加载纹理并应用到网格

最新推荐文章于 2024-06-02 17:13:03 发布

「已注销」

最新推荐文章于 2024-06-02 17:13:03 发布

阅读量1.9k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82419766

版权

这篇博客介绍了如何在Three.js中加载纹理并将其应用到3D网格上。首先，通过示例展示了纹理基础用法，接着详细说明Texture的加载，包括介绍和使用方法。加载器的异步性质被强调，提醒开发者注意纹理加载时间与材质创建的关系。最后，提供了示例代码供读者参考。

摘要由CSDN通过智能技术生成

纹理最基础的用法就是在材质上贴图，将图片通过THREE.TextureLoader加载，然后设置为材质的map属性。

1、示例

https://ithanmang.gitee.io/threejs/home/201809/20180905/01-basic-texture.html
效果
这里写图片描述

2、Texture

2.1、简介

Texture
创建一个纹理来应用于一个表面或者作为一个反射或折射贴图。
可以用来加载很多格式的图片
PNG, JPG, GIF, DDS......
也可以加载视频贴图MP4, OGG/OGV，加载视频使用THREE.VideoTexture

2.2、使用方法

加载纹理使用THREE.TextureLoader。

注意：纹理的加载时异步执行的，作为纹理的图片大小其长宽最好是2的次方，例如256 * 256 、512 * 512 、1024 * 1024...

实例化加载器

 // 实例化加载器
var loader = new THREE.TextureLoader();

// 加载文件
loader.load(
	// 文件 url
	'textures/land_ocean_ice_cloud_2048.jpg',

	// 加载完成后的回调函数
	function ( texture ) {
   
		// 纹理被加载时创建材质
		var material = new THREE.MeshBasicMaterial( {
   
			map: texture
		 } );
	},
	// 加载出错的回调函数
	function ( err ) {
   
		console.error( 'An error happened.' );
	}
);

也可以直接不用在回调函数中创建材质

 let texture = new THREE.TextureLoader().load('../../textures/general/'+imageUrl);

 let material = new THREE.MeshPhongMaterial();
 material.map = texture;

因为纹理的加载时异步的，所以如果纹理图片比较大的话等材质已经创建完毕了但是纹理还未加载出来。

3、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../../../three.png">
    <title>基础纹理</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /* 溢出隐藏 */
        }
        #loading {
   
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px