寻求帮助：在Sveltekit与Vite环境中运行manifold-3d

1. 安装依赖 #

首先安装官方提供的Manifold-3D包：

npm install manifold-3d

2. 配置Vite #

由于SvelteKit基于Vite运行，需要修改vite.config.js（或.ts）来确保WASM文件被正确处理：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	optimizeDeps: {
		exclude: ['manifold-3d'] // 避免Vite预打包时破坏WASM文件结构
	},
	worker: {
		format: 'es' // 适配Manifold的WASM加载逻辑
	}
});

3. 在Svelte组件中初始化Manifold #

在需要使用Manifold的组件（如+page.svelte）中，通过异步方式完成WASM的加载与初始化：

<script>
	import { onMount } from 'svelte';
	import * as THREE from 'three';

	let manifold;

	onMount(async () => {
		// 异步导入Manifold模块
		const ManifoldModule = await import('manifold-3d');
		// 初始化WASM，指定文件查找路径
		manifold = await ManifoldModule.default({
			locateFile: (fileName) => new URL(`manifold-3d/dist/${fileName}`, import.meta.url).href
		});

		// 示例：生成立方体并转换为Three.js几何体
		const cubeMesh = manifold.Cube(1, 1, 1);
		const threeGeometry = new THREE.BufferGeometry();
		threeGeometry.setAttribute('position', new THREE.BufferAttribute(cubeMesh.positions, 3));
		threeGeometry.setIndex(new THREE.BufferAttribute(cubeMesh.indices, 1));

		console.log('Manifold初始化完成，已生成立方体几何体');
	});
</script>

<div>Manifold-3D 测试组件</div>

关键注意事项 #

• 异步加载：WASM文件加载是异步操作，必须用await处理模块导入和初始化，避免阻塞主线程或出现未初始化错误。
• 路径配置：locateFile参数用于指引Manifold找到对应的WASM文件，Vite会自动处理包内静态资源的路径映射。
• 避免预打包冲突：在optimizeDeps.exclude中排除manifold-3d，防止Vite预打包过程中修改WASM文件导致加载失败。

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