vue+three.js中使用Ammo.js

news2024/11/24 17:36:28

直接通过npm i ammo.js安装进webpack的项目里调用时,会出现如下报错:

ERROR in ./node_modules/ammo.js/ammo.js 1:1683-1696                                                                                                                  
Module not found: Error: Can't resolve 'fs' in 'D:\WebProject\GosunProject\project\my-viewer\node_modules\ammo.js'
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Walk.vue?vue&type=script&lang=js& 11:0-27 131:41-77 132:29-55 133:29-50 134:25-48 136:30-58 137:39-53 153:34-50 373:24-46 377:27-41 384:31-45 386:28-44 388:30-44 389:30-55 390:27-59 391:23-39
 @ ./src/components/Walk.vue?vue&type=script&lang=js& 1:0-198 1:214-217 1:219-414 1:219-414
 @ ./src/components/Walk.vue 2:0-56 3:0-51 3:0-51 10:2-8
 @ ./src/router/index.js 3:0-42 15:13-17
 @ ./src/main.js 3:0-36 6:2-8

是因为ammo.js是为node环境设计的,而webpack环境下没有fs库,不配置就会报错。

引用按照如下步骤:

1. 去kripken/ammo.js下载build下的ammo.js

在这里插入图片描述
github地址如下:https://github.com/kripken/ammo.js/tree/main/builds

2. 修改ammo.js文件

把ammo.js文件放在自己方便调用的位置,我个人放在了src下的utils文件夹里。
在文件末尾增加一行代码export default Ammo
在这里插入图片描述
然后在文件中搜索这句话删除
在这里插入图片描述

3. 配置webpack

我是vue2.6.14的项目,vue-cli的版本是5.0.0,在vue.config.js文件里配置如下:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack:{
    resolve:{
      extensions:['.js'],
      alias:{
        path: require.resolve("path-browserify")
      },
      fallback:{
        "fs":false,
      }
    }
  }
})


保存后执行npm install path-browserify
然后启动项目,尝试打印调用Ammo的结果如下:
在这里插入图片描述
引入成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1034603.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VMware中安装Ubuntu(2023年)

Ubuntu安装 前言 安装过程中电脑发热时正常的,这个还是稍微有点点大;下载的版本根据自己的喜好来,新版本肯定要比旧版本占用的空间更大,大家自行选择;仅供学习使用的话可以下载成熟稳定的版本,例如16、18…

【新版】系统架构设计师 - 案例分析 - 架构设计<SOA与微服务>

个人总结,仅供参考,欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 架构设计<SOA与微服务>例题1例题2例题3例题4 架构 - 案例分析 - 架构设计<SOA与微服务> 这里SOA与微服务的例题只对应找寻了几个&#x…

servlet开发-通过Tomcat部署一个简单的webapp

首先我们得下载安装Tomcat,推荐看Tomcat(HTTP服务器)下载以及认识, 我们将通过打印一个hello word的方式来熟悉servlet开发,通过Tomcat部署一个webapp的流程 servlet的含义 Tomcat提供了一系列的api接口,这些api背后…

dfs力扣1993树上的操作

文章目录 dfs力扣1993树上的操作题目示例提示做题历程做题思路数组定义编写代码 完整代码 dfs力扣1993树上的操作 题目 题目链接 给你一棵 n 个节点的树,编号从 0 到 n - 1 ,以父节点数组 parent 的形式给出,其中 parent[i] 是第 i 个节点…

Java多线程篇(5)——cas和atomic原子类

文章目录 CASAtomic 原子类一般原子类针对aba问题 —— AtomicStampedReference针对大量自旋问题 —— LongAdder CAS 原理大致如下: 在java的 Unsafe 类里封装了一些 cas 的api。以 compareAndSetInt 为例,来看看其底层实现。 可以发现,最…

基于abaqus的非等速生长Voronoi晶体模型生成插件

1. 非等速生长晶体模型简介 对于标准Voronoi而言,每个晶粒的生长速率是相同的,任意两个晶粒的交界线为其形核点连线的垂直平分线,交界线为一条直线,如图1.1所示。 图1.1 标准Voronoi晶粒交界线 而对于非等速生长Voronoi晶体而言…

项目篇——java文档搜索引擎

Java 文档搜索引擎 文章目录 Java 文档搜索引擎一、分词二、完成parser 类2.1、排除非html文件2.2、解析html以下是解析 HTML 标题的方法以下是解析 对应的 URL以下是解析 HTML的正文: 补充:倒序索引 三、实现 index 类3.1、实现索引结构3.2、索引中新增…

学会使用Git 和 GitHub

Git 和 GitHub 都是程序员每天都要用到的东西 —— 前者是目前最先进的 版本控制工具,拥有最多的用户,且管理着地球上最庞大的代码仓库;而后者是全球最大 同性交友 代码托管平台、开源社区。 在没有这两个工具时,编程可能是这样的…

Go环境搭建

下载 官网地址 选择Download 根据自己的请选择对应的版本进行下载(我这里使用windos go.1.21.1版本) 我这里选择zip类型进行下载免安装版(你也可以选择mis类型进行下载,安装版一步一步next就行)。 安装 解压安装包 目录说明 配置环境变量 验证是否安装成功 完成上述配置…

通过插件去除Kotlin混淆去除 @Metadata标记

在Kotlin中,Metadata是指描述Kotlin类的元数据。它包含了关于类的属性、函数、注解和其他信息的描述。Metadata的作用主要有以下几个方面: 反射:Metadata可以用于在运行时获取类的信息,包括类的名称、属性、函数等。通过反射&…

【功能设计】数据分发功能设计

文章目录 设计脑图功能性非功能性 功能设计文档1. 需求分析1.1、功能性需求1.2、非功能性需求 2. 功能设计2.1 业务流程图2.2 数据流图2.3 表结构设计2.4 接口设计2.5 功能点 3.非功能性设计3.1 性能3.2 可用性3.3 并发性3.4 安全性 设计脑图 功能性 非功能性 功能设计文档 1…

国庆中秋特辑(三)使用生成对抗网络(GAN)生成具有节日氛围的画作,深度学习框架 TensorFlow 和 Keras 来实现

要用人工智能技术来庆祝国庆中秋,我们可以使用生成对抗网络(GAN)生成具有节日氛围的画作。这里将使用深度学习框架 TensorFlow 和 Keras 来实现。 一、生成对抗网络(GAN) 生成对抗网络(GANs,…

FFMpeg zoompan 镜头聚焦和移动走位

案例 原始图片 # 输出帧数,默认25帧/秒,25*4 代表4秒 # s1280x80 # 输出视频比例,可以设置和输入图片大小一致 # zoom0.002 表示每帧放大的倍数,下面代码是25帧/每秒 * 4秒,共1000帧 # 最终是 0.002*25*4 0.2&…

什么是深度学习?最易懂的机器学习入门文章

1. 什么是深度学习? 深度学习是机器学习领域中一个新的研究方向,它被引入机器学习使其更接近于人工智能。 原文:【科普&实践】超详细!一文带你玩转深度学习 - 飞桨AI Studio星河社区 深度学习是机器学习领域中一个新的研究方向&#xff…

折腾LINUX复古终端

这个复古终端是cool-retro-term,先来图 点击GITHUB地址 开始用docker运行,报错。后来用x11docker,因为我要远程通过SSH的x11转发,但实际x11docker的默认backbone就说docker,也就说要先用docker下载镜像&#xff0c…

[maven] 实现使用 plugin 及 properties 简述

[maven] 实现&使用 plugin 及 properties 简述 这章内容,我个人感觉可看可不看……? 不过课都上了,笔记 📒 补完才对得起自己嘛 plugins 主要讲一下 maven 的 plugin 时怎么实现的,以及项目中怎么调用自己实现…

成集云 | 用友T+集成聚水潭ERP(用友T+主管供应链)| 解决方案

源系统成集云目标系统 方案介绍 用友T是一款由用友畅捷通推出的新型互联网企业管理系统,它主要满足成长型小微企业对其灵活业务流程的管控需求,并重点解决往来业务管理、订单跟踪、资金、库存等管理难题。 聚水潭是一款以SaaS ERP为核心,集…

mysql事务测试

mysql的事务处理主要有两种方法1、用begin,rollback,commit来实现 begin; -- 开始一个事务 rollback; -- 事务回滚 commit; -- 事务提交 2、直接用set来改变mysql的自动提交模式 mysql默认是自动提交的,也就是你提交一个sql,它就直接执行!我…

微信管理系统可以解决什么问题?

微信作为一款社交通讯软件,已经成为人们日常生活中不可缺少的工具。不仅个人,很多企业都用微信来联系客户、维护客户和营销,这自然而然就会有很多微信账号、手机也多,那管理起来就会带来很多的不便,而微信管理系统正好…

基于径向基神经RBF的空调功率预测,RBF神经网络的详细原理,RBF回归预测代码

目录 完整代码和数据下载链接:基于MATLAB的RBF的空调能耗预测_模糊空调matlab资源-CSDN文库 https://download.csdn.net/download/abc991835105/87833598 RBF的详细原理 RBF的定义 RBF理论 易错及常见问题 RBF应用实例,基于rbf的空调功率预测 代码 结果…