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

学习threejs，实现配合使用WebWorker

news 文章来源：https://blog.csdn.net/qq_28419035/article/details/144290661 2025/4/8 21:10:29

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️WebWorker web端多线程
  • 二、🍀实现配合使用WebWorker
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现配合使用WebWorker，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️WebWorker web端多线程

WebWorker 是运行在浏览器后台的一个单独的线程，因此可以执行一些耗时的操作而不会阻塞主线程。WebWorker 通过与主线程之间传递消息实现通信，这种通信是双向的。WebWorker不能直接访问 DOM，也不能使用像 window 对象这样的浏览器接口对象，但可以使用一些WebWorker 标准接口和 Navigator 对象的部分属性和方法。
应用场景：
数据分析‌：Web Worker可以用于处理图像处理、数据挖掘、神经网络等耗时任务，这些任务通常需要大量的计算资源，使用Web Worker可以在不阻塞用户界面的情况下进行。
大量计算‌：适用于科学计算、物理模拟等需要大量计算的任务。通过在后台运行，Web Worker可以显著提高应用的性能和响应速度。
网络数据传输‌：例如文件上传/下载、消息推送等任务可以通过Web Worker在后台执行，不会影响页面的交互。
‌实时数据更新‌：Web Worker可以定时获取数据并在后台处理和更新，保持网页内容的实时性。
游戏开发‌：在游戏开发中，Web Worker可以用于处理游戏逻辑、碰撞检测和物理模拟等任务，提高游戏的性能和流畅度。

二、🍀实现配合使用WebWorker

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.PointLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
  • 5、加载几何模型：创建THREE.PlaneGeometry平面几何体planeGeometry。创建THREE.MeshLambertMaterial漫反射材质planeMaterial。传入参数planeGeometry和planeMaterial创建网格对象plane，设置旋转角度和投影，scene场景加入plane。生成随机1000个小方块模型组group，cene场景加入group（具体代码参考下面代码样例）。创建WebWorker多线程对象myWorker。 创建THREE.GLTFLoader gltf模型加载器loader，调用loader的load方法，加载‘scene.gltf’动漫模型，在回调函数中，scene场景加入该动漫模型gltf.scene，播放模型动画，同myWorker线程进行通信，实时改变group中小方块的位置信息。
  • 6、加入controls、gui控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn63(实现配合使用WEB WORKERS)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/loaders/GLTFLoader.js"></script><script src="lib/js/Detector.js"></script>
</head>
<style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
<body onload="draw()">
</body>
<script>// web Workers线程内是无法获取到window对象var renderer, camera, scene, gui, stats, ambientLight, directionalLight, controlsvar mixer, clock = new THREE.Clock()var initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.shadowMap.enabled = truedocument.body.appendChild(renderer.domElement)}var initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 30, 60)camera.lookAt(new THREE.Vector3(0, 0, 0))}var initScene = () => {scene = new THREE.Scene()}var initLight = () => {ambientLight = new THREE.AmbientLight('#bbbbbb')scene.add(ambientLight)directionalLight = new THREE.DirectionalLight('#ffffff')directionalLight.position.set(40, 60, 10)directionalLight.shadow.camera.near = 1; //产生阴影的最近距离directionalLight.shadow.camera.far = 400; //产生阴影的最远距离directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置directionalLight.shadow.camera.right = 50; //最右边directionalLight.shadow.camera.top = 50; //最上边directionalLight.shadow.camera.bottom = -50; //最下面//这两个值决定生成阴影密度 默认512directionalLight.shadow.mapSize.height = 1024;directionalLight.shadow.mapSize.width = 1024;directionalLight.castShadow = truescene.add(directionalLight)}var initModel = () => {var planeGeometry = new THREE.PlaneGeometry(1000, 1000)var planeMaterial = new THREE.MeshLambertMaterial({color: 0x333333, side: THREE.DoubleSide})var plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.rotation.x = -0.5 * Math.PI// plane.position.y = -.1plane.receiveShadow = truescene.add(plane)// 生成随机小正方体function randomCube() {let material = new THREE.MeshBasicMaterial({color: 0xffffff * Math.random()})let boxSize = Math.random() * 0.5let geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize)let mesh = new THREE.Mesh(geometry, material)mesh.position.set(Math.random() * 100 - 50, -3, Math.random() * 100 - 50)mesh.speed = Math.random()return mesh}let group = new THREE.Group()let arr = []for (let i = 0; i < 1000; i++) {group.add(randomCube())arr.push({speed: Math.random(),y: -3})}scene.add(group)//创建webWorkersif (!window.Worker) {alert("你的电脑不支持web Workers")}let myWorker = new Worker('lib/js/worker.js')var loader = new THREE.GLTFLoader()loader.load('data/model/dongman/scene.gltf', gltf => {gltf.scene.scale.set(.1, .1, .1)gltf.scene.traverse(child => {if (child.isMesh) {child.castShadow = true// child.receiveShadow = true// 视锥体剔除child.frustumCulled = false}})scene.add(gltf.scene)var obj = gltf.scenemeshHelper = new THREE.SkeletonHelper(obj)// scene.add(meshHelper)mixer = new THREE.AnimationMixer(obj)action = mixer.clipAction(gltf.animations[0])action.play()//在模型加载完成后，链接worker线程myWorker.postMessage(arr)myWorker.onmessage = function (e) {for (let i = 0; i < e.data.length; i++) {group.children[i].position.y = e.data[i].y}}})}var initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.target.set(0, 15, 0)controls.enableDamping = true}var render = () => {controls.update()var time = clock.getDelta()if (mixer) {mixer.update(time)}renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

worker.js 代码示例：

onmessage = function (e) {let arr = e.data;//设置定时器setInterval(function () {for (let i = 0; i < arr.length; i++) {arr[i].y += arr[i].speed;if (arr[i].y >= 80) {arr[i].y = -3;}}postMessage(arr);}, 1000 / 60);
};

效果如下：
在这里插入图片描述

相关文章：

学习threejs，实现配合使用WebWorker

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️WebWorker web端多线程 二、…...

编程日记 2024/12/10 17:03:11

TDengine 新功能 复合主键

1. 简介 从 TDengine 3.3.0.0 版本之后&#xff0c;新增了复合主键的功能。 TDengine 原来的时间列是不允许有重复时间戳的&#xff0c;有了复合主键功能后&#xff0c;时间列即允许有重复&#xff0c;重复后的时间戳按紧跟其后第二列主键列的值来确定唯一性。 此功能的常用…...

编程日记 2024/12/10 17:00:04

JVM 面试题

Java 虚拟机&#xff08;JVM&#xff09;是运行 Java 程序的引擎&#xff0c;它是 Java 语言 “一次编译&#xff0c;处处运行” 的核心技术。JVM 的主要任务是将 Java 字节码&#xff08;Bytecode&#xff09;解释成机器码并执行&#xff0c;负责内存管理、线程管理、垃圾回收…...

编程日记 2024/12/10 16:59:01

组件上传图片不回显问题

import { Plus } from "element-plus/icons-vue"; // 图片上传 const img_add ref([]); function httpRequest_add(option) {let dataForm new FormData();dataForm.append("file", option.file);dataForm.append("id", user.data.id);axios({…...

编程日记 2024/12/10 16:58:00

【JavaWeb后端学习笔记】Spring AOP面向切面编程

AOP 1、Spring AOP概述2、SpringAOP快速入门3、SpringAOP核心概念4、通知类型5、通知顺序6、切入点表达式6.1 execution方式6.2 annotation方式 7、连接点 1、Spring AOP概述 AOP&#xff1a;Aspect Oriented Programming&#xff0c;面向特定方法编程。 AOP是通过动态代理技术…...

编程日记 2024/12/10 16:56:59

6.584-Lab5B

6.584-Lab5B Reference CodeReference BlogHomeworkMyself Code Sharded Key/Value Service 梗概 这个图是我从上面参考blog中拿来的&#xff0c;觉得做的不错&#xff0c;借助这张图来讲解一下需要一个什么样的 Service。 ShardCtrler Client&#xff1a; 接收来自客户发出的命…...

编程日记 2024/12/10 16:55:56

OceanBase 的探索与实践

作者&#xff1a;来自 vivo 互联网数据库团队- Xu Shaohui 本文总结了目前我们遇到的痛点问题并通过 OceanBase 的技术方案解决了这些痛点问题&#xff0c;完整的描述了 OceanBase 的实施落地&#xff0c;通过迁移到 OceanBase 实践案例中遇到的问题与解决方案让大家能更好的了…...

编程日记 2024/12/10 16:52:53

安卓调试环境搭建

前言 前段时间电脑重装了系统&#xff0c;最近准备调试一个apk&#xff0c;没想到装环境的过程并不顺利&#xff0c;很让人火大&#xff0c;于是记录一下。 反编译工具下载 下载apktool.bat和apktool.jar 官网地址&#xff1a;https://ibotpeaches.github.io/Apktool/install…...

编程日记 2024/12/10 16:51:52

动画Lottie

Lottie简介 Lottie是一个Airbnb 开发的用于Android&#xff0c;iOS&#xff0c;Web和Windows的库&#xff0c;用于解析使用Bodymovin导出为json的Adobe After Effects动画&#xff0c;并在移动设备和网络上呈现 — GitHub Lottie主要特性 After Effects 兼容性&#xff1a; …...

编程日记 2024/12/10 16:50:50

C++感受14-Hello Object 封装版 - 上

1. 封装即约束——封装和派生、多态的本质区别 一门计算机语言&#xff0c;要如何帮助程序员写出优秀的代码&#xff1f;两个方法&#xff1a;一是给程序员更多能力&#xff0c;二是给程序员更多约束。之前我们学习的派生和多态&#xff0c;更多的是给我们技能&#xff0c;而封…...

编程日记 2024/12/10 16:47:46

网络安全中大数据和人工智能应用实践

传统的网络安全防护手段主要是通过单点的网络安全设备&#xff0c;随着网络攻击的方式和手段不断的变化&#xff0c;大数据和人工智能技术也在最近十年飞速地发展&#xff0c;网络安全防护也逐渐开始拥抱大数据和人工智能。传统的安全设备和防护手段容易形成数据孤岛&#xff0…...

编程日记 2024/12/10 16:42:40

RISC-V架构下OP-TEE 安全系统实践

安全之安全(security)博客目录导读 本篇博客，我们聚焦RISC-V 2024中国峰会上的RISC-V和OP-TEE结合的一个安全系统实践，来自芯来科技桂兵老师。 关于RISC-V TEE(可信执行环境)的相关方案，如感兴趣可参考R...

编程日记 2024/12/10 16:41:39

40分钟学 Go 语言高并发：【实战】分布式缓存系统

【实战课程】分布式缓存系统 一、整体架构设计 首先&#xff0c;让我们通过架构图了解分布式缓存系统的整体设计&#xff1a; 核心组件 组件名称功能描述技术选型负载均衡层请求分发、节点选择一致性哈希缓存节点数据存储、过期处理内存存储 持久化同步机制节点间数据同步…...

编程日记 2024/12/10 16:34:30

[创业之路-186]：《华为战略管理法-DSTE实战体系》-1-为什么UTStarcom死了，华为却活了，而且越活越好？

目录 前言 一、市场定位与战略选择 二、技术创新能力 三、企业文化与团队建设 四、应对危机的能力 五、客户为中心的理念 六、市场适应性与战略灵活性 七、技术创新与研发投入 八、企业文化与团队建设 九、应对危机的能力 前言 UT斯达康&#xff08;UTStarcom&#…...

编程日记 2024/12/10 16:31:26

python如何多行注释

在Python中&#xff0c;多行注释通常有两种方式&#xff1a; 使用三个单引号&#xff08;&#xff09;或三个双引号&#xff08;"""&#xff09;来创建多行字符串&#xff0c;这可以被用来作为多行注释。这种方式在Python中实际上是创建了一个多行的字符串对象…...

编程日记 2024/12/10 16:29:24

前端工程化面试题目常见

前端工程化面试常见题目包括&#xff1a; • 谈谈你对WebPack的认识。 • Webpack打包的流程是什么&#xff1f; • 说说你工作中几个常用的loader。 • 说说HtmlWebpackPlugin插件的作用。 • Webpack支持的脚本模块规范有哪些&#xff1f; • Webpack和gulp/grunt相比有什么特…...

编程日记 2024/12/10 16:28:21

定点数的乘除运算

原码一位乘法 乘积的符号由两个数的符号位异或而成。&#xff08;不参与运算&#xff09;被乘数和乘数均取绝对值参与运算&#xff0c;看作无符号数。乘数的最低位为Yn&#xff1a; 若Yn1&#xff0c;则部分积加上被乘数|x|&#xff0c;然后逻辑右移一位&#xff1b;若Yn0&…...

编程日记 2024/12/10 16:25:18

页面置换算法模拟 最近最久未使用（LRU）算法

最近最久未使用&#xff08;LRU&#xff09;算法是一种基于页面访问历史的页面置换算法。它选择最久未使用的页面进行置换。当需要访问一个不在内存中的页面时&#xff0c;如果内存已满&#xff0c;则选择最久未使用的页面进行置换。LRU算法通过记录页面的访问时间戳来判断页面…...

编程日记 2024/12/10 16:23:11

Ubuntu与Centos系统有何区别？

Ubuntu和CentOS都是基于Linux内核的操作系统&#xff0c;但它们在设计理念、使用场景和技术实现上有显著的区别。以下是详细的对比&#xff1a; 1. 基础和发行版本 Ubuntu&#xff1a; 基于Debian&#xff0c;使用.deb包管理系统。包含两个主要版本&#xff1a; LTS&#xff…...

编程日记 2024/12/10 16:20:07

RK3568平台开发系列讲解（pinctrl 子系统篇）pinctrl_debug

🚀返回专栏总目录 文章目录 1. Overview2. debug信息2.1 pinctrl-devices2.2. pinctrl-handles2.3. pinctrl-handles3. debug信息3.1. 查看（pinctrl_register_pins）注册了哪些pins3.2. 查看pin groups；3.3. 查看每种functions所占用的gpio groups信息：3.4. pinconf沉淀、…...

编程日记 2024/12/10 16:19:06

避大坑！Vue3中reactive丢失响应式的问题

在vue3中,我们定义响应式数据无非是ref和reactive。 但是有的小伙伴会踩雷&#xff01;导致定义的响应式丢失的问题。 reactive丢失响应式的情况1&#xff08;直接赋值&#xff09; 场景: 1.你定义了一个数据:let datareactive({name:"",age:"" }) 2.然后你…...

编程日记 2024/12/10 16:18:05

springSecurity权限控制

权限控制&#xff1a;不同的用户可以使用不同的功能。 我们不能在前端判断用户权限来控制显示哪些按钮&#xff0c;因为这样&#xff0c;有人会获取该功能对应的接口&#xff0c;就不需要通过前端&#xff0c;直接发送请求实现功能了。所以需要在后端进行权限判断。&#xff0…...

编程日记 2024/12/10 16:17:03

Pytorch训练固定随机种子（单卡场景和分布式训练场景）

模型的训练是一个随机过程&#xff0c;固定随机种子可以帮助我们复现实验结果。 接下来介绍一个模型训练过程中固定随机种子的代码&#xff0c;并对每条语句的作用都会进行解释。 def seed_reproducer(seed2333):random.seed(seed)os.environ["PYTHONHASHSEED"] s…...

编程日记 2024/12/10 16:16:02

Conda + JuiceFS ：增强 AI 开发环境共享能力

Conda 是当前 AI 应用开发领域中非常流行的环境和包管理系统&#xff0c;因其能够简单便捷地创建与系统资源相隔离的虚拟环境广受欢迎。 Conda 支持在不同的操作系统上重建相同的工作环境&#xff0c;但在环境共享复用方面仍存在一些挑战。比如&#xff0c;在不同机器上复用相…...

编程日记 2024/12/10 16:15:00

人工智能-人机交互的机会

目录 引言HCI领域的发展机会人工智能领域的崛起与机会博雅智信的HCI与AI辅导服务结语 引言 在人类科技不断进步的今天&#xff0c;HCI&#xff08;人机交互&#xff09;和人工智能&#xff08;AI&#xff09;是两个密切相关且充满潜力的领域。HCI研究如何优化人类与计算机之间…...

编程日记 2024/12/10 16:09:54

【系统架构核心服务设计】使用 Redis ZSET 实现排行榜服务

目录 一、排行榜的应用场景 二、排行榜技术的特点 三、使用Redis ZSET实现排行榜 3.1 引入依赖 3.2 配置Redis连接 3.3 创建实体类&#xff08;可选&#xff09; 3.4 编写 Redis 操作服务层 3.5 编写控制器层 3.6 测试 3.6.1 测试 addMovieScore 接口 3.6.2 测试 g…...

编程日记 2024/12/10 16:06:50

elasticsearch基础总结

最近实习&#xff0c;项目用的elasticseatch做的存储库&#xff0c;但是之前对于es接触的不多&#xff0c;查询语法有些不熟&#xff0c;每次想写个DSL查询时都要gpt或者施展搜索大法&#xff0c;所以索性就自己总结总结&#xff0c;以后忘了也方便查。所以这篇文章会持续更新。…...

编程日记 2024/12/10 16:05:49

【慕伏白教程】Zerotier 连接与简单配置

文章目录 下载与安装WindowsLinuxapt安装官方脚本安装 Zerotier 配置新建网络网络配置 终端配置WindowsLinux 下载与安装 Windows 进入Zerotier官方下载网站&#xff0c;点击下载 在下载目录找到安装文件&#xff0c;双击打开后点击 Install 开始安装 安装完成后&#xff0c;…...

编程日记 2024/12/10 16:04:47

Brain.js（九）：LSTMTimeStep 实战教程 - 未来短期内的股市指数预测 - 实操要谨慎

系列的前一文RNNTimeStep 实战教程 - 股票价格预测 讲述了如何使用RNN时间序列预测实时的股价&#xff0c; 在这一节中&#xff0c;我们将深入学习如何利用 JavaScript 在浏览器环境下使用 LSTMTimeStep 进行股市指数的短期预测。通过本次实战教程&#xff0c;你将了解到如何用…...

编程日记 2024/12/10 16:02:45

C# 字符串（String）

文章目录 前言创建 String 对象的方式1. 通过给 String 变量指定一个字符串2. 通过使用 String 类构造函数3. 通过使用字符串串联运算符&#xff08; &#xff09;4. 通过检索属性或调用一个返回字符串的方法5. 通过格式化方法来转换一个值或对象为它的字符串表示形式 String …...

编程日记 2024/12/10 16:01:44