如何用three.js加载从KMZ提取的DAE文件并渲染其定义路径的JPG纹理？

1. 从KMZ中提取完整资源 #

KMZ本质是ZIP压缩包，直接用解压工具（如7-Zip）解压，必须保留内部文件结构：

• 提取目标DAE文件
• 完整保留texture文件夹及其中的所有JPG纹理，确保DAE文件和texture文件夹处于同一目录层级，和原KMZ内的结构完全一致。

2. 用Three.js加载DAE并处理纹理 #

使用Three.js的ColladaLoader加载模型，默认会根据DAE内的相对路径自动加载纹理，核心操作如下：

基础加载代码示例 #

import * as THREE from 'three';
import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';

// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 配置DAE加载器
const loader = new ColladaLoader();
// 若DAE文件不在项目根目录，这里设置对应文件夹路径作为基础前缀
loader.setPath('./your-dae-folder/');

// 加载DAE模型
loader.load('target-model.dae', function (collada) {
    const model = collada.scene;
    scene.add(model);
    // 调整相机位置适配模型（可根据模型大小自行修改）
    camera.position.z = 5;
});

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

常见问题排查 #

• 纹理加载失败：检查texture文件夹是否和DAE文件同级，或通过loader.setPath()修正基础路径，确保DAE内的.\texture\xxx.jpg能指向实际文件位置。
• 模型显示黑色：纹理加载失败时Three.js会默认使用黑色材质，可通过浏览器控制台查看404错误，定位路径问题。
• 跨域限制：本地测试时必须用本地服务器（如npx serve）运行页面，避免浏览器跨域规则阻止纹理加载。

3. 手动修正纹理路径（可选） #

如果DAE内的路径是Windows风格反斜杠，可手动修改DAE文件的<init_from>节点，把反斜杠改成Web环境通用的正斜杠：

<init_from>./texture/35748_0001009011_6283.jpg</init_from>

避免加载器因路径格式问题解析失败。

内容的提问来源于stack exchange，提问作者Finn