Three.js教程：动态切换3D模型纹理（GLTF, GLB, FBX）-html教程-PHP中文网

Three.js教程：动态切换3D模型纹理（GLTF, GLB, FBX）

心靈之曲

发布： 2025-11-30 12:46:02

原创

792人浏览过

Three.js教程：动态切换3D模型纹理（GLTF, GLB, FBX）

本教程详细阐述如何在three.js应用中动态更换gltf、glb、fbx等3d模型的特定网格纹理。我们将学习如何利用`three.textureloader`加载新纹理，并通过设置`mesh.material.map`属性将其应用到目标网格上，实现基于用户交互（如下拉选择）的实时纹理更新，同时提供代码示例和优化建议。

在Three.js构建的3D应用中，为模型动态切换纹理是一项常见的需求，例如在产品配置器中允许用户选择不同的材质外观。本教程将详细介绍如何针对GLTF、GLB、FBX等常见格式的3D模型，实现其特定部分的纹理动态更新。

1. 理解Three.js中的纹理与材质

在Three.js中，纹理（Texture）是赋予3D模型表面细节和色彩的图像数据，它通过UV坐标映射到模型表面。材质（Material）则定义了模型的渲染方式，例如颜色、光泽度、透明度等。纹理通常作为材质的一个属性来使用，最常见的是作为map属性，提供模型的基础颜色信息（漫反射贴图）。

当需要改变模型的视觉外观时，我们通常会加载一个新的纹理图像，并将其应用到目标网格的材质上。

2. 核心原理：加载与应用纹理

动态切换3D模型纹理的核心在于加载新的图像资源并将其赋值给目标网格材质的map属性。

2.1 纹理加载器 (THREE.TextureLoader)

THREE.TextureLoader是Three.js中用于加载图像并将其转换为可用于材质的Texture对象的工具。它支持从URL或Base64编码的字符串加载图像。

import * as THREE from 'three';

const textureLoader = new THREE.TextureLoader(); // 推荐复用此实例

// 从URL加载纹理
const newTexture = textureLoader.load('path/to/your/new_texture.jpg', 
    (texture) => {
        // 纹理加载成功后的回调
        console.log('纹理加载成功！', texture);
    },
    undefined, // 可选：加载进度回调
    (error) => {
        // 纹理加载失败后的回调
        console.error('纹理加载失败！', error);
    }
);

// 或者从Base64字符串加载
// const base64TextureString = 'data:image/png;base64,...';
// const newTextureFromBase64 = textureLoader.load(base64TextureString);

登录后复制

2.2 应用纹理到材质 (mesh.material.map)

加载完成后，将新创建的Texture对象赋值给目标网格材质的map属性即可。

BRANDMARK

AI帮你设计Logo、图标、名片、模板……等

180

查看详情

// 假设已找到目标网格 targetMesh
if (targetMesh && targetMesh.material) {
    // 释放旧纹理资源（可选但推荐，防止内存泄漏）
    if (targetMesh.material.map) {
        targetMesh.material.map.dispose(); 
    }

    targetMesh.material.map = newTexture;
    targetMesh.material.needsUpdate = true; // 告知Three.js材质已更新
}

登录后复制

mesh.material.needsUpdate = true 这一行至关重要。它通知Three.js渲染器材质属性已更改，需要重新编译着色器或更新内部状态，以确保新的纹理能够正确显示。

3. 识别并选择目标网格（Mesh）

加载的GLTF、GLB或FBX模型通常是一个包含多个子对象的层级结构。这些子对象可能是灯光、相机，或者更常见的是构成模型不同部分的Mesh对象。要更改特定部分的纹理，需要首先定位到对应的Mesh对象。

可以通过遍历模型对象的children数组来查找目标网格。如果模型结构复杂，可能需要递归遍历。通常，模型制作者会为不同的网格命名，这有助于我们通过name属性进行查找。

/**
 * 在Three.js对象层级中根据名称查找Mesh
 * @param {THREE.Object3D} parent - 要搜索的父对象（通常是gltf.scene或模型本身）
 * @param {string} name - 要查找的Mesh的名称
 * @returns {THREE.DrawnObject | null} - 找到的Mesh对象，如果未找到则为null
 */
function findMeshByName(parent, name) {
    let targetMesh = null;
    parent.traverse((object) => {
        if (object.isMesh && object.name === name) {
            targetMesh = object;
        }
    });
    return targetMesh;
}

// 示例：假设已加载的GLTF模型存储在gltf.scene中
// 查找名为"Wall_Mesh"的网格
const wallMesh = findMeshByName(gltf.scene, 'Wall_Mesh');
if (wallMesh) {
    // 现在可以将纹理应用到 wallMesh
}

登录后复制

4. 实现动态纹理切换示例

以下是一个完整的HTML文件示例，演示如何在Three.js中加载一个GLTF模型，并使用下拉菜单动态切换其特定部分的纹理。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js 动态纹理切换教程</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: sans-serif; }
        #texture-selector {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 100;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            font-size: 16px;
            cursor: pointer;
        }
        #texture-selector:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    </style>
</head>
<body>
    <select id="texture-selector">
        <option value="textures/wood_texture.jpg">木纹</option>
        <option value="textures/brick_texture.jpg">砖墙</option>
        <option value="textures/marble_texture.jpg">大理石</option>
    </select>

    <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
        import { GLTFLoader } from 'https://unpkg.com/three@0.160.0/examples/jsm/loaders/GLTFLoader.js';
        import { OrbitControls } from 'https://unpkg.com/three@0.160.0/examples/jsm/controls/OrbitControls.js';

        let scene, camera, renderer, model, targetMesh;
        const textureLoader = new THREE.TextureLoader(); // 复用TextureLoader实例

        init();
        animate();

        function init() {
            // 场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xdddddd); // 浅灰色背景

            // 相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 1.5, 3); // 调整相机位置

            // 渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio); // 提高渲染质量
            document.body.appendChild(renderer.domElement);

            // 灯光
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); // 环境光
            scene.add(ambientLight);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 平行光
            directionalLight.position.set(

登录后复制

以上就是Three.js教程：动态切换3D模型纹理（GLTF, GLB, FBX）的详细内容，更多请关注php中文网其它相关文章！