当前位置：首页 > news >正文

使用worker执行Three.js中耗时的步骤

news 2026/5/26 1:16:55

在Three.js开发3D应用时，我们常常会遇到一个棘手的问题：当执行一些高耗时操作（比如海量顶点生成、复杂模型解析、物理碰撞计算等）时，主线程会被阻塞，导致3D场景卡顿、帧率下降，甚至出现页面无响应的情况。

这是因为JavaScript是单线程语言，主线程既要负责Three.js的渲染循环，又要处理耗时计算，两者抢占资源就会引发性能瓶颈。

面对海量计算时，常见的一些处理方式会考虑如下几个方向：

缓存可复用的元素
看看有没有批量处理的方法
使用worker并行计算

下面介绍下使用woker运行第三方库的一些踩坑经验

一、问题描述

在我们需要将海量顶点生成时，最简单的一个代码如下：

将下面串行的代码改为多线程执行，使用worker来分担计算压力。很容易注意到，我们需要在worker中引入three.js 库

第一个问题就是：怎么在worker中引用第三方库。

import * as THREE from "three"; import { TextGeometry } from "three/addons/geometries/TextGeometry.js"; // list 数组内可能有几千个数据 const elementList = list.map(item => { // 定义文字几何参数 // 这个TextGeometry的生成比较耗费时间 const textGeometry = new TextGeometry(text, { font: this.font, size: 0.2, // 字体大小 depth: 0.00001, // 字体厚度 curveSegments: 12, bevelEnabled: true, bevelThickness: 0.0001, bevelSize: 0.00008, bevelSegments: 3, }); const textMaterial = new THREE.MeshBasicMaterial({ color: TEXT_COLOR }); const textMesh = new THREE.Mesh(textGeometry, textMaterial); return textMesh })

二、踩坑分享

踩坑描述：

需要找到在vite环境下，正确使用worker的示例。

网上问worker的使用，给的示例基本都是没有考虑vite的示例，有说设置{ type: 'module' }就可以 import，有说用importScripts（）加载三分脚本的，其实都不对。

最佳实践：

问AI: "javascript的worker，在vite下引入three.js 的最佳实践"

vite 对 worker 中引入依赖做了处理，完美支持项目node_model中依赖。

vite + worker 核心实现：

worker.js

// 直接 import，完美支持 import * as THREE from "three"; import { TextGeometry } from "three/addons/geometries/TextGeometry.js"; // 监听主线程发来的消息 self.onmessage = (e) => { const { fontData, text, size, height } = e.data; // 模拟三方依赖的复杂计算 const textGeo = new TextGeometry(1, 1, 1); self.postMessage({ textGeo, }); };

main.js

import TextWorker from "./worker.js?worker"; // 注意这里的引入方式， 用new URL()的方式也是可以的 const worker = new TextWorker(); worker.postMessage({ fontData: "fontData", text: item, size: 0.8, height: 0.2, }); worker.onmessage = (e) => { const { position, normal, index } = e.data; console.log(e, "onmessage"); };

三、workerpool.js 的使用

Web Worker 线程池（复用多个子线程），提供了一种自然的、基于Promise的代理方式来访问工作线程，就像它们直接在主应用程序中可用一样。

要是你的程序需要完美的import的支持，可以考虑使用 workerpool.js 来管理线程池。

说明文档：链接

使用案例

worker.js

import * as THREE from "three"; import { TextGeometry } from "three/addons/geometries/TextGeometry.js"; import workerpool from "workerpool"; // 要暴露给主线程调用的方法 function createText(text) { const textGeometry = new THREE.BoxGeometry(1, 1, 1); const textMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); const textMesh = new THREE.Mesh(textGeometry, textMaterial); // console.log(textMesh, "textMesh"); return { textMesh: textMesh.geometry, // 如果运行报错了，可以看看是不是回传的对象太复杂了。 }; } // 注册方法，让主线程可以调用 workerpool.worker({ createText, });

main.js

<script setup> import workerpool from "workerpool"; import { onMounted } from "vue"; import workerURL from "./text.worker.js?worker&url"; onMounted(() => { // 1. 创建线程池：最大并发 4 个 Worker const pool = workerpool.pool(workerURL, { maxWorkers: 4, workerType: "web", workerOpts: { type: "module", // 必须开启 module 模式 }, }); setTimeout(async () => { const tasks = [ "37.13", "37.12", "37.13", "37.13", "37.12", "37.13", "37.13", "37.12", "35.13", "35.13", ]; // 模拟批量计算 const promises = tasks.map((item) => pool.exec("createText", [item])); Promise.all(promises) .then((data) => { console.log(data, "data"); }) .catch((err) => { console.log(err, "err"); }); }, 1 * 1000); }); </script>

四、复杂对象回传

问题描述：

因为worker的能力限制，worker 只能回传一些简单的对象，当我们回传了一个复杂对象时，会报错误。

text.worker.js:16 Uncaught DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': function onRotationChange() { quaternion.setFromEuler(rotation, false); } could not be cloned. at self.onmessage (text.worker.js:16:8)